AngularJS路由系列(6)-- UI-Router的嵌套State

時間 2019-12-19

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

原文原文鏈接

本系列探尋AngularJS的路由機制，在WebStorm下開發。本篇主要涉及UI-Route的嵌套State。

假設一個主視圖上有兩個部分視圖，部分視圖1和部分視圖2，主視圖對應着一個state，兩個部分視圖分別對應state1和state2，那state與state1和state2造成了嵌套關係。html

AngularJS路由系列包括：

一、AngularJS路由系列(1)--基本路由配置
二、AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，獲取路由參數，路由的Resolve
三、AngularJS路由系列(3)-- UI-Router初體驗
四、AngularJS路由系列(4)-- UI-Router的$state服務、路由事件、獲取路由參數
五、AngularJS路由系列(5)-- UI-Router的路由約束、Resolve屬性、路由附加數據、路由進入退出事件
六、AngularJS路由系列(6)-- UI-Router的嵌套State

app

文件結構

- index.html
- app.js
- partial-about.html
- partial-home.html
- partial-home-list.html
- table-data.html               // 可複用的表格

ide

● index.htmlui

angular.js
angular-ui-router.min.js
app.js

<body ng-app="routerApp">
    <a ui-sref="#">AngularUI Router</a>
    <a ui-sref="home">Home</a>
    <a ui-sref="about">About</a>
    
    <!--第一級路由-->
    <div ui-view></div>
</body>

● app.jsurl

var routerApp = angular.module('routerApp',['ui.router']);
routerApp.config(function($stateProvider, $uilRouterProvider){
   $urlRouterProvider.otherwise('/home') ;
   
   $stateProvider
        .state('home',{
            url: '/home',
            templateUrl:'partial-home.html'
        })
        .state('about',{
            
        })
});

● partial-home.html

The Homey Page
This page demonstrates nested vies.spa

● partial-home.html，添加2個按鈕3d

The Homey Page
This page demonstrates nested vies.
<a ui-sref=".list">List</a>
<a ui-sref=".paragraph">Paragraph</a>

<!--第二級路由，嵌套在第一級路由中-->
<div ui-view></div>

● app.js,添加嵌套Statecode

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

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

    // home.paragraph符合慣例
    .state('home.paragraph', {
        url: '/paragraph',
        template: 'I could sure use a drink right now.'
    })

● partial-home-list.htmlorm

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

● partial-about.htmlrouter

The About Page
his page demonstrates multiple and named views

<!--第二級路由，嵌套在第一級路由中,但有各自的名稱-->
<div ui-view="columnOne"></div>
<div ui-view="columnTwo"></div>

● app.js,添加嵌套state,一個state有多個ng-view

$urlRouterProvider.otherwise('/home') ;

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

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

    // home.paragraph符合慣例
    .state('home.paragraph', {
        url: '/paragraph',
        template: 'I could sure use a drink right now.'
    })
    .state('about', {
            url: '/about',
            views: { //是指ng-view

                // 模板
                '': { templateUrl: 'partial-about.html' },

                // 名稱爲columnOne的ng-view,viewName@stateName
                'columnOne@about': { template: 'Look I am a column!' },

                // 名稱爲columnTow的ng-view,viewName@stateName
                'columnTwo@about': { 
                    templateUrl: 'table-data.html',
                    controller: 'SecondController'
                }
            }

        });
        
    routerApp.controller('SecondController', function($scope) {

        $scope.message = 'test';

        $scope.products = [
            {
                name: 'Macallan 12',
                price: 50
            },
            {
                name: 'Chivas Regal Royal Salute',
                price: 10000
            },
            {
                name: 'Glenfiddich 1937',
                price: 20000
            }
        ];

    });

● table-data.html

<h2>Fine Scotches</h2>

<table class="table table-hover table-striped table-bordered">
    <thead>
        <tr>
            <td>Name</td>
            <td>Cost</td>
        </tr>
    </thead>
    <tbody>
    
        <tr ng-repeat="product in products">
            <td>{{ product.name }}</td>
            <td>${{ product.price }}</td>
        </tr>
        
    </tbody>
</table>