关闭

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

1364人阅读 评论(0) 收藏 举报
分类:


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:
您可以为您的视图命名,以便您可以在每个模板中拥有多个ui-view。假设您有一个需要动态填充图形的应用程序状态,其中一些表数据和过滤器如下所示:

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

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

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

Example - Name Matching
例子 - 名称匹配

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

<!-- index.html -->		
<body>		
  <div ui-view="filters"></div>		
  <div ui-view="tabledata"></div>		
  <div ui-view="graph"></div>		
</body>		
$stateProvider		
  .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)。

$stateProvider		
  .state('report',{		
    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:
例如,前面的例子也可以写成:

  .state('report',{		
    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>		
</body>		
<!-- 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:

$stateProvider		
  .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 :).
您可以看到,这种能力不仅可以在同一个状态下设置多个视图,而且可以成为开发人员的一个走迷宫的游乐场。

0
0
查看评论

Vue 命名视图是个啥?

除了命名路由外,还有一种配置路由的方式,叫命名视图。命名试图是个啥?就是在单个路由可以定义多个命名组件上例子路由这样配置const nav = { template: '<div>我是导航栏</div>' } const sidebar = { templat...
  • cofecode
  • cofecode
  • 2017-07-08 11:28
  • 1191

vue-router -- 命名路由和命名视图

说明:vue-router的几个文章中例子是连贯的,因此对哪块有疑问请翻阅按发表时间排序的其他文章。 一、概述 给路由定义不同的名字,根据名字进行匹配 给不同的router-view定义名字,router-link通过名字进行对应组件的渲染。 二、代码展示: 目录视图 1、命名路由 2、命...
  • weixin_31765427
  • weixin_31765427
  • 2017-09-07 15:58
  • 1886

学习 ui-router (三):多个命名的视图

转自:http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/ 参考原文:https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Vie...
  • zhang_Red
  • zhang_Red
  • 2017-05-19 15:33
  • 543

AngularJS UI Router(ui.router)嵌套视图(Nested Views)

ui.router嵌套视图示例
  • xiaofanku
  • xiaofanku
  • 2016-03-21 14:17
  • 3253

1、Angular-Ui Router 状态概要

状态管理器.新的状态管理器($stateProvider) 类似于Angular's v1 的路由工作方式, 但更完美.A state corresponds to a "place" in the application in terms of the overall ...
  • ioriliao
  • ioriliao
  • 2017-07-20 11:32
  • 1652

Angular-Ui-Router

Angular-ui-router
  • u011468626
  • u011468626
  • 2016-03-14 14:15
  • 3352

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

Methods for Nesting States嵌套状态的方法States can be nested within each other. There are several ways of nesting states:状态可以相互嵌套,嵌套状态有几种方法:Using 'dot no...
  • ioriliao
  • ioriliao
  • 2017-07-20 18:03
  • 1491

十六. Sql server表格,索引,视图的命名规范

在实际数据库的操作中,有许多人可能会忽略表格的命名规范,认为这是无关紧要的。如果有这样想法的同学,我希望能尽快更正。因为良好的表格命名规范,不仅能在以后工作中为你带来更大的便捷,而且还会影响到你今后的求职之路。在很多企业面试中,假如你的数据库有一个很规范的命名,可能会让你得到一份理想的工作。   ...
  • kiqiNie
  • kiqiNie
  • 2012-11-01 10:05
  • 4971

深究AngularJS——ui-router详解

1.配置使用ui-router1.导入js文件需要注意的是:必须导入angular.min.js这个文件,且angular.min.js必须导入在angular-ui-router.min.js前面。<script type="text/javascript" src=&q...
  • zcl_love_wx
  • zcl_love_wx
  • 2016-07-26 13:45
  • 25524

angularjs 关于ui-router分层使用

最近感觉有很多学angular 的童鞋在路由问题中还不清楚怎么使用。其实我之前也是一直晕晕的不懂怎么用,现在要好得多了。在这里就记录下ui-router使用。 就已目前做的这个项目来介绍下怎么使用吧。Note:最好是按照层次规则来设置路由名,好处是容易看懂,也便于管理。 我这里是以总state到...
  • u012138137
  • u012138137
  • 2016-03-04 17:04
  • 1278
    个人资料
    • 访问:324984次
    • 积分:3292
    • 等级:
    • 排名:第12201名
    • 原创:86篇
    • 转载:10篇
    • 译文:5篇
    • 评论:159条
    文章分类
    最新评论