[轉]AngularJS 使用 UI Router 實現表單向導

本文轉自：http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router

今天我們將使用AngularJs和偉大的UI Router以及Angular ngAnimate module創建一個帶動畫的多步表單。這項技術可以用在你想要簡化用戶操作的大表單上。 我們看到這項技術已經應用在了許多的網頁上。比如購物車，注冊表單，入職流程以及許多多步表單，讓用戶更容易在線填寫表單。 下面我們將構建它： 使用UI Router，它能內嵌狀態，為每個狀態顯示不同的view,我們能讓多步表單變得相當的容易。 為了快速的理解UI Router是怎樣工作的，看我們的文章：AngularJS使用UI-Router路由 讓我們言歸正傳，開始創建我們的最棒的表單！

地獄星星 翻譯於 11個月前 0人頂   頂 翻譯的不錯哦!

創建工程

創建工程有個模板結構. 需要個 布局文件 , 每個表單的視圖文件, 格式文件, 以及JavaScript 文件.

下面就是文件清單，先創建好它們,接着在填充內容

?

1 2 3 4 5 6 7

- index.html - form.html - form-profile.html - form-interests.html - form-payment.html - app.js - style.css

 

每個表單-____.html表示層級結構中的html文件. 這些結構最終創建我們的表單結構.

            

petert 翻譯於 11個月前

0人頂

 

頂 翻譯的不錯哦!                        

我們的布局/模板文件 index.html

我們通過建立一個主文件來引入我們所需要的所有資源以開始我們的項目 ，這里我們使用 index.html 文件作為主文件

現在，我們加載我們所需的資源（AngularJS, ngAnimate, Ui Router, 以及其他腳本和樣式表）並且設定一個 ui-view用來告知 UI Router 我們的視圖需要顯示到哪里。這里我們使用 Bootstrap 來快速應用樣式。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<!-- index.html --> <! DOCTYPE  html> < html > < head >      < meta  charset = "utf-8" >        <!-- CSS -->      < link  rel = "stylesheet"  href = "//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css" >      < link  rel = "stylesheet"  href = "style.css" >            <!-- JS -->      <!-- load angular, nganimate, and ui-router -->      < script  src = "//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" ></ script >      < script  src = "//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js" ></ script >      < script  src = "//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js" ></ script >      < script  src = "app.js" ></ script >       </ head >   <!-- apply our angular app --> < body  ng-app = "formApp" >        < div  class = "container" >            <!-- views will be injected here -->          < div  ui-view></ div >        </ div >   </ body > </ html >

完成所有文件的引入后，讓我們進入 app.js 開始創建Angular應用和最基本的路由配置。 注意我們是如何把Angular App (formApp) 應用到 body 上面的。

            

CandySunPlus 翻譯於 10個月前

1人頂

 

頂 翻譯的不錯哦!                        

創建我們的Angular App app.js

現在我們來創建應用和路由。 在一個大型應用中， 你肯定希望把你的Angular應用、路由、控制器分布到它們各自的模塊中，但是為了完成我們的簡單用例，我們將把它們都放到app.js這個歡樂的大家庭中。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

// app.js // create our angular app and inject ngAnimate and ui-router  // ============================================================================= angular.module( 'formApp' , [ 'ngAnimate' ,  'ui.router' ])   // configuring our routes  // ============================================================================= .config( function ($stateProvider, $urlRouterProvider) {            $stateProvider                // route to show our basic form (/form)          .state( 'form' , {              url:  '/form' ,              templateUrl:  'form.html' ,              controller:  'formController'          })                    // nested states           // each of these sections will have their own view          // url will be nested (/form/profile)          .state( 'form.profile' , {              url:  '/profile' ,              templateUrl:  'form-profile.html'          })                    // url will be /form/interests          .state( 'form.interests' , {              url:  '/interests' ,              templateUrl:  'form-interests.html'          })                    // url will be /form/payment          .state( 'form.payment' , {              url:  '/payment' ,              templateUrl:  'form-payment.html'          });                // catch all route      // send users to the form page       $urlRouterProvider.otherwise( '/form/profile' ); })   // our controller for the form // ============================================================================= .controller( 'formController' ,  function ($scope) {            // we will store all of our form data in this object      $scope.formData = {};            // function to process the form      $scope.processForm =  function () {          alert( 'awesome!' );      };       });

 

現在我們擁有了一個已經注入了ngAnimate和ui.router的應用。 我們同樣也建立了相應的路由。注意我們是如何為每一個視圖區域定義 url，視圖文件(templateUrl) 和 控制器的。

form 將是我們的主視圖區域。它同樣有一個以 . 分割的子視圖區域 form.profile。這種想法能實現在應用狀態發生變化時（譯者：可能是路由、queryString等），子視圖將會在主視圖區域中顯示出來。（譯者：而且可以作到僅更新子視圖區域變化，記錄子視圖區域狀態）。

我們將在下一節中進行演示。 現在我們需要為form以及它的子視圖區域創建視圖。

            

