本系列探寻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路由系列，结束☺

AngularJS路由系列(6)-- UI-Router的嵌套State的更多相关文章

  1. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  2. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  3. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

  4. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  5. AngularJS路由系列(1)--基本路由配置

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...

  6. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  7. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  8. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  9. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

随机推荐

  1. nginx_upstream_check_module监控后端服务器http

    nginx_upstream_check_module 是专门提供负载均衡器内节点的健康检查的外部模块,由淘宝的姚伟斌大神开发,通过它可以用来检测后端 realserver 的健康状态.如果后端 re ...

  2. ssh命令集锦

    [前提] ssh命令其实平时工作会比较少能够用到(因为直接用远程客户端来连接) 但是偶尔还是需要利用ssh临时的连接到某个服务器,所以当遇到的时候来总结一下 [集锦] 一.ssh以某个用户名连接到某个 ...

  3. python3 pandas DataFrame常见用法

    df = pandas.read_clipboard() df 获取索引和值 df.index df.values DataFrame的values属性将数据以二维ndarray形式返回,dtype类 ...

  4. 洛谷P1886 滑动窗口

    传送门啦 以最大值为例,既然我们想要保证队列开头为答案,那么我们就要保证每次更新使最大值一直放在队列.那么如果存储的最大值该弹出了怎么办呢?我们只需要记录下每个元素的位置,判断是否在区间内即可. 队头 ...

  5. MySQL的架构模型

    看到大牛用户DB架构部的Keithlan<数据库性能优化之查询优化>,在学习过程发现很多不错的东西,就把它保存下来,分享给大家,因为作者说了一句很经典的话:“if you want to ...

  6. 4.自定义数据《jquery实战》

    4.4 元素中的存储自定义数据 data([key],[value]) 在元素上存放数据,返回jQuery对象. key (String) 存储的数据名. key,value (String,Any) ...

  7. js ES6 Set和Map数据结构详解

    这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下   本 ...

  8. .NetCore下使用Prometheus实现系统监控和警报 （一）介绍【译】

    [译]原文https://prometheus.io/docs/introduction/overview 什么是Prometheus? Prometheus是一个开源系统监控和警报工具包,最初起源于 ...

  9. Taints和Tolerations联用，将pod部署到k8s的master节点

    一般,k8s的master为了保持高性能,在这个主节点上只运行一些管理必须的POD. 如果我们限于资源,或是一些监控类的pod要部署到master节点呢? 昨天遇到这个问题,按网上通用的方法,未解决, ...

  10. advStringGrid单元格文字垂直居中

    1.必须设置advStringGrid属性WordWrap = false, 2.在OnGetAlignment事件中,添加以下代码 procedure Tfrm_book_input.StringG ...