本系列探寻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. kali的中文输入法-安装后无中文选项的解决办法

    我在我实体电脑上安装了kali 本想安装个中文输入法但是有时候输入发中根本没有选择输入法的这一项.所以导致很别扭,之前在虚机上安装过没有问题但是挪到实体机上就是没有用的也是fcitx,这一度让我这个小 ...

  2. 001_nginx常用参数查询

    一.underscores_in_headers on; Nginx 默认把名称包含下划线的 Headers 视为无效,直接移除.如果你希望让这类型的信息生效,那你要把 underscores_in_ ...

  3. python 列表元组加减乘除法

    元组(typle)列表(list)没有减法和除法,但有加法和乘法. 1.加法,即把元素相加.只可以list和tuple相加,不能加其他类型. t= (1, ) + (2, 3, 4) print(t, ...

  4. 结合IdentityServer4配置Ocelot的Json配置文件管理更新

    Ocelot提供了AddAdministration方法来设置配置路由以及授权方式 services.AddOcelot().AddAdministration("/admin", ...

  5. [转] HTML 获取屏幕、浏览器、页面的高度宽度

    本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...

  6. 【BZOJ】4361: isn

    题解 可以想一下保留一个长度为k的不降序列方案数是\(f[k] (n - k)!\) \(f[k]\)是有多少个长度为k的不降序列 我们去掉不合法的,一定是前一次操作的时候有一个长度为\(k + 1\ ...

  7. 记录一下SparkStreaming中因为使用redis做数据验证而导致数据结果不对的问题

    业务背景: 需要通过redis判断当前用户是否是新用户.当出现新用户后,会将该用户放入到redis中,以标明该用户已不是新用户啦. 出现问题: 发现入库时,并没有新用户入库,但我看了数据了,确实应该是 ...

  8. 【Java】 大话数据结构(4) 线性表之循环链表

    本文稍微介绍了一下循环链表. 将单链表终端结点的指针域由空指针改为指向头结点,形成一个环,这种头尾相接的单链表称为循环列表. 循环列表的结构如下图所示: 循环链表的优点:可以从任意一个结点出发,遍历所 ...

  9. 在Win10下搭建web服务器，使用本机IP不能访问，但是使用localhos或127.0.0.1可以正常访问的解决办法

    最近在在Win10下搭建web服务器,发现通过windows自带的浏览器win10 edge浏览器使用本机IP不能放问,但是使用localhos或127.0.0.1可以正常访问, 后来无意发现,使用w ...

  10. 访问url下载文件----python

    工作上有时候有需求,会下载pdf,doc,zip等文件,可以用以下方法,推荐使用第一种 下载文件: import urllib import urllib2 import requests url = ...