CandySunPlus 翻譯於 10個月前

1人頂

 

頂 翻譯的不錯哦!                        

表單模板視圖 form.html

讓我們從新建form.html開始。這個文件將會在我們剩下的表單視圖文件中充當模板的作用，正如index.html被用作整個項目的總體模板一樣。我們所要作的是在該文件中包含ui-view，這樣可以使嵌套聲明知道該在何處注入他們的視圖。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<!-- form.html --> < div  class = "row" > < div  class = "col-sm-8 col-sm-offset-2" >        < div  id = "form-container" >            < div  class = "page-header text-center" >              < h2 >Let's Be Friends</ h2 >                            <!-- the links to our nested states using relative paths -->              <!-- add the active class if the state matches our ui-sref -->              < div  id = "status-buttons"  class = "text-center" >                  < a  ui-sref-active = "active"  ui-sref = ".profile" >< span >1</ span > Profile</ a >                  < a  ui-sref-active = "active"  ui-sref = ".interests" >< span >2</ span > Interests</ a >                  < a  ui-sref-active = "active"  ui-sref = ".payment" >< span >3</ span > Payment</ a >              </ div >          </ div >                    <!-- use ng-submit to catch the form submission and use our Angular function -->          < form  id = "signup-form"  ng-submit = "processForm()" >                <!-- our nested state views will be injected here -->              < div  id = "form-views"  ui-view></ div >          </ form >        </ div >        <!-- show our formData as it is being typed -->      < pre >          {{ formData }}      </ pre >     </ div > </ div >

注意我們是如何第二次在項目中使用ui-view的。這就是UI Router偉大的地方：我們可以嵌套聲明和視圖。這能夠在我們開發應用時提供給我們非常多的靈活性。關於UI Router視圖的內容，請參見 官方文檔。

添加基於狀態的激活類

我們希望每一個狀態按鈕能夠在他們被激活時展示。為了達到這個效果，我們將會使用UI Router提供的ui-sref-active。如果ui-sref和當前狀態一致，則會添加我們指定的類。

為了給自己的表單添加驗證，請參見AngularJS表單驗證。

現在，你可能想知道我們的表單究竟看起來是什么樣子。讓我們打開瀏覽器看一眼。

目前為止，我們並沒有完全按照希望的那樣得到所有的內容，但是這是一系列偉大事情的開端。讓我們繼續前進，添加一點樣式，之后會添加一些嵌入視圖和注釋。

            

0x0bject 翻譯於 10個月前

0人頂

 

頂 翻譯的不錯哦!                        

基礎Stylingstyle.css

我們將設計我們的form-container和status-buttons來是我們的表單看起來更好。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/* style.css */ /* BASIC STYLINGS ============================================================================= */ body                            {  padding-top : 20px ; }   /* form styling */ #form-container                {  background : #2f2f2f ;  margin-bottom : 20px ;      border-radius: 5px ; } #form-container .page-header   {  background : #151515 ;  margin : 0 ;  padding : 30px ;       border-top-left-radius: 5px ; border-top-right-radius: 5px ; }   /* numbered buttons */ #status-buttons                 {  } #status-buttons a               {  color : #FFF ;  display :inline- block ;  font-size : 12px ;  margin-right : 10px ;  text-align : center ;  text-transform : uppercase ; } #status-buttons a:hover         {  text-decoration : none ; }   /* we will style the span as the circled number */ #status-buttons span            {  background : #080808 ;  display : block ;  height : 30px ;  margin : 0  auto  10px ;  padding-top : 5px ;  width : 30px ;       border-radius: 50% ; }   /* active buttons turn light green-blue*/ #status-buttons a.active span   {  background : #00BC8C ; }

 

現在我們的按鈕更好看了並且更符合我們想要的了，接下來我們看下嵌套視圖。

嵌套視圖form-profile.html, form-interests.html, form-payment.html

這部分會比較簡單。我們將定義不同的帶有我們需要的輸入框的視圖。並且將他們綁定到formData對象以便我們能看到輸入的數據。

下面是我們用於嵌套視圖的視圖文件：

表單概要視圖

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!-- form-profile.html --> < div  class = "form-group" >      < label  for = "name" >Name</ label >      < input  type = "text"  class = "form-control"  name = "name"  ng-model = "formData.name" > </ div >   < div  class = "form-group" >      < label  for = "email" >Email</ label >      < input  type = "text"  class = "form-control"  name = "email"  ng-model = "formData.email" > </ div >   < div  class = "form-group row" > < div  class = "col-xs-6 col-xs-offset-3" >      < a  ui-sref = "form.interests"  class = "btn btn-block btn-info" >      Next Section < span  class = "glyphicon glyphicon-circle-arrow-right" ></ span >      </ a > </ div > </ div >

 

