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>
           

1. Page2.html

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

1. 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="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Page-1</a></span>
            <span style="width:100px" ui-sref=".Page2"><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Page-2</a></span>
            <span style="width:100px" ui-sref=".Page3"><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Page-3</a></span>
            <span style="width:100px" ui-sref=".About"><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >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