欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS 使用 UI Router 實現(xiàn)表單向?qū)?/h1>
 更新時間：2016年01月29日 11:25:07   作者：freeliver54  
這篇文章主要介紹了AngularJS 使用 UI Router 實現(xiàn)表單向?qū)?的相關資料,需要的朋友可以參考下

我們看到這項技術已經(jīng)應用在了許多的網(wǎng)頁上。比如購物車，注冊表單，入職流程以及許多多步表單，讓用戶更容易在線填寫表單。

下面我們將構建它：

 

使用UI Router，它能內(nèi)嵌狀態(tài)，為每個狀態(tài)顯示不同的view,我們能讓多步表單變得相當?shù)娜菀住?br />

為了快速的理解UI Router是怎樣工作的，看我們的文章：AngularJS使用UI-Router路由

讓我們言歸正傳，開始創(chuàng)建我們的最棒的表單！

創(chuàng)建工程

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

下面就是文件清單，先創(chuàng)建好它們,接著在填充內(nèi)容

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

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

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

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

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

<!-- 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>

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

創(chuàng)建我們的Angular App app.js

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

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

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

我們將在下一節(jié)中進行演示。 現(xiàn)在我們需要為form以及它的子視圖區(qū)域創(chuàng)建視圖。

讓我們從新建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偉大的地方：我們可以嵌套聲明和視圖。這能夠在我們開發(fā)應用時提供給我們非常多的靈活性。關于UI Router視圖的內(nèi)容，請參見 官方文檔。

添加基于狀態(tài)的激活類

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

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

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

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

基礎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; }

現(xiàn)在我們的按鈕更好看了并且更符合我們想要的了，接下來我們看下嵌套視圖。

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

這部分會比較簡單。我們將定義不同的帶有我們需要的輸入框的視圖。并且將他們綁定到formData對象以便我們能看到輸入的數(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)定義了這些視圖，那么當我們?yōu)g覽表單時，他們就會顯示出來。同樣我們用下一個按鈕和ui-sref來連接每一個新視圖.

當使用ui-sref時，你要連接到你路由中定義的state而不是URL。然后Angular會使用這個來為你構建href。

下面是我們表單目前的每一個頁面。

 

為了讓我們的頁面不同尋常，讓我們加上動畫效果。

讓我們的表單產(chǎn)生動畫效果

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

現(xiàn)在我們所有做的就是通過樣式形成我們最終的表單。為了理解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動畫，基于狀態(tài)的UI Router和Angular數(shù)據(jù)綁定。

以上所述是小編給大家分享的AngularJS 使用 UI Router 實現(xiàn)表單向?qū)У南嚓P知識，希望對大家有所幫助。

相關文章

最新評論