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

本系列探寻AngularJS的路由机制，在WebStorm下开发。本篇主要涉及UI-Route的嵌套State。

假设一个主视图上有两个部分视图，部分视图1和部分视图2，主视图对应着一个state，两个部分视图分别对应state1和state2，那state与state1和state2形成了嵌套关系。

AngularJS路由系列包括：

1、AngularJS路由系列(1)--基本路由配置
2、AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve
3、AngularJS路由系列(3)-- UI-Router初体验
4、AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
5、AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
6、AngularJS路由系列(6)-- UI-Router的嵌套State

文件结构

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

● index.html

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.js

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.

● partial-home.html，添加2个按钮

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,添加嵌套State

$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.html

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

● partial-about.html

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>

AngularJS路由系列，结束☺