Angularjs之ui-router的简单实用

1.介绍 ui-router

ui-router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是’机器状态’来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。

---

2. 做个简单的路由跳转：

引入js文件

 1. 我们需要引入AngularJS框架
 2.  我们需要引入ui-router框架. 

1.新建三个页面

1. Page1.html

<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

2. Page2.html

<div>
     <div>
         <h1>Page 2 content goes here...</h1>
     </div>
</div>

3. Page3.html

<div>
    <div>
        <h1>Page 3 content goes here...</h1>
    </div>
</div>

4.Home页面引用上面页面

<div ng-app='app'>
<div class="col-md-3" ng-controller="myCtrl">
        <h2>angular路由应用</h2>
        <div>
            <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
            <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
            <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
            <span style="width:100px" ui-sref=".About"><a href="">About.cshtml3</a></span>
        </div>
        <div>
            <div ui-view="" />
        </div>
    </div>
        </div>

实现效果如下：

---

以上是页面，下面是angular部分

1. 声明模块，并且注入ui.router服务

    var arM = angular.module('app', ['ui.router']);

2.在config中配置路由，注入stateProvider和urlRouterProvider服务

 arM.config(function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.when('', '/Page3.html');   //$urlRouterProvider初始化跳转的状态，首先想展示哪一个页面
        $stateProvider
            .state("Page1", {
                url: "/Page1",
                templateUrl: "/Page1.html",
            })
            .state("Page2", {
                url: "/Page2",
                templateUrl: "/Page2.html"
            })
            .state("Page3", {
                url: "/Page3",
                templateUrl: "/Page3.html"
            }).state("About", {
                url: "/aaaa/Page4111",
                templateUrl: "/Home/Contact"
            })
    });

单独把路由的部分拉出来解释，解释如下，1.2.3

1. state后面紧跟着的Page1 是对应上面html中ui-sref中名称
2. url中的字符串是显示在浏览器中的路由名称
   
3. templateUrl是访问的具体路径（文件放在那里的事实路径）

---

是专门用来存放跳转的页面，里面的嵌套会变成 ng-scope

<div ui-view="" /> 

参考文档：https://www.oschina.net/translate/angularjs-ui-router-nested-routes?print