javascript - 简单的用户界面路线，请解释

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 8 年前。

Improve this question

最近我才知道 ui-roues 比 ngRoutes 更强大、更有优势。所以我开始研究http://www.ng-newsletter.com/posts/angular-ui-router.html中的ui-routing功能。但是无法理解他们给出的示例，特别是 http://jsfiddle.net/jwebe0pe/9vH9Z/ 中的“多个命名 View ”。 ，因为他们使用 d3.js 给出了解释，我不知道。

1. 我请求你们给我一个简单的jsfiddle解释，关于如何实现多 View ui-route

2. 重要性是什么

$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作者:ui-router 团队
• source code那个例子
• 重要的 state.js 定义，有史以来最好的文档化代码之一
• 加上 wiki

在这里我创建了another example一些主布局引入了顶部、左侧、主要区域作为分离的多 View 。

布局状态定义如下:

.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',},
    },
  })

核心模板注入(inject)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 ，使用绝对 View 命名注入(inject)到该布局模板中:

• 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.

即状态定义部分:'top@index' : { templateUrl: 'tpl.top.html',},说:

• 注入(inject)tpl.top.html将模板导入名为 top 的 View
• 在名为的州内搜索该名称 index
• 这些信息在一起:顶部 + 索引 == 'top@index' View 名称

遵守plunker - 在非常简单的示例中查看实际情况...

EXTEND:对扩展问题进行更多解释

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

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

• 观看次数确实可以从 Scope Inheritance by View Hierarchy Only 中获利:

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

所以，父 Controller 可以提供一些解析器设置，它可以处理授权，它可以加载数据......简单地说，作为父 Controller ，它可以为子 Controller 做很多常见的事情，但它不能直接访问

• 它还可以使模板制作变得更容易。因为它的抽象父级将包含例如template.layout... children 可以使用相对的 View 命名。

所以，抽象是一个特征。功能与标准继承非常相似...