简单的UI-路线，请解释 [英] simple ui-routes, explanation please

问题描述

我才知道，UI的ROUES得多强大和优势比ngRoutes最近。所以我satrted studiing从 http://www.ng-newsletter.com/posts/angular-ui-router.html 的UI路由功能。但不能undersatnd withh他们 http://jsfiddle.net/jwebe0pe/9vH9Z/ 给予特别是从多命名视图的例子，他们给出的解释使用d3.js，这我就不知道了。

1. 我在这里请求你们，给我一个简单的jsfiddle explantion，有关如何实现多视图界面路由




2. 什么是的重要性

  $ stateProvider.state（'管理员'，{
        摘要：真实，
        网址：'/管理员'，
        模板：'＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;'
      }）。状态（'admin.index'，{
        网址：'/索引，
        模板：管理索引
      }）。状态（'admin.users'，{
        网址：'/用户，
        模板：'＆LT; UL＆GT; ...＆LT; / UL＆GT;'
      }）;
 

管理员，admin.index和admin.users，在code以上时将被使用。

3不能能理解摘要：真/假概念

请澄清我在上面点。

希望你们能帮我。

解决方案

你能做的最好的是去通过本的 Q＆安培; A ：

• 通过UI路由器队示例应用程序


• 源$ C ​​$ C这个例子<的 / LI>
  
• 和基本 state.js 定义，最好的证明codeS的人曾经


• 加上维基

在这里，我创建另一个例子一些总纲发展蓝图介绍顶部，左侧的，主要领域separted多视图。

这是布局的状态将被定义为这样的：

  .STATE（'指数'，{
    网址：'/'，
    观点：{
      '@'：{
        templateUrl：'的layout.html'，
        控制器：'IndexCtrl
      }，
      顶@指数：{templateUrl：tpl.top.html'，}，
      左@指数：{templateUrl：tpl.left.html'，}，
      主@指数：{templateUrl：tpl.main.html'，}，
    }，
  }）
 

注入核心模板的 index.html的元素＆LT;格UI的视图＆gt;＆LT; / DIV＆GT; ：

 ＆LT; D​​IV＆GT;
  ＆lt;节类=顶＆GT;
    ＆LT;格UI视图=顶＆GT;＆LT; / DIV＆GT; //这里TOP
  ＆LT; /节＆gt;  ＆lt;节类=中间＆GT;    ＆lt;节类=左＆GT;
      ＆LT;格UI视图=左＆GT;＆LT; / DIV＆GT; //离开这里
    ＆LT; /节＆gt;    ＆lt;节类=主＆GT;
      ＆LT;格UI视图=主＆GT;＆LT; / DIV＆GT; //这里主要
    ＆LT; /节＆gt;  ＆LT; /节＆gt;
＆LT; / DIV＆GT;
 

所以，我们可以看到，一个国家的（索引以上）的有一个主视图（布局）以及其他意见，注入成布局模板，使用绝对视图命名：

• 视图名称 - 相对与绝对名称的（引用：）的

  

在幕后，每一个观点被分配遵循的方案绝对名称 视图名@ Statename的 ，其中视图名是所使用的名称view指令和国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称。

即。状态定义的一部分：'顶@指数：{templateUrl：tpl.top.html'，} 说：

• 注射 tpl.top.html 模板到名为视图 顶


• 搜索一个国家内部的名字命名的 首页


• 这些信息一起：顶部+指数== '顶@指数 视图名称

观察 plunker - 地看到，在行动中...很简单的例子....

扩展：给予一些解释扩展的问题。

什么是抽象状态？即状态标记为摘要：真正 ...

像任何其他languague（C＃，Java的）它是一个标准的状态，这是不能被实例化，直接到达。它始终是一个 父 状态，用于处理一些基本的功能。即：

• 的意见做利润<一个href=\"https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#scope-inheritance-by-view-hierarchy-only\"相对=nofollow>通过视图层次范围继承只有：

  记

记住，如果你的国家的意见是嵌套作用域属性只继承下来的状态链。作用域属性的继承无关，与你的国家的嵌套和一切与你的视图（模板）的嵌套。

  
  

这是完全可能的，你嵌套状态的模板填充在站点内的各种非嵌套位置UI的意见。在这种情况下，你不能指望子女国的意见内访问的父状态视图的范围变量。

这样，在父控制器可与一些分解器设置提供，它可以处理授权，它可以装载数据...简单地说，作为父母，它可以为儿童做很多共同的东西，而它不能直接到达

• 它也可以使模板化更容易。因为它的抽象父就如containt template.layout ......孩子们可以使用realtive视图命名。

因此，抽象是一种功能。功能非常类似于标准inehritance ...

I came to know that ui-roues are much powerful and advantageous than ngRoutes, recently. So I satrted studiing the ui-routing feature from http://www.ng-newsletter.com/posts/angular-ui-router.html . BUt could not undersatnd withh the examples they have given especially from "Multiple named views" in http://jsfiddle.net/jwebe0pe/9vH9Z/, as they have given the explanation using d3.js, which I do not know.

1. I request here you guys, to give me a simple jsfiddle explantion, about how to implement Multiple view ui-route

2. What is the importance of

$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 and admin.users, in the code above and when will be used.

3 Could not able to understand the abstract: true/false concept.

Please clarify me in the above points.

Hope you guys help me.

解决方案

The best you could do is to go through all the links mentioned in this Q&A:

• example app by ui-router team
• source code of that example
• and essential state.js definition, one of the best documented codes ever
• plus the wiki

Here I created another example with some master layout introducing TOP, LEFT, MAIN areas as separted multi-views.

That Layout state would be defined as this:

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

the core template injected into index.html element <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>

So we can see, that one state ('index' above) has one master view (layout) and also other views, injected into that layout template, using the absolute view naming:

• View Names - Relative vs. Absolute Names (cite:)

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.

I.e. the part of state definition: 'top@index' : { templateUrl: 'tpl.top.html',}, says:

• inject tpl.top.html template into the view named top
• search for that name inside of a state named index
• these information together: top + index == 'top@index' view name

Observe the plunker - to see that in action...in very simplified example....

EXTEND: to give some more explanation to the extended question

What is abstract state? I.e state marked as abstract: true...

Like in any other languague (C#, Java) it is a standard state, which cannot be instantiated, reached directly. It is always a parent state, intended to handle some basic functionality. Namely:

• views do profit from 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.

so, the parent controller can be provided with some resolver settings, it can handle authorization, it can load data... Simply, as a parent, it can do lot of common stuff for children, while it cannot be reached directly

• it also can make templating easier. because it the abstract parent would containt e.g. template.layout... children can use realtive view naming.

So, abstract is a feature. Feature very similar to standard inehritance...

这篇关于简单的UI-路线，请解释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！