Page 365 - AngularJS权威教程

25.3 ui-router 345

25.3.5 创建一个导航程序 19

为什么要使用比内置的ngRoute更强大的新路由方式？
20
当我们想要为用户创建一个注册向导的时候，就需要使用ui-router了，这是一个非常合适
的应用场景。
21
我们将使用ui-router创建一个快速注册服务，它包含一个控制器，用于处理注册任务。
首先，需要创建应用视图：
22
<div ng-controller="WizardSignupController">
<h2>Signup wizard</h2>
<div ui-view></div> 23
</div>
在这个视图内，我们嵌入了注册视图。接下来，在这个注册向导中还需要有三个阶段。
24
 start：在这个阶段，我们获取用户名并向其介绍注册向导。
 email：在这里，接受用户的邮件。 25
 finish：此时，用户完成注册过程，我们要向其展示一个完整的页面。

在真实的应用中， finish阶段应该将注册资料发送给服务器，同时进行真实的注册 26
操作。在这里，由于没有后端，因此暂时只显示这个视图。

这个注册程序依赖于wizardapp.controllers模块，我们将在其中编写包含控制器： 27
WizardSignupController。
angular.module('wizardApp', [ 28
'ui.router',
'wizardapp.controllers'
]); 29
WizardSignupController简单地提供了$scope.user对象，在注册过程以及注册行为中，我
们都会使用这个对象。 30

angular.module('wizardapp.controllers', [])
.controller('WizardSignupController',
function($scope, $state) { 31
$scope.user = {};
$scope.signup = function() {}
}); 32

向导程序逻辑覆盖了大部分工作。你可以将这些逻辑设置到应用的config()函数中：
angular.module('wizardApp', [ 33
'ui.router', 'wizardapp.controllers'
])
.config(function($stateProvider, $urlRouterProvider) { 34
$stateProvider
.state('start', {
url: '/step_1',
/templateUrl: 'partials/wizard/step_1.html' 35
})
.state('email', {
url: '/step_2', 36
templateUrl: 'partials/wizard/step_2.html'