[TOC] # 多个命名的视图 可以给ui-view指定名称，这样一个模板中就可以有多个ui-view。假设您有一个应用，需要动态填充graph、table data和filters，像下面这样：  当您需要使用多视图时，需要用到状态的views属性，views属性值是一个对象。 # 设置views属性将覆盖覆盖的template属性 * 如果在状态中定义了views属性，那么状态中的templateUrl、template 和 templateProvider属性将被忽略。 * 然后views中的每一个 view 都可以设置自身的模板属性（template，templateUrl，templateProvider） 和控制器属性（controller，controllerProvider）。 # 视图名称 - 相对命名与绝对命名【viewname@statename】 * 在定义views属性时，如果视图名称中包含@，那么视图名称就是绝对命名的方式，否则就是相对命名的方式。相对命名的意思是相对于父模板中的ui-view，而绝对命名则指定了相对于哪个状态的模板。 * 在 ui-router 内部，views属性中的每个视图都被按照viewname@statename的方式分配为绝对名称，viewname是目标模板中的ui-view对应的名称，statename是状态的名称，状态名称对应于一个目标模板。@前面部分为空表示未命名的ui-view，@后面为空则表示相对于根模板，通常是 index.html。 ~~~ //父路由状态 $stateProvider.state('home', { templateUrl: basePathProvider.getPath('homeTpl.html'), resolve: {}, controller: 'homeTplCtrl', onEnter: function () { }, onExit: function () { }, }); //子路由状态 $stateProvider.state('home.list', { views: { 'nav@home': { templateUrl: basePathProvider.getPath('homeTplNav.html'), }, 'info@home': { templateUrl: basePathProvider.getPath('homeTplInfo.html'), }, 'footer@home': { templateUrl: basePathProvider.getPath('homeTplFooter.html'), }, } }); ~~~ 【homeTpl.html】 ~~~ <h1 ui-sref=".list">home</h1> <!--nav可以显示--> <div ui-view="nav"></div> <div ui-view="info"></div> <div ui-view="footer"></div> ~~~