[关闭]
@dreamapplehappy 2014-12-12T19:04:03.000000Z 字数 4804 阅读 2950

AngularJS+UI Router(1)

AngularJS uiRouter

多步表单的实现

在线demo演示地址https://rawgit.com/dreamapplehappy/AngularJS-uiRouter/master/index.html

文件的构成

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

详解每个文件的代码

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>多步表单</title>
  6.         <link rel="stylesheet" href="lib/bootstrap.min.css">
  7.         <link rel="stylesheet" href="myStyle.css">
  8.         <script src="lib/angular.js"></script>
  9.         <script src="lib/angular-ui-router.js"></script>
  10.         <script src="lib/angular-animate.js"></script>
  11.         <script src="myApp.js"></script>
  12.     </head>
  13.     <body ng-app="myModule">
  14.         <div class="container" ng-controller="myFormController">
  15.             <div ui-view></div>
  16.         </div>
  17.     </body>
  18.     </html>
  1. 代码说明：
  2. ng-app="myModule" 表示AngularJS启动的开始
  3. ng-controller="myFormController" 表示这整个div由控制器myFormController来控制
  4. 新建一个lib文件夹，放在router目录下
  5. 外部引入的angular.js，angular-ui-router.js，angular-animate.js，bootstrap.min.css都放在这个文件夹中
  6. 这个demo的路由配置放在myApp.js里面
  7. demo的样式文件放在myStyle.css里面
  8. <div ui-view></div>这个div包含ui-view说明里面放置的是html模板
  1. <div class="row">
  2.     <div class="col-sm-8 col-sm-offset-2">
  3.         <div class="form-container">
  4.             <div>
  5.                 <h2>欢迎注册Dreamapple!</h2>
  6.                 <div class="control">
  7.                     <a ui-sref-active="active" ui-sref=".required"><span>1</span> 基本信息</a>
  8.                     <a ui-sref-active="active" ui-sref=".optional"><span>2</span> 选填项</a>
  9.                     <a ui-sref-active="active" ui-sref=".confirm"><span>3</span> 确认结果</a>
  10.                 </div>
  11.                 <hr />
  12.             </div>
  13.             <form ng-submit="submit()">
  14.                 <div class="form-view" ui-view></div>
  15.             </form>
  16.         </div>
  17.         <hr />
  18.         <pre>
  19.             {{ formData }}
  20.         </pre>
  21.     </div>
  22. </div>
  1. 代码说明：
  2. ui-sref=".required"说明当点击这个链接的时候路由会跳转到相应的包含required状态的路由中。
  3. ng-submit="submit()"说明表单提交的时候运行的函数
  1. //定义自己的module(myModule)
  2. //中括号中的是这个module的依赖
  3. var myModule = angular.module("myModule", ['ngAnimate','ui.router']);
  5. myModule.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
  6.     $stateProvider
  7.         .state('form',{
  8.             url:'/form',
  9.             templateUrl:'form.html',
  10.             controller:'myFormController'   //指明控制器
  11.         })
  12.         .state('form.required',{
  13.             url:'/required',
  14.             templateUrl:'form-required.html'
  15.         })
  16.         .state('form.optional',{
  17.             url:'/optional',
  18.             templateUrl:'form-optional.html'
  19.         })
  20.         .state('form.confirm',{
  21.             url:'/confirm',
  22.             templateUrl:'form-confirm.html'
  23.         });
  25.         $urlRouterProvider.otherwise('/form/required');     //匹配所有不在上面的路由
  26. }]);
  27. //定义模块的控制器
  28. myModule.controller('myFormController', ['$scope', function($scope){
  29.     $scope.formData = {};
  30.     $scope.submit = function() {
  31.         alert("Cool, you have registered!");
  32.     };
  33. }]);
  1. 代码说明都包含在注释中
  1. <div class="form-group">
  2.     <label for="username">用户名：</label>
  3.     <input type="text" class="form-control" name="username" ng-model="formData.username">
  4. </div>
  5. <div class="form-group">
  6.     <label for="password">密码：</label>
  7.     <input type="password" class="form-control" name="password" ng-model="formData.password">
  8. </div>
  9. <div class="form-group">
  10.     <label for="cp">确认密码：</label>
  11.     <input type="password" class="form-control" name="cp" ng-model="formData.cp">
  12. </div>
  13. <div class="form-group">
  14.     <label for="email">邮箱：</label>
  15.     <input type="email" class="form-control" name="email" ng-model="formData.email">
  16. </div>
  18. <div class="form-group">
  19.     <button ui-sref-active="active" ui-sref="form.optional" class="btn btn-success">下一项</button>
  20. </div>
  1. <div class="form-group">
  2.     <label for="gender">您的性别：</label>
  3.     <input type="radio" value="man" class="form-control" ng-model="formData.gender">男
  4.     <input type="radio" value="woman" class="form-control" ng-model="formData.gender">女
  5. </div>
  6. <br />
  7. <div class="form-group">
  8.     <button ui-sref-active="active" ui-sref="form.required" class="btn btn-success">上一项</button>
  9.     <button ui-sref-active="active" ui-sref="form.confirm" class="btn btn-success">下一项</button>
  10. </div>
  1. <div class="form-group">
  2.     <label for="interest">选择你喜欢的语言：</label>
  3.     <input type="checkbox" value=".net" class="form-control" ng-model="formData.interestA">.NET
  4.     <input type="checkbox" value="php" class="form-control" ng-model="formData.interestB">PHP
  5.     <input type="checkbox" value="nodejs" class="form-control" ng-model="formData.interestC">NodeJS
  6.     <hr />
  7.     <button type="submit" class="btn btn-primary">注册</button>
  8. </div>
  1. @keyframes slideToRight {
  2.     from     { transform:translateX(100%); }
  3.     to         { transform: translateX(0); }
  4. }
  5. @-moz-keyframes slideToRight {
  6.     from     { -moz-transform:translateX(100%); }
  7.     to         { -moz-transform: translateX(0); }
  8. }
  9. @-webkit-keyframes slideToRight {
  10.     from     { -webkit-transform:translateX(100%); }
  11.     to         { -webkit-transform: translateX(0); }
  12. }
  13. .form-view.ng-enter{
  14.     position: absolute;
  15.     transition:0.5s all linear;
  16.     -moz-transition:0.5s all linear;
  17.     -webkit-transition:0.5s all linear;
  18. }
  20. .form-view.ng-enter{
  21.     -webkit-animation:slideToRight 0.5s both linear;
  22.     -moz-animation:slideToRight 0.5s both linear;
  23.     animation:slideToRight 0.5s both linear;
  24. }
  26. div.control a.active span{
  27.     background-color: #666;
  28.     color: #FFF;
  29. }
  30. div.control a{
  31.     text-decoration: none;
  32.     display: inline-block;
  33.     width: 20%;
  34. }
  35. div.control a span{
  36.     display: inline-block;
  37.     width: 36px;
  38.     height: 36px;
  39.     border-radius: 36px;
  40.     text-align: center;
  41.     line-height: 36px;
  42. }
  43. .form-container{
  44.     height: 399px;
  45. }
  46. .textarea{
  47.     width: 100% !important;
  48.     height: 60px !important;
  49. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注