我們看到這項技術已經應用在了許多的網頁上。比如購物車，註冊表單，入職流程以及許多多步表單，讓使用者更容易線上填寫表單。
下面我們將構建它：
使用UI Router，它能內嵌狀態，為每個狀態顯示不同的view,我們能讓多步表單變得相當的容易。
為了快速的理解UI Router是怎樣工作的，看我們的文章：AngularJS使用UI-Router路由
讓我們言歸正傳，開始建立我們的最棒的表單！
建立工程
建立工程有個模板結構. 需要個 布局檔案 , 每個表單的視圖檔案, 格式檔案, 以及JavaScript 檔案.
下面就是檔案清單，先建立好它們,接著在填充內容
- index.html- form.html- form-profile.html- form-interests.html- form-payment.html- app.js- style.css
每個表單-____.html展示層級結構中的html檔案. 這些結構最終建立我們的表單結構.
我們的布局/模板檔案 index.html
我們通過建立一個主檔案來引入我們所需要的所有資源以開始我們的項目 ，這裡我們使用 index.html 檔案作為主檔案
現在，我們載入我們所需的資源（AngularJS, ngAnimate, Ui Router, 以及其他指令碼和樣式表）並且設定一個 ui-view用來告知 UI Router 我們的視圖需要顯示到哪裡。這裡我們使用 Bootstrap 來快速應用樣式。
<!-- 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 上面的。
建立我們的Angular App app.js
現在我們來建立應用和路由。 在一個大型應用中， 你肯定希望把你的Angular應用、路由、控制器分布到它們各自的模組中，但是為了完成我們的簡單用例，我們將把它們都放到app.js這個歡樂的大家庭中。
現在我們擁有了一個已經注入了ngAnimate和ui.router的應用。 我們同樣也建立了相應的路由。注意我們是如何為每一個視圖地區定義 url，視圖檔案(templateUrl) 和 控制器的。
form 將是我們的主視圖地區。它同樣有一個以 . 分割的子視圖地區 form.profile。這種想法能實現在應用狀態發生變化時（譯者：可能是路由、queryString等），子視圖將會在主視圖地區中顯示出來。（譯者：而且可以作到僅更新子視圖地區變化，記錄子視圖地區狀態）。
我們將在下一節中進行示範。 現在我們需要為form以及它的子視圖地區建立視圖。
讓我們從建立form.html開始。這個檔案將會在我們剩下的表單視圖檔案中充當模板的作用，正如index.html被用作整個項目的總體模板一樣。我們所要作的是在該檔案中包含ui-view，這樣可以使嵌套聲明知道該在何處注入他們的視圖。
<!-- 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表單驗證。
現在，你可能想知道我們的表單究竟看起來是什麼樣子。讓我們開啟瀏覽器看一眼。
目前為止，我們並沒有完全按照希望的那樣得到所有的內容，但是這是一系列偉大事情的開端。讓我們繼續前進，添加一點樣式，之後會添加一些嵌入視圖和注釋。
基礎Stylingstyle.css
我們將設計我們的form-container和status-buttons來是我們的表單看起來更好。
/* 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對象以便我們能看到輸入的資料。
下面是我們用於嵌套視圖的視圖檔案：
表單概要視圖
<!-- 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>
表單興趣視圖
<!-- 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>
表單支付視圖
<!-- 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來串連每一個新視圖.
當使用ui-sref時，你要串連到你路由中定義的state而不是URL。然後Angular會使用這個來為你構建href。
下面是我們表單目前的每一個頁面。
為了讓我們的頁面不同尋常，讓我們加上動畫效果。
讓我們的表單產生動畫效果
因為在項目開始的時候，我們已經載入了ngAnimate，它已經添加到需要動畫的的類上了。當視圖進入或退出的時候，它將自動添加類ng-enter和ng-leave。
現在我們所有做的就是通過樣式形成我們最終的表單。為了理解Angular動畫，這篇文章是一個很好的起點。
讓我們進去css檔案，將動畫，並應用到我們的表單上
/* 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.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; }/* enter animation */#form-views.ng-enter { -webkit-animation:slideInRight 0.5s both ease; -moz-animation:slideInRight 0.5s both ease; animation:slideInRight 0.5s both ease; }/* leave animation */#form-views.ng-leave { -webkit-animation:slideOutLeft 0.5s both ease; -moz-animation:slideOutLeft 0.5s both ease; animation:slideOutLeft 0.5s 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資料繫結。
以上所述是小編給大家分享的AngularJS 使用 UI Router 實現表單嚮導的相關知識，希望對大家有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
