本系列探寻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. python3之memcached

    1.memcached介绍 Memcached是一个自由开源的,高性能,分布式内存对象缓存系统. Memcached是以LiveJournal旗下Danga Interactive公司的Brad Fi ...

  2. 搜索引擎ElasticSearchV5.4.2系列三之ES使用

    相关博文: 搜索引擎ElasticSearchV5.4.2系列一之ES介绍 搜索引擎ElasticSearchV5.4.2系列二之ElasticSearchV5.4.2+kibanaV5.4.2+x- ...

  3. 【转】卖萌的大牛你桑不起啊 ——记CVPR2011一篇极品文章

    来源:http://blog.renren.com/share/228707015/7197269922 作者 : 庞宇 CVPR2011正在如火如荼的进行中,在网上能看到的部分文章中,我终于找到一篇 ...

  4. 【LOJ】#2523. 「HAOI2018」奇怪的背包

    题解 复杂度怎么算也要2s的题怎么0.5s就跑完了,迷啊 这个题简直算完复杂度不敢写,写了就赚飞了好吧 根据裴蜀定理,显然选出的数和P的gcd是w的约数 我们考虑枚举\(P\)的约数,上限当然是\(\ ...

  5. swagger restful api form映射实体对象和body映射实体对象配置

    实体Model @ModelAttribute一个具有如下三个作用: ①绑定请求参数到命令对象:放在功能处理方法的入参上时,用于将多个请求参数绑定到一个命令对象,从而简化绑定流程,而且自动暴露为模型数 ...

  6. MySQL数据库之视图

    1 引言 为了简化复杂SQL语句编写,以及提高数据库安全性,MySQL数据库视图特性.视图是一张虚拟表,不在数据库中以储存的数据值形式存在.在开发中,开发者往往只对某些特定数据和所负责的特定任务感兴趣 ...

  7. SOA和Web Servcie的区别

    soa(Service-Oriented Architecture)是服务对服务的,web service是服务对客户端的. 都提供服务.  服务接口都是基于开发的.  服务接口和服务的具体实现都是分 ...

  8. react比较入门的小demo

    什么是jsx?    JSX是JavaScript  XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...

  9. luoguP3175 [HAOI2015]按位或 min-max容斥 + 高维前缀和

    考虑min-max容斥 \(E[max(S)] = \sum \limits_{T \subset S} min(T)\) \(min(T)\)是可以被表示出来 即所有与\(T\)有交集的数的概率的和 ...

  10. Dalvik和ART的区别（转）

    什么是Dalvik:    Dalvik是Google公司自己设计用于Android平台的Java虚拟机.Dalvik虚拟机是Google等厂商合作开发的Android移动设备平台的核心组成部分之一. ...