使用AngularJS實作表單精靈的方法_AngularJS-js教程-PHP中文網

使用AngularJS實作表單精靈的方法_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

發布： 2016-05-16 15:53:43

原創

1553 人瀏覽過

今天我們將使用AngularJs和偉大的UI Router以及Angular ngAnimate module建立一個帶有動畫的多步驟表單。這項技術可以用在你想要簡化使用者操作的大表單上。

我們看到這項技術已經應用在許多的網頁上了。例如購物車，註冊表單，入職流程以及許多多步驟表單，讓使用者更容易在線上填寫表單。

下面我們將建構它：

2015619120033761.jpg (1064×629)

使用UI Router，它能內嵌狀態，為每個狀態顯示不同的view,我們能讓多步驟表單變得相當的容易。

讓我們言歸正傳，開始創建我們的最棒的表單！

建立工程

建立工程有個範本結構. 需要個版面配置檔案 , 每個表單的檢視檔, 格式檔案, 以及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這個歡樂的大家庭中。

// 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以及它的子視圖區域建立視圖。
表單範本檢視 form.html

讓我們從新建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 class="brush:php;toolbar:false">
    {{ formData }}

登入後複製