Question

我最近知道，ui-roues比ngRoutes强大而有利。所以我坐下来研究http://www.ng-newsletter.com/posts/angular-ui-router.html的ui-routing特征。 BUt无法用他们在http://jsfiddle.net/jwebe0pe/9vH9Z/中给出的“多个命名视图”中给出的示例，因为他们使用d3.js给出了解释，我不知道。

我在这里要求你们，给我一个简单的jsfiddle解释，关于如何实现多视图ui-route

$stateProvider.state('admin', {
        abstract: true,
        url: '/admin',
        template: '<div ui-view></div>'
      }).state('admin.index', {
        url: '/index',
        template: 'Admin index'
      }).state('admin.users', {
        url: '/users',
        template: '<ul>...</ul>'
      });

admin，admin.index和admin.users，在上面的代码中以及何时使用。

3无法理解摘要：真/假概念。

请在上述几点澄清我。

希望你们能帮帮我。

Answer 1

您可以做的最好的事情是浏览此Q&A中提到的所有链接：

example app

source code
和必要的state.js定义，是有史以来最好的文档代码之一
加上wiki

在这里，我使用一些主布局创建了another example，将TOP，LEFT，MAIN区域作为分开的多视图。

布局状态将定义为：

.state('index', {
    url: '/',
    views: {
      '@' : {
        templateUrl: 'layout.html',
        controller: 'IndexCtrl'
      },
      'top@index' : { templateUrl: 'tpl.top.html',},
      'left@index' : { templateUrl: 'tpl.left.html',},
      'main@index' : { templateUrl: 'tpl.main.html',},
    },
  })

核心模板注入 index.html 元素<div ui-view></div>：

<div>
  <section class="top">
    <div ui-view="top"></div> // TOP here
  </section>

  <section class="middle">

    <section class="left">
      <div ui-view="left"></div> // LEFT here
    </section>

    <section class="main">
      <div ui-view="main"></div> // MAIN here
    </section>

  </section>
</div>

所以我们可以看到，一个状态（上面'index'）有一个主视图（布局）以及其他视图，使用绝对视图命名注入到该布局模板中：

View Names - Relative vs. Absolute Names （引用:)

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

即。州定义的一部分：'top@index' : { templateUrl: 'tpl.top.html',},说：

将tpl.top.html模板注入名为 top
在名为 index
这些信息：top + index == 'top@index' 查看名称

观察plunker - 在非常简单的示例中看到实际情况......

EXTEND：对扩展问题提供更多解释

什么是抽象状态？即标记为abstract: true ...

的州

与任何其他语言（C＃，Java）一样，它是一个标准状态，无法实例化，直接达到。它始终是 parent 状态，旨在处理一些基本功能。即：

观看点从Scope Inheritance by View Hierarchy Only获利：

请记住，只有嵌套状态的视图时，范围属性才会继承状态链。范围属性的继承与状态的嵌套以及与视图（模板）的嵌套有关的所有内容都无关。

完全有可能您有嵌套状态，其模板在您网站中的各种非嵌套位置填充ui-views。在这种情况下，您不能期望在子状态视图中访问父状态视图的范围变量。

所以，父控制器可以提供一些解析器设置，它可以处理授权，它可以加载数据......简单来说，作为父级，它可以为孩子做很多常见的东西，而不能直接到达

它还可以使模板更容易。因为抽象的父母会包含例如template.layout ...孩子们可以使用实际视图命名。

因此，摘要是一个特征。特征非常类似于标准的无效......

简单的ui路线，请解释

1 个答案: