本系列探寻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. 009_【OS X和iOS系统学习笔记】 OS X架构

    1.OS X是整个操作系统的集体名称,而Darwin是其中的一个组件. 2.Darwin是操作系统的类UNIX核心,本身由内核.XNU和运行时组成. 3.uname指令:可以得到有关架构的详细信息以及 ...

  2. Error updating database. Cause: java.lang.IllegalArgumentException: invalid comparison: java.util.Date and java.lang.String异常处理

    问题原因:Mybatis中对于时间参数进行比较时的一个BUG. 如果拿传入的时间类型参数与空字符串‘‘进行对比判断则会引发异常.,所以应该去掉该判断, 只保留非空判断就正常了 <if test= ...

  3. js时间格式化函数（兼容IOS）

    * 时间格式化 * @param {Object} dateObj 时间对象 * @param {String} fmt 格式化字符串 */ dateFormat(dateObj, fmt) { le ...

  4. Linux 下crontab 详解转

    http://yaksayoo.blog.51cto.com/510938/162062 Linux计划任务工具cron用法详解 linux下大名鼎鼎的计划任务工具crontab的使用介绍baidu. ...

  5. jdk windows环境变量

    (1)新建->变量名"JAVA_HOME",变量值"C:\Java\jdk1.8.0_05"(即JDK的安装路径) (2)编辑->变量名" ...

  6. NOIP2018濒死记

    已经复课常规三个多星期了...终于有时间来写Noip2018游记了.当时的一些想法可能都不记得了...我的OI生涯也时日无多了.也许一开始我的选择就是错的,我之前就这么想,只不过现在更加确信了而已.等 ...

  7. vmware工具克隆linux系统步骤及配置

    我们在学习的时候使用vmware创建自己的虚拟机,但是我们有时学习环境需要多台计算机进行操作演示,如果安装创建虚拟机.再在虚拟机上安装操作系统.这样很花费我们的时间,而且还步能保证服务的一直性,这就用 ...

  8. 3，EasyNetQ-发布/订阅

    一.发布 在发布/订阅模式中的角色是彼此陌生的. 一个发布者只是向世界说这个已经发生了,一位订阅者告诉世界“我在乎这个”. 在这个模型中,没有人关心特定的事件是很好的. 消息可能有一个订阅者,可能有2 ...

  9. python中的*和**参数传递机制

    python的参数传递机制具有值传递(int.float等值数据类型)和引用传递(以字典.列表等非值对象数据类型为代表)两种基本机制以及方便的关键字传递特性(直接使用函数的形参名指定实参的传递目标,如 ...

  10. hdu 1073 字符串处理

    题意:给一系列的输出和标准答案,比较二者是AC,PE或WA 字符串处理还是比较薄弱,目前没什么时间搞字符串专题,所以遇到一题就努力搞懂 #include<cstdio> #include& ...