AngularJS 的嵌套路由 UI-Router

時間 2019-11-16

標籤 angularjs 嵌套路由 router 欄目 AngularJS 简体版

原文原文鏈接

AngularJS 的嵌套路由 UI-Router

本篇文章翻譯自：https://scotch.io/tutorials/angular-routing-using-ui-routercss

演示網站請查看：http://embed.plnkr.co/IzimSVsstarlFviAm7S7/previewhtml

源碼：http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=previewgit

下面是我本身作的demo。比上面的例子要簡單一點。angularjs

github DEMO地址以下：https://github.com/roverliang/UI-Router-DEMOgithub

受本人英語水平限制，因此只能簡要翻譯，英語水平比較好的能夠直接查看原文。ajax

AngularJs的指令集是一個很是好的方式用來構建單頁的網頁應用。當建立一個單頁應用的時候，路由的重要性就凸顯出來。咱們但願咱們的導航欄就如同普通的網站同樣，點擊後沒有刷新，那麼咱們可使用Angular的路由——ngRouter 方法。bootstrap

可是，如今咱們將注意力放在另一個好用的方法上——UI-Router.app

概覽

Angular 的Router 是什麼？

UI-Router 是Angular 團隊建立的一個路由框架。他的指令和Angular的ngRoute方法很接近。它經過改變應用中視圖的狀態（State），而不是像ngRoute那樣經過改變當前應用的url來實現。框架

狀態（STATES）與 URL 路由的異同。

使用這種方法，你的視圖和路由不是綁定在一塊兒的。你能夠改變你的站點的某些部分，而你的url而不用也跟着變化。當使用ngRoute，你必須使用nginclude或者其餘的方法，這可能會致使混淆。如今你全部的狀態（state）、路由（route）以及視圖（view）
你將所有接管，使用config()方法，這將建立一個自上而下（等會解釋）的應用。dom

作一個示例

下面讓咱們作一個UI-Route的教程。這將建立一個Home和About頁面。

開始

讓咱們開始書寫咱們的應用，咱們須要一些文件。

- index.html                // will hold the main template for our app
- app.js                    // our angular code
- partial-about.html        // about page code
- partial-home.html         // home page code
- partial-home-list.html    // injected into the home page
- table-data.html          // re-usable table that we can place anywhere

咱們的應用框架已經搭建完畢，那就讓咱們按照框架的結構填充代碼吧。

<!-- index.html -->
    
    <!DOCTYPE html>
    <html>
    <head>
        <!-- CSS (load bootstrap) -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <style>
        .navbar { border-radius:0; }
        </style>
        
        <!-- JS (load angular, ui-router, and our custom js file) -->
        <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
        <script src="app.js"></script>
    </head>
    
    <!-- apply our angular app to our site -->
    <body ng-app="routerApp">
    
        <!-- NAVIGATION -->
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a ui-sref="home">Home</a></li>
                <li><a ui-sref="about">About</a></li>
            </ul>
        </nav>
        
        <!-- MAIN CONTENT -->
        <div class="container">
        
            <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
            <div ui-view></div>
        
        </div>
    
    </body>
    </html>

上面事咱們首頁的html文件，咱們將引用BootStrap來傍午咱們構建樣式。值得注意的是必須在引用AngularJS以後引用ui-router。UI Router是AngularJS的核心組成部分，就像ngRoute同樣。

當咱們使用UI-Router建立一個連接的時候，你將會使用ui-sref。這些在你的app.js將狀態會轉化成一個連接。

同理咱們將使用

來代替 ngRoute 的

讓咱們繼續構建咱們的app.js吧。

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

routerApp.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/home');
    
    $stateProvider
        
        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })
        
        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            // we'll get to this in a bit       
        });
        
});

咱們已經建立了咱們的RouteAPP。咱們將body放置在index.html中，在這個頁面中，咱們有一個home選項和about選項。咱們將使用partial-home.html做爲模板文件。讓咱們在partial-home.html中填充些代碼吧。

<!-- partial-home.html -->

<div class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>    
</div>

截止如今咱們已經擁有了咱們的站點，雖然咱們尚未敲多少代碼，可是咱們的確擁有了它。

上面一些無聊的構建文件的階段已通過去，下面讓咱們看下爲何UI-Router會產生那麼酷炫的效果。

嵌套視圖

