AngularJS之中級Route【二】（七）

時間 2019-11-08

原文原文鏈接

前言

上一篇咱們介紹了AngularJS內置的路由ngRoute，咱們知道AngularJS被普遍應用於單頁應用SPA（Single Page Application）中，此時路由對於咱們來說很是重要，對於內置的路由（也不能說內置，只能說在VS中默認下載的路由包是ngRoute），可是咱們應該明顯的知道他的不足，例如上一篇所演示，當咱們經過路由導航到另一個頁面，此時若咱們刷新頁面，此時則會存在找不到頁面的狀況，此時急需咱們再找一種替代方法。這就是咱們本節要講的話題【ui.router】。html

ui.router

說到這裏，咱們有必要介紹一下什麼是ui.router，此UI-Router是由AngularUI團隊爲AngularJS構建的路由框架，它提供的改變應用視圖是基於應用的狀態與ngRoute路由映射不一樣，同時不單單是映射URL，相比較ngRoute，更靈活，更具擴展性。在基於ui.router的路由，咱們的視圖和路由不須要和URL牢牢綁定一塊兒，咱們能夠在不改變URL的狀況下經過ui.router來改變網站所須要呈現的內容。由於ui.router是基於路由和狀態，因此一樣也如ngRoute在config中進行配置。app

下面咱們一步步來構建如何使用ui.router，關於加入對應腳本什麼的基礎就再也不廢話。框架

Index.html

<body ng-app="routerApp">
    <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" ui-sref="home">AnglarUi Router</a>
            <ul class="nav">
                <li><a ui-sref="home">Home</a></li>
                <li><a ui-sref="about">About</a></li>
            </ul>
        </div>
    </div>
    <div class="container">

        <div ui-view></div>

    </div>
</body>

在ui.router中，咱們用 ui-sref 來建立一個超連接，它會自動生成導向對應應用的狀態，用 ui-view 來代替ngRoute中的ng-view。ide

app.js

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

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider 
    .state('home', {
        url: '/home',
        templateUrl: 'partial-home.html'
    }) 
});

或者

    
var routeApp = angular.module('routerApp', ['ui.router']);

routeApp.config(config);

function config($stateProvider,$urlRouterProvider){
    
    $urlRouterProvider.otherwise("/home");
    
    $stateProvider.state("home",{
        url:"/home",
        templateUrl:"partial-home.html"
    }).state("about",{

    });
}

partial-home.html

<div class="jumbotron text-center">
    <h1>The Home Page</h1>
    <p>此頁面用來演示 <span class="text-danger">嵌套</span> 視圖.</p>
</div>

此時咱們看看基本效果：網站

接下來咱們開始進一步深刻，咱們開始嵌套視圖頁面。ui

在Home嵌套視圖

此時將partial-home.html修改爲以下，下面用顏色標記添加的部分。url

<div class="jumbotron text-center">
    <h1>The Home Page</h1>
    <p>此頁面用來演示 <span class="text-danger">嵌套</span> 視圖.</p>
    <a ui-sref=".list" class="btn btn-primary">List</a>
    <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
<div ui-view></div>

咱們經過上述.list和.paragraph連接在下面ui-view中繼續呈現視圖，此時咱們再在app.js狀態中進行添加腳本。spa

.state('home.list', {
        url: '/list',
        templateUrl: 'partial-home-list.html',
        controller: function($scope) {
            $scope.dogs = ['普通狗', '哈士奇', '金毛'];
        }
    })
    .state('home.paragraph', {
        url: '/paragraph',
        template: '你點擊了paragraph'
    })
});

上述咱們定義連接到partial-home-list.html模板，此時爲以下代碼：code

<ul>
    <li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>

咱們再來看下效果：router

在About呈現多視圖

多視圖想必咱們用的地方也是更多，好比在博客園中，將最近新聞單獨放在一個頁面中並最終注入到母版中，每個頁面都有其控制器以及模板，這樣能保證咱們的一個頁面總體乾淨而不至於內容太多而顯得很是臃腫，

partail-about.html

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    <p>此頁面用來演示 <span class="text-danger">多</span> 以及 <span class="text-danger">命名的</span> 視圖.</p>
</div>

<div class="row">
    <div class="col-sm-6">
        <div ui-view="columnOne"></div>
    </div>
    
    <div class="col-sm-6">
        <div ui-view="columnTwo"></div>
    </div>

</div>

在此頁面中有多個視圖，一個是命名爲columnOne的視圖，另外一個則是columnTwo視圖。此時在app.js繼續添加導向到此頁面的狀態。

    .state('about', {
        url: '/about',
        views: {
            '': { templateUrl: 'partial-about.html' },
            'columnOne@about': { template: '我是columnOne!' },
            'columnTwo@about': { 
                templateUrl: 'table-data.html',
                controller: 'scotchController'
             }
        }
        
    });

columnOne@about 和 columnTwo@about 在這裏要說明一下，這裏涉及到視圖的相對命名和絕對命名，對於這個框架中的viewName@stateName，由於咱們的主視圖在咱們的about狀態中，此時就視圖名稱就演變成了columnOne@about。

以及如上scotchController對應渲染的數據：

routerApp.controller('scotchController', function($scope) {
    
    $scope.message = '品牌';
    
    $scope.product = [
    {
        name: '西遇',
        price: 50
    },
    {
        name: 'Only',
        price: 10000
    },
    {
        name: '傑克瓊斯',
        price: 20000
    }
    ];
    
});

模板頁table-data.html

<div style="font-weight: bolder;font-size: x-large;">{{message}}</div>
<table class="table table-hover">
    <thead>
        <tr>
            <th>名稱</th>
            <th>價格</th>
        </tr>
    </thead>
    <tbody>     
            <tr ng-repeat="p in product">
                <td>{{p.name}}</td>
                <td>{{p.price}}</td>
            </tr>
    </tbody>
</table>