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

最近，我开始知道ui roues比ngRoutes强大得多，也更具优势。所以我开始从

http://www.ng-newsletter.com/posts/angular-ui-router.html

。但无法理解他们给出的示例，尤其是

http://jsfiddle.net/jwebe0pe/9vH9Z/

，因为他们使用d3.js给出了解释，我不知道

这里我请求你们，给我一个简单的JSFIDLE解释，关于如何实现多视图ui路由

这项工作的重要性是什么

$stateProvider.state（'admin'）{
摘要：没错，
url:“/admin”，
模板：“”
}).state（'管理索引'{
url:“/index”，
模板：“管理索引”
}).state（'管理员用户'{
url:“/users”，
模板：“
…
”
});

admin、admin.index和admin.users，以及何时使用

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

请澄清以上几点

---

希望你们能帮助我。

您所能做的就是浏览以下内容中提到的所有链接：

• 用户界面路由器团队
• 关于那个例子
• 和基本定义，有史以来最好的文档化代码之一
• 加上

在这里，我创建了一些主布局，将顶部、左侧和主要区域作为独立的多视图

该布局状态将定义为：

.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元素

的核心模板：

//在这上面
//离开这里
//这里主要

因此我们可以看到，一个状态（

'index'

以上）有一个主视图（布局）和其他视图，使用绝对视图命名注入该布局模板：

• （引用：）

在幕后，每个视图都会被分配一个绝对名称，该名称遵循

viewname@statename

，其中viewname是view指令中使用的名称，state name是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称

即国家定义的一部分：

'top@index“：{templateUrl:'tpl.top.html'，}，

说：

• 将

  tpl.top.html

  模板注入名为

  top

• 在名为

  索引的状态中搜索该名称

• 这些信息放在一起：top+索引==

  'top@index“

  视图名称

在非常简单的示例中，观察-以查看实际情况

延伸：对延伸的问题作更多的解释

什么是抽象状态？即标记为

摘要：true的状态

与任何其他语言（C#，Java）一样，它是一种标准状态，无法直接实例化。它始终是一种父级状态，用于处理一些基本功能。即：


这些观点确实得益于：

请记住，如果您的状态视图是嵌套的，则范围属性仅继承状态链。范围属性的继承与状态的嵌套无关，而与视图（模板）的嵌套有关

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

因此，父控制器可以提供一些解析器设置，它可以处理授权，它可以加载数据。。。简单地说，作为父母，它可以为孩子们做很多普通的事情，而不能直接接触到它


它还可以使模板制作更容易。因为抽象父级将包含例如模板布局。。。孩子们可以使用实时视图命名

所以，抽象是一个特征。功能非常类似于标准的不真实…
谢谢你的回答，看起来你已经给出了所有的步骤/链接，这将有助于理解主题，谢谢你，已经修改了我的问题，你能不能再看一次，再帮我一点，标记你的答案，现在：）有两个主要的抽象点：父实现，如C#、Java。。。使用相对命名简化视图嵌套。但可以肯定的是，仔细检查我给你的所有资源。去做吧。然后观察例子并玩。。。您将永远不会离开
ui路由器
.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',},
    },
  })

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