Page 358 - AngularJS权威教程

338 第 25 章 AngularJS 精华扩展

要确保你已经全局安装了Bower：

$ npm install bower -g
然后你就可以使用Bower安装angular-ui库了：

$ bower install angular-ui-router --save
你还要确保在视图中链接这个库：

<scripttype="text/javascript"
src="app/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
同时还需要将ui.router作为依赖注入到你的应用中：

angular.module('myApp', ['ui.router']);
现在，不同于内置的ngRoute服务，由于ui-router基于状态工作，而不是简单的url，因此
你可以将它嵌套在视图中。
在处理ngRoute服务时我们不再使用ng-view，而改为使用ui-view指令。

在ui-router内处理路由和状态时，我们主要关心的是应用程序处在哪个状态以及Web应用
当前处在哪个路由位置。

<div ng-controller="DemoController">
<div ui-view></div>
</div>
和ngRoute一样，定义在任意给定状态内的模板都处在<div ui-view></div>元素内。此外，
每个模板都可以包含自己的ui-view。 这事实上就允许你在路由中嵌套视图。

为了定义路由，你可以使用.config方法，和常见的方式一样，但不是将路由设置在
$routeProvider上，而是将状态设置在$stateProvider上。

.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('start', {
url: '/start',
templateUrl: 'partials/start.html'
})
});
这一步给状态配置对象分配了一个名为start的状态。这个状态配置对象，或者说这个
stateConfig也有一些与路由配置对象相似的选项，让你能够配置应用程序的状态。

1. template、templateUrl、templateProvider
在每个视图上设置模板的方式有三种。

 template：一个HTML内容字符串或者返回HTML的函数。
 templateUrl：一个模板URL路径字符串或者是返回URL路径字符串的函数。
 templateProvider：一个返回HTML内容字符串的函数。

例如：

$stateProvider.state('home',{