[转]AngularJS+UI Router(1) 多步表单

多步表单的实现

说明：先新建一个文件夹(例如：router)，然后新建下面的文件。

代码说明：
ng-app="myModule" 表示AngularJS启动的开始
ng-controller="myFormController" 表示这整个div由控制器myFormController来控制
新建一个lib文件夹，放在router目录下
外部引入的angular.js，angular-ui-router.js，angular-animate.js，bootstrap.min.css都放在这个文件夹中
这个demo的路由配置放在myApp.js里面
demo的样式文件放在myStyle.css里面
<div ui-view></div>这个div包含ui-view说明里面放置的是html模板

//定义自己的module(myModule)
//中括号中的是这个module的依赖
var myModule = angular.module("myModule", ['ngAnimate','ui.router']);
myModule.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('form',{
url:'/form',
templateUrl:'form.html',
controller:'myFormController' //指明控制器
})
.state('form.required',{
url:'/required',
templateUrl:'form-required.html'
})
.state('form.optional',{
url:'/optional',
templateUrl:'form-optional.html'
})
.state('form.confirm',{
url:'/confirm',
templateUrl:'form-confirm.html'
});
$urlRouterProvider.otherwise('/form/required'); //匹配所有不在上面的路由
}]);
//定义模块的控制器
myModule.controller('myFormController', ['$scope', function($scope){
$scope.formData = {};
$scope.submit = function() {
alert("Cool, you have registered!");
};
}]);

<div class="form-group">
<label for="username">用户名：</label>
<input type="text" class="form-control" name="username" ng-model="formData.username">
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" class="form-control" name="password" ng-model="formData.password">
</div>
<div class="form-group">
<label for="cp">确认密码：</label>
<input type="password" class="form-control" name="cp" ng-model="formData.cp">
</div>
<div class="form-group">
<label for="email">邮箱：</label>
<input type="email" class="form-control" name="email" ng-model="formData.email">
</div>
<div class="form-group">
<button ui-sref-active="active" ui-sref="form.optional" class="btn btn-success">下一项</button>
</div>

<div class="form-group">
<label for="gender">您的性别：</label>
<input type="radio" value="man" class="form-control" ng-model="formData.gender">男
<input type="radio" value="woman" class="form-control" ng-model="formData.gender">女
</div>
<br />
<div class="form-group">
<button ui-sref-active="active" ui-sref="form.required" class="btn btn-success">上一项</button>
<button ui-sref-active="active" ui-sref="form.confirm" class="btn btn-success">下一项</button>
</div>

<div class="form-group">
<label for="interest">选择你喜欢的语言：</label>
<input type="checkbox" value=".net" class="form-control" ng-model="formData.interestA">.NET
<input type="checkbox" value="php" class="form-control" ng-model="formData.interestB">PHP
<input type="checkbox" value="nodejs" class="form-control" ng-model="formData.interestC">NodeJS
<hr />
<button type="submit" class="btn btn-primary">注册</button>
</div>