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

发布时间：2020-12-17 09:05:31 所属栏目：安全来源：网络整理

导读：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: 您可以为您的视图命名，

You can name your views so that you can have more than oneui-viewper 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:
您可以为您的视图命名，以便您可以在每个模板中拥有多个ui-view。假设您有一个需要动态填充图形的应用程序状态，其中一些表数据和过滤器如下所示:

When setting multiple views,you need to use theviewsproperty on the state object.viewsis an object.
在设置多个视图时，需要在state对象上使用views属性。views是一个对象。

Views override state's template properties
views属性会覆盖状态的template属性

If you define aviewsobject,your state'stemplateUrl,templateandtemplateProviderwill 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.
如果您定义了一个views属性，那么您的状态的templateUrl、template和templateProvider将被忽略。因此，在需要这些views的父布局的情况下，您可以定义包含模板的抽象状态，以及包含“views”对象的布局状态下的子状态。

Example - Name Matching
例子 - 名称匹配

The property keys onviewsshould match your view names,like so:
views中的属性应该与您的视图名称匹配，例如:

<!-- index.html -->		
<body>		
  <div ui-view="filters"></div>		
  <"tabledata"></"graph"></div>		
</body>

$stateProvider .state('report',{ views: { 'filters': { ... templates and/or controllers ... },'tabledata': {},98);">'graph'Then each view inviewscan set up its own templates (template,0.05); border-radius: 3px;">templateProvider) and controllers (controller,0.05); border-radius: 3px;">controllerProvider).
然后，views中的每个视图都可以设置自己的模板(template,templateUrl,templateProvider)和控制器(controller,controllerProvider)。

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

View Names - Relative vs. Absolute Names
视图名称-相对与绝对名称

Behind the scenes,every view gets assigned an absolute name that follows a scheme ofviewname@statename,whereviewnameis 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:
例如，前面的例子也可以写成:

  .'filters@': { },98);">'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>		
<ui-view></div> <!-- contacts.html plugs in here -->		
<"status"></body>		 

<!-- contacts.html -->		
<h1>My Contacts</h1>		
<div>		
<"detail"></div>		 

<!-- contacts.detail.html -->		
<h1>Contacts Details</"info"></div>		 

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

'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'   		
  })		
  .'contacts.detail',73);">: {		
        ////////////////////////////////////		
        // 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,125);">// <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.		
        "detail@contacts" // Absolutely targets the unnamed view in parent 'contacts' state.		
        "@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 :).您可以看到，这种能力不仅可以在同一个状态下设置多个视图，而且可以成为开发人员的一个走迷宫的游乐场。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

Views override state's template propertiesviews属性会覆盖状态的template属性

Example - Name Matching例子 - 名称匹配

View Names - Relative vs. Absolute Names视图名称-相对与绝对名称

Views override state's template properties
views属性会覆盖状态的template属性

Example - Name Matching
例子 - 名称匹配

View Names - Relative vs. Absolute Names
视图名称-相对与绝对名称