今天我們將使用AngularJs和偉大的UI Router以及Angular ngAnimate module創(chuàng)建一個(gè)帶動(dòng)畫(huà)的多步表單。這項(xiàng)技術(shù)可以用在你想要簡(jiǎn)化用戶操作的大表單上。
我們看到這項(xiàng)技術(shù)已經(jīng)應(yīng)用在了許多的網(wǎng)頁(yè)上。比如購(gòu)物車，注冊(cè)表單，入職流程以及許多多步表單，讓用戶更容易在線填寫(xiě)表單。
下面我們將構(gòu)建它：
使用UI Router，它能內(nèi)嵌狀態(tài)，為每個(gè)狀態(tài)顯示不同的view,我們能讓多步表單變得相當(dāng)?shù)娜菀住?/p>
讓我們言歸正傳，開(kāi)始創(chuàng)建我們的最棒的表單！
創(chuàng)建工程
創(chuàng)建工程有個(gè)模板結(jié)構(gòu). 需要個(gè) 布局文件 , 每個(gè)表單的視圖文件, 格式文件, 以及JavaScript 文件.
下面就是文件清單，先創(chuàng)建好它們,接著在填充內(nèi)容
每個(gè)表單-____.html表示層級(jí)結(jié)構(gòu)中的html文件. 這些結(jié)構(gòu)最終創(chuàng)建我們的表單結(jié)構(gòu).
我們的布局/模板文件 index.html
我們通過(guò)建立一個(gè)主文件來(lái)引入我們所需要的所有資源以開(kāi)始我們的項(xiàng)目 ，這里我們使用 index.html 文件作為主文件
現(xiàn)在，我們加載我們所需的資源（AngularJS, ngAnimate, Ui Router, 以及其他腳本和樣式表）并且設(shè)定一個(gè) ui-view用來(lái)告知 UI Router 我們的視圖需要顯示到哪里。這里我們使用 Bootstrap 來(lái)快速應(yīng)用樣式。
<!-- index.html --><!DOCTYPE html><html><head> <meta charset="utf-8"> <!-- CSS --> <link rel="stylesheet" > <link rel="stylesheet" href="style.css"> <!-- JS --> <!-- load angular, nganimate, and ui-router --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script> <script src="http://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>
完成所有文件的引入后，讓我們進(jìn)入 app.js 開(kāi)始創(chuàng)建Angular應(yīng)用和最基本的路由配置。 注意我們是如何把Angular App (formApp) 應(yīng)用到 body 上面的。
創(chuàng)建我們的Angular App app.js
現(xiàn)在我們來(lái)創(chuàng)建應(yīng)用和路由。 在一個(gè)大型應(yīng)用中， 你肯定希望把你的Angular應(yīng)用、路由、控制器分布到它們各自的模塊中，但是為了完成我們的簡(jiǎn)單用例，我們將把它們都放到app.js這個(gè)歡樂(lè)的大家庭中。
// 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!'); }; });現(xiàn)在我們擁有了一個(gè)已經(jīng)注入了ngAnimate和ui.router的應(yīng)用。 我們同樣也建立了相應(yīng)的路由。注意我們是如何為每一個(gè)視圖區(qū)域定義 url，視圖文件(templateUrl) 和 控制器的。
form 將是我們的主視圖區(qū)域。它同樣有一個(gè)以 . 分割的子視圖區(qū)域 form.profile。這種想法能實(shí)現(xiàn)在應(yīng)用狀態(tài)發(fā)生變化時(shí)（譯者：可能是路由、queryString等），子視圖將會(huì)在主視圖區(qū)域中顯示出來(lái)。（譯者：而且可以作到僅更新子視圖區(qū)域變化，記錄子視圖區(qū)域狀態(tài)）。
我們將在下一節(jié)中進(jìn)行演示。 現(xiàn)在我們需要為form以及它的子視圖區(qū)域創(chuàng)建視圖。
表單模板視圖 form.html
讓我們從新建form.html開(kāi)始。這個(gè)文件將會(huì)在我們剩下的表單視圖文件中充當(dāng)模板的作用，正如index.html被用作整個(gè)項(xiàng)目的總體模板一樣。我們所要作的是在該文件中包含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>注意我們是如何第二次在項(xiàng)目中使用ui-view的。這就是UI Router偉大的地方：我們可以嵌套聲明和視圖。這能夠在我們開(kāi)發(fā)應(yīng)用時(shí)提供給我們非常多的靈活性。關(guān)于UI Router視圖的內(nèi)容，請(qǐng)參見(jiàn)官方文檔。
添加基于狀態(tài)的激活類
我們希望每一個(gè)狀態(tài)按鈕能夠在他們被激活時(shí)展示。為了達(dá)到這個(gè)效果，我們將會(huì)使用UI Router提供的ui-sref-active。如果ui-sref和當(dāng)前狀態(tài)一致，則會(huì)添加我們指定的類。
現(xiàn)在，你可能想知道我們的表單究竟看起來(lái)是什么樣子。讓我們打開(kāi)瀏覽器看一眼。
目前為止，我們并沒(méi)有完全按照希望的那樣得到所有的內(nèi)容，但是這是一系列偉大事情的開(kāi)端。讓我們繼續(xù)前進(jìn)，添加一點(diǎn)樣式，之后會(huì)添加一些嵌入視圖和注釋。
基礎(chǔ)Stylingstyle.css
我們將設(shè)計(jì)我們的form-container和status-buttons來(lái)是我們的表單看起來(lái)更好。
/* 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; }現(xiàn)在我們的按鈕更好看了并且更符合我們想要的了，接下來(lái)我們看下嵌套視圖。
嵌套視圖form-profile.html, form-interests.html, form-payment.html
這部分會(huì)比較簡(jiǎn)單。我們將定義不同的帶有我們需要的輸入框的視圖。并且將他們綁定到formData對(duì)象以便我們能看到輸入的數(shù)據(jù)。
下面是我們用于嵌套視圖的視圖文件：
表單概要視圖
<!-- 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>
既然我們已經(jīng)定義了這些視圖，那么當(dāng)我們?yōu)g覽表單時(shí)，他們就會(huì)顯示出來(lái)。同樣我們用下一個(gè)按鈕和ui-sref來(lái)連接每一個(gè)新視圖.
當(dāng)使用ui-sref時(shí)，你要連接到你路由中定義的state而不是URL。然后Angular會(huì)使用這個(gè)來(lái)為你構(gòu)建href。
下面是我們表單目前的每一個(gè)頁(yè)面。
為了讓我們的頁(yè)面不同尋常，讓我們加上動(dòng)畫(huà)效果。
讓我們的表單產(chǎn)生動(dòng)畫(huà)效果
因?yàn)樵陧?xiàng)目開(kāi)始的時(shí)候，我們已經(jīng)加載了ngAnimate，它已經(jīng)添加到需要?jiǎng)赢?huà)的的類上了。當(dāng)視圖進(jìn)入或退出的時(shí)候，它將自動(dòng)添加類ng-enter和ng-leave。
現(xiàn)在我們所有做的就是通過(guò)樣式形成我們最終的表單。為了理解Angular動(dòng)畫(huà)，這篇文章是一個(gè)很好的起點(diǎn)。
讓我們進(jìn)去css文件，將動(dòng)畫(huà)，并應(yīng)用到我們的表單上
/* 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); }}首先，確定視圖離開(kāi)或進(jìn)去時(shí)，表單的樣式，他們是絕對(duì)定位的。需要確認(rèn)當(dāng)視圖進(jìn)入的時(shí)候一個(gè)視圖不會(huì)放到另一個(gè)視圖的下面。
其次，應(yīng)用我們的動(dòng)畫(huà)到.ng-enter和.ng-leave類
第三，用@keyframes定義動(dòng)畫(huà)。所有這些部分組合到一起，我們的表單就有了Angular動(dòng)畫(huà)，基于狀態(tài)的UI Router和Angular數(shù)據(jù)綁定。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