表單興趣視圖

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!-- form-interests.html --> < label >What's Your Console of Choice?</ label > < div  class = "form-group" >      < div  class = "radio" >          < label >             < input  type = "radio"  ng-model = "formData.type"  value = "xbox"  checked>             I like XBOX          </ label >      </ div >      < div  class = "radio" >          < label >              < input  type = "radio"  ng-model = "formData.type"  value = "ps" >              I like PS4          </ label >      </ div > </ div >   < div  class = "form-group row" > < div  class = "col-xs-6 col-xs-offset-3" >      < a  ui-sref = "form.payment"  class = "btn btn-block btn-info" >      Next Section < span  class = "glyphicon glyphicon-circle-arrow-right" ></ span >      </ a > </ div > </ div >

 

表單支付視圖

?

1 2 3 4 5 6 7

<!-- form-payment.html --> < div  class = "text-center" >      < span  class = "glyphicon glyphicon-heart" ></ span >      < h3 >Thanks For Your Money!</ h3 >            < button  type = "submit"  class = "btn btn-danger" >Submit</ button > </ div >

 

既然我們已經定義了這些視圖，那么當我們瀏覽表單時，他們就會顯示出來。同樣我們用下一個按鈕和ui-sref來連接每一個新視圖.

            

GoodLoser 翻譯於 10個月前

0人頂

 

頂 翻譯的不錯哦!                        

當使用ui-sref時，你要連接到你路由中定義的state而不是URL。然后Angular會使用這個來為你構建href。 下面是我們表單目前的每一個頁面。 為了讓我們的頁面不同尋常，讓我們加上動畫效果。

GoodLoser 翻譯於 11個月前 0人頂   頂 翻譯的不錯哦!

讓我們的表單產生動畫效果

因為在項目開始的時候，我們已經加載了ngAnimate，它已經添加到需要動畫的的類上了。當視圖進入或退出的時候，它將自動添加類ng-enter和ng-leave。

現在我們所有做的就是通過樣式形成我們最終的表單。為了理解Angular動畫，這篇文章是一個很好的起點。

讓我們進去css文件，將動畫，並應用到我們的表單上

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

/* style.css */ /* ANIMATION STYLINGS ============================================================================= */ #signup-form            {  position : relative ;  min-height : 300px ;  overflow : hidden ;  padding : 30px ; } #form-views             {  width : auto ; }   /* basic styling for entering and leaving */ /* left and right added to ensure full width */ #form-views.ng-enter, #form-views.ng-leave      {  position : absolute ;  left : 30px ;  right : 30px ;      transition: 0.5 s  all  ease; -moz-transition: 0.5 s  all  ease; -webkit-transition: 0.5 s  all  ease;  }       /* enter animation */ #form-views.ng-enter            {       -webkit-animation:slideInRight  0.5 s  both  ease;      -moz-animation:slideInRight  0.5 s  both  ease;      animation:slideInRight  0.5 s  both  ease;  }   /* leave animation */ #form-views.ng-leave            {       -webkit-animation:slideOutLeft  0.5 s  both  ease;      -moz-animation:slideOutLeft  0.5 s  both  ease;      animation:slideOutLeft  0.5 s  both  ease;    }   /* ANIMATIONS ============================================================================= */ /* slide out to the left */ @keyframes slideOutLeft {      to         { transform: translateX( -200% ); } } @-moz-keyframes slideOutLeft {          to         { -moz-transform: translateX( -200% ); } } @-webkit-keyframes slideOutLeft {      to         { -webkit-transform: translateX( -200% ); } }   /* slide in from the right */ @keyframes slideInRight {      from     { transform:translateX( 200% ); }      to         { transform: translateX( 0 ); } } @-moz-keyframes slideInRight {      from     { -moz-transform:translateX( 200% ); }      to         { -moz-transform: translateX( 0 ); } } @-webkit-keyframes slideInRight {      from     { -webkit-transform:translateX( 200% ); }      to         { -webkit-transform: translateX( 0 ); } }

首先，確定視圖離開或進去時，表單的樣式，他們是絕對定位的。需要確認當視圖進入的時候一個視圖不會放到另一個視圖的下面。

其次，應用我們的動畫到.ng-enter和.ng-leave類

第三，用@keyframes定義動畫。所有這些部分組合到一起，我們的表單就有了Angular動畫，基於狀態的UI Router和Angular數據綁定。

            

地獄星星 翻譯於 10個月前

1人頂

 

頂 翻譯的不錯哦!                        

結論 UI-Router, ngAnimate, 和其他很多有趣的 Angular功能會創建出很多很棒的應用 希望本文能展示給你一些創建Angular應用的小技巧和編譯的工具使用方法 t. 這些概念也能引申到其他用戶界面設計方面, 尤其在發揮你的創造性方面提供指引.感謝你花時間閱讀本文，如有疑問歡迎指正.

petert 翻譯於 11個月前 0人頂   頂 翻譯的不錯哦!

本文中的所有譯文僅用於學習和交流目的，轉載請務必注明文章譯者、出處、和本文鏈接 我們的翻譯工作遵照 CC 協議，如果我們的工作有侵犯到您的權益，請及時聯系我們