3、Angular-Ui Router 多个命名视图

翻译 2017年07月21日 14:13:53

You can name your views so that you can have more than one ui-view per template. Let's say you had an application state that needed to dynamically populate a graph, some table data and filters for the table like this:

When setting multiple views, you need to use the views property on the state object. views is an object.

Views override state's template properties

If you define a views object, your state's templateUrltemplate and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.

Example - Name Matching
例子 - 名称匹配

The property keys on views should match your view names, like so:

<!-- index.html -->		
  <div ui-view="filters"></div>		
  <div ui-view="tabledata"></div>		
  <div ui-view="graph"></div>		
  .state('report', {		
    views: {		
      'filters': { ... templates and/or controllers ... },		
      'tabledata': {},		
      'graph': {},		

Then each view in views can set up its own templates (templatetemplateUrltemplateProvider) and controllers (controllercontrollerProvider).
然后,views中的每个视图都可以设置自己的模板(template, templateUrl, templateProvider)和控制器(controller, controllerProvider)。

    views: {		
      'filters': {		
        templateUrl: 'report-filters.html',		
        controller: function($scope){ ... controller stuff just for filters view ... }		
      'tabledata': {		
        templateUrl: 'report-table.html',		
        controller: function($scope){ ... controller stuff just for tabledata view ... }		
      'graph': {		
        templateUrl: 'report-graph.html',		
        controller: function($scope){ ... controller stuff just for graph view ... }		

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
在幕后,每个视图会被指定一个这样形式(viewname@statename)的绝对名,其中viewname是视图指令中使用的名称, statename是状态的绝对名称,,例如contact.item。您还可以选择在绝对语法中编写视图名称。

For example, the previous example could also be written as:

    views: {		
      'filters@': { },		
      'tabledata@': { },		
      'graph@': { }		

Notice that the view names are now specified as absolute names, as opposed to the relative name. It is targeting the 'filters', 'tabledata', and 'graph' views located in the root unnamed template. Since it's unnamed, there is nothing following the '@'. The root unnamed template is your index.html.
注意,视图名称现在被指定为绝对名称,而不是相对名称。它的目标是'filters', 'tabledata'和'graph' 视图,这些视图位于未命名的模板中。因为它是匿名的,所以“@”后面没有任何东西。未命名的模板是您的index.html。

Absolute naming lets us do some powerful view targeting. Remember! With power comes responsibility. Let's assume we had several templates set up like this (this example is not realistic, it's just to illustrate view targeting):

<!-- index.html (root unnamed template) -->		
<body ng-app>		
<div ui-view></div> <!-- contacts.html plugs in here -->		
<div ui-view="status"></div>		
<!-- contacts.html -->		
<h1>My Contacts</h1>		
<div ui-view></div>		
<div ui-view="detail"></div>		
<!-- contacts.detail.html -->		
<h1>Contacts Details</h1>		
<div ui-view="info"></div>		

Let's look at the various views you could target from within the contacts.detail state. Remember that if an @ is used then the view path is considered absolute:

  .state('contacts', {		
    // This will get automatically plugged into the unnamed ui-view 		
    // of the parent state template. Since this is a top level state, 		
    // its parent state template is index.html.		
    templateUrl: 'contacts.html'   		
  .state('contacts.detail', {		
    views: {		
        // Relative Targeting             //		
        // Targets parent state ui-view's //		
        // Relatively targets the 'detail' view in this state's parent state, 'contacts'.		
        // <div ui-view='detail'/> within contacts.html		
        "detail" : { },            		
        // Relatively targets the unnamed view in this state's parent state, 'contacts'.		
        // <div ui-view/> within contacts.html		
        "" : { }, 		
        // Absolute Targeting using '@'                      //		
        // Targets any view within this state or an ancestor //		
        // Absolutely targets the 'info' view in this state, 'contacts.detail'.		
        // <div ui-view='info'/> within contacts.detail.html		
        "info@contacts.detail" : { }		
        // Absolutely targets the 'detail' view in the 'contacts' state.		
        // <div ui-view='detail'/> within contacts.html		
        "detail@contacts" : { }		
        // Absolutely targets the unnamed view in parent 'contacts' state.		
        // <div ui-view/> within contacts.html		
        "@contacts" : { }		
        // absolutely targets the 'status' view in root unnamed state.		
        // <div ui-view='status'/> within index.html		
        "status@" : { }		
        // absolutely targets the unnamed view in root unnamed state.		
        // <div ui-view/> within index.html		
        "@" : { } 		

You can see how this ability to not only set multiple views within the same state but ancestor states could become a meritable playground for a developer :).




Angular ui-router同时加载多个视图,根据不同url在同一个视图切换内容模板

Angular ui-router同时加载多个视图,根据不同url在同一个视图切换内容模板。目的:点击sidebar切换在container中切换视图 入口页面 index.html 包含一个没名u...



AngularJS—学习 ui-router - 多个命名的视图

参考原文:https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views 可以给ui-view指定名称,这样一个模板中就可以有多个...

2、Angular-Ui Router 嵌套状态和嵌套视图

Methods for Nesting States嵌套状态的方法States can be nested within each other. There are several ways of n...


  • 2015年10月31日 12:08
  • 4.07MB
  • 下载


  • 2016年09月01日 17:09
  • 199KB
  • 下载

angular ui-router:简单的单页面嵌套路由的实现过程

写在前面: ui-router是angular的一个插件,因为angular前面几个版本自带的原生ng-router不能很好的满足开发需求,所以在实现angular单页面嵌套的时候,都是使用ui-r...
  • OBKoro1
  • OBKoro1
  • 2017年06月05日 00:42
  • 1996


  • 2016年03月24日 12:58
  • 245KB
  • 下载

angular 使用 ui-router 设计网页

  • fansongy
  • fansongy
  • 2015年03月09日 23:06
  • 48452
您举报文章:3、Angular-Ui Router 多个命名视图