接下來看看如何構建咱們的應用。首先咱們將在首頁添加兩個button。其次將根據用戶點擊不一樣的button切換不一樣的頁面。

咱們將兩個button添加到partial-home.html ，而後思考如何才能進行頁面切換。

<!-- partial-home.html -->

<div class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</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>

當咱們連接到一個嵌套視圖。咱們將使用點（dot）：ui-sref=".list"和ui-sref=".paragraph"。咱們將在這個文件中定義他們，定義後會被注入（inject）到咱們的新的視圖區

如今切換到咱們app.js，讓咱們建立剩下的嵌套狀態（states）

// app.js
...

$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('home', {
        url: '/home',
        templateUrl: 'partial-home.html'
    })

    // nested list with custom controller
    .state('home.list', {
        url: '/list',
        templateUrl: 'partial-home-list.html',
        controller: function($scope) {
            $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
        }
    })

    // nested list with just some random string data
    .state('home.paragraph', {
        url: '/paragraph',
        template: 'I could sure use a drink right now.'
    })

...

如今 ui-sref 被定義在home.html中，標註一個狀態。隨着home.list和home.paragraph頁面建立。這些連接所對應的模板將會被註冊到ui-view中。

咱們最後一件事要作的是partial-home-list.html文件定義。此外還建立了一個控制器，咱們將在模板中使用這些數據（dogs對象）。

<!-- partial-home-list.html -->

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

如今咱們列表，它會將數據（dogs對象）注入到模板。若是咱們點擊Paragraph，它會將字符串注入頁面中。

如今你應該發現了在咱們的狀態上切換不一樣的部分是多麼的簡單。咱們並無使用ngInclude、ngShow，ngHide。或者ngIf。這保持咱們的app.js是足夠的簡單。

在About下添加更多頁面

一個有多個視圖的應用程序會更增強大。也許你的網站上還有側邊欄，上面有熱門職位、最近的帖子、用戶什麼之類的。這些均可以被分離出來，而且注入咱們的模板。而且能夠爲每個模板使用是一個控制器，這將充分保持咱們應用程序的乾淨。

對於咱們的About頁，讓咱們作一個雙欄，並有各自的數據。咱們將先處理視圖，而後再看看咱們如何使用用戶界面的路由器。

<!-- partial-about.html -->

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    <p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
</div>

<div class="row">

    <!-- COLUMN ONE NAMED VIEW -->
    <div class="col-sm-6">
        <div ui-view="columnOne"></div>
    </div>
    
    <!-- COLUMN TWO NAMED VIEW -->
    <div class="col-sm-6">
        <div ui-view="columnTwo"></div>
    </div>

</div>

這裏會有更多的頁面，一個是columnOne，一個是columnTwo.

爲何有人會使用這種方法？這是一個很好的問題。是咱們建立一個應用程序太模塊化，這可能會讓人困惑？從官方的UI路由器文檔，這裏是一個堅實的例子，爲何你會有多個命名視圖。在他們的例子中，他們展現了一個應用程序的不一樣部分。每一部分都有本身的數據，因此每一部分都有本身的控制器和模板文件，使得構建相似這樣的東西很容易。

如今咱們全部的視圖已經建立完畢，讓咱們回到app.js

// app.js

...

    .state('about', {
        url: '/about',
        views: {

            // the main template will be placed here (relatively named)
            '': { templateUrl: 'partial-about.html' },

            // the child views will be defined here (absolutely named)
            'columnOne@about': { template: 'Look I am a column!' },

            // for column two, we'll define a separate controller 
            'columnTwo@about': { 
                templateUrl: 'table-data.html',
                controller: 'scotchController'
            }
        }
        
    });

}); // closes $routerApp.config()


// let's define the scotch controller that we call up in the about state
routerApp.controller('scotchController', function($scope) {
    
    $scope.message = 'test';
   
    $scope.scotches = [
        {
            name: 'Macallan 12',
            price: 50
        },
        {
            name: 'Chivas Regal Royal Salute',
            price: 10000
        },
        {
            name: 'Glenfiddich 1937',
            price: 20000
        }
    ];
    
});

...

整個流程就是這樣。完整的文章請查看https://scotch.io/tutorials/angular-routing-using-ui-router#sample-application

演示網站請查看：http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview

源碼：http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview

。

下面是我本身作的demo。比上面的例子要簡單一點。

github DEMO地址以下：https://github.com/roverliang/UI-Router-DEMO

應用目錄以下。