html标签 ui-sref,AngularJS ui-router (嵌套路由)实例

我们都知道，如果使用原生路由的话，Angular的视图是通过ng-view这个指令进行加载的。比如这样：

var bookStoreApp = angular.module('bookStoreApp', [

'ngRoute', 'ngAnimate', 'bookStoreCtrls',

]);

bookStoreApp.config(function($routeProvider) {

$routeProvider.when('/hello', {

templateUrl: 'tpls/hello.html',

controller: 'HelloCtrl'

}).when('/list', {

templateUrl: 'tpls/bookList.html',

controller: 'BookListCtrl'

}).otherwise({

redirectTo: '/hello'

})

});

这是属于AngularJS的原生路由定义。从表面上看似乎挺方便，没有什么太大的问题。但是细想一下，如果说我们有一个网页，左边是菜单栏，右边是各个菜单所对应的视图。那么，如果按照这样的定义，点击每个菜单项，岂不得刷新整个网页？而我们想要的只是右边的视图刷新。所以，这就要用到嵌套路由了。

所谓嵌套路由，就是视图里面还可以再嵌套视图，路由里还可以再嵌套路由。并且，通过ui-router，可以实现不同视图之间的参数传递。

ui-router定义路由的时候，与ngRouter不一样，它是使用.来进行定义的，并且在html标签里，不使用ng-view，而是使用ui-view，比如

下面的实例演示如何实现路由嵌套：

home.html

创建如下的html页面：

Home

This page demonstrates

nestedviews.

List

Paragraph

home-list.html

创建如下的html页面：

• {{ topic }}

about.html

创建如下的html页面：

The About Page

This page demonstrates

multipleand

namedviews.

table-data.html

创建如下的html页面：

Ice-Creams

NameCost

{{ topic.name }}${{ topic.price }}

注意，到目前为止，我们还没有插入任何AngularJS路由或者其它任何框架。目前我们只是创建了一些页面片段，我们需要一个占位或者说父页面来装下这些页面片段。让我们把这个页面叫做 index.html.

index.html

用如下内容创建这个html页面

AngularUI Router

• Home

• About

在主页中我们引入了angular.min.js、angular-ui-router.js、angular-animate.js和app.js。在class为Container的div中我们创建了一个

中ui-sref 指令链接到特定状态。

在app.JS文件的内容，我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在index.html中显示home.html的内容。代码如下：

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

/*路由重定向 $urlRouterProvider:如果没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至 home.html,

*这个页面就是状态名称被声明的地方. */

$urlRouterProvider.otherwise('/home');

$stateProvider

.state('home', {

url: '/home',

templateUrl: 'tpls2/home.html'

})

/* nested list with custom controller*/

.state('home.list', {

url: '/list',

templateUrl: 'tpls2/home-list.html',

controller: function($scope) {

$scope.topics = ['Butterscotch', 'Black Current', 'Mango'];

}

})

// nested list with just some random string data

.state('home.paragraph', {

url: '/paragraph',

template: 'I could sure use a scoop of ice-cream. '

})

.state('about', {

url: '/about',

/* view 用在该状态下有多个 ui-view 的情况，可以对不同的 ui-view 使用特定的 template, controller, resolve data

绝对 view 使用 '@' 符号来区别，比如 'columnOne@about' 表明名为 'columnOne' 的 ui-view 使用了 'about' 状态的

模板(template)，相对 view 则无*/

views: {

// 无名 view

'': {

templateUrl: 'tpls2/about.html'

},

// for "ui-view='columnOne'"

'columnOne@about': {

template: '这里是第一列的内容'

},

// for "ui-view='columnTwo'"

'columnTwo@about': {

templateUrl: 'tpls2/table-data.html',

controller: 'Controller'

}

}

});

});

routerApp.controller('Controller', function($scope) {

$scope.message = 'test';

$scope.topics = [{

name: 'Butterscotch',

price: 50

}, {

name: 'Black Current',

price: 100

}, {

name: 'Mango',

price: 20

}];

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。