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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:53 PM

angularjs 表單

今天我們將使用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 }}

登入後複製

注意我们是如何第二次在项目中使用ui-view的。这就是UI Router伟大的地方：我们可以嵌套声明和视图。这能够在我们开发应用时提供给我们非常多的灵活性。关于UI Router视图的内容，请参见官方文档。

添加基于状态的激活类

我们希望每一个状态按钮能够在他们被激活时展示。为了达到这个效果，我们将会使用UI Router提供的ui-sref-active。如果ui-sref和当前状态一致，则会添加我们指定的类。

现在，你可能想知道我们的表单究竟看起来是什么样子。让我们打开浏览器看一眼。

2015619120108560.png (613×307)

目前为止，我们并没有完全按照希望的那样得到所有的内容，但是这是一系列伟大事情的开端。让我们继续前进，添加一点样式，之后会添加一些嵌入视图和注释。

基础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&#63;</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。

下面是我们表单目前的每一个页面。

2015619120129718.jpg (450×525)

2015619120150291.jpg (450×525)

2015619120206904.jpg (450×525)

为了让我们的页面不同寻常，让我们加上动画效果。

让我们的表单产生动画效果

因为在项目开始的时候，我们已经加载了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数据绑定。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7807

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

如何實現PHP表單提交後的頁面跳轉 Aug 12, 2023 am 11:30 AM

如何實現PHP表單提交後的頁面跳轉【簡介】在Web開發中，表單的提交是一項常見的功能需求。當使用者填寫完表單並點擊提交按鈕後，通常需要將表單資料傳送至伺服器進行處理，並在處理完後將使用者重新導向至另一個頁面。本文將介紹如何使用PHP來實現表單提交後的頁面跳躍。【步驟一：HTML表單】首先，我們需要在HTML頁面中撰寫一個包含表單的頁面，以便使用者填寫需要提交的資料。

如何使用 JavaScript 實作表單的輸入框內容自動提示功能？ Oct 20, 2023 pm 04:01 PM

如何使用JavaScript實作表單的輸入框內容自動提示功能？簡介：表單的輸入框內容自動提示功能在網頁應用程式中非常常見，它可以幫助使用者快速輸入正確的內容。本文將介紹如何使用JavaScript實作此功能，並提供具體的程式碼範例。在建立HTML結構首先，我們需要建立一個包含輸入框和自動提示清單的HTML結構。可以使用以下程式碼：<!DOCTYP

如何處理PHP表單中的使用者權限管理 Aug 10, 2023 pm 01:06 PM

如何處理PHP表單中的使用者權限管理隨著Web應用程式的不斷發展，使用者權限管理是重要的功能之一。使用者權限管理可以控制使用者在應用程式中的操作權限，確保資料的安全性和合法性。在PHP表單中，使用者權限管理可以透過一些簡單的程式碼來實現。本文將介紹如何處理PHP表單中的使用者權限管理，並給予對應的程式碼範例。一、使用者角色的定義與管理首先，將使用者角色定義與管理是使用者權

如何使用 JavaScript 實作表單的輸入框內容即時校驗功能？ Oct 18, 2023 am 08:47 AM

如何使用JavaScript實作表單的輸入框內容即時校驗功能？在許多網頁應用程式中，表單是使用者與系統之間最常用的互動方式。然而，使用者輸入的內容往往需要進行有效性校驗，以確保資料的準確性和完整性。在這篇文章中，我們將學習如何使用JavaScript實作表單的輸入框內容即時校驗功能，並提供具體的程式碼範例。在建立表單首先，我們需要在HTML中建立一個簡單的表

如何使用HTML、CSS和jQuery實現表單自動保存的進階功能 Oct 28, 2023 am 08:20 AM

如何使用HTML、CSS和jQuery實現表單自動保存的高級功能在現代網頁應用中，表單是非常常見的元素之一。當使用者在輸入表單資料時，如何能夠實現自動儲存的功能，不僅可以提高使用者的使用體驗，也能確保資料的安全性。本文將介紹如何使用HTML、CSS和jQuery來實作表單的自動儲存功能，並附上具體的程式碼範例。一、HTML表單的結構建構我們先來建立一個簡單的HT

PHP表單處理：表單資料查詢與篩選 Aug 07, 2023 pm 06:17 PM

PHP表單處理：表單資料查詢與篩選引言在網路開發中，表單是一種重要的互動方式，使用者可以透過表單向伺服器提交資料並進行進一步的處理。本文將介紹如何使用PHP處理表單資料的查詢與篩選功能。表單的設計與提交首先，我們需要設計一個包含查詢與篩選功能的表單。常見的表單元素包括輸入框、下拉清單、單選框、複選框等，根據具體需求進行設計。用戶在提交表單時，會將資料以POS

2022年最新5款的angularjs教學從入門到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。

Laravel表單類別使用技巧：提高效率的方法 Mar 11, 2024 pm 12:51 PM

在編寫網站或應用程式時，表單是不可或缺的一部分。 Laravel作為一個流行的PHP框架，提供了豐富而強大的表單類，使得表單處理變得更加簡單和高效。本文將介紹一些Laravel表單類別的使用技巧，幫助你提升開發效率。下面透過具體的程式碼範例來詳細講解。建立表單要在Laravel中建立表單，首先需要在檢視中編寫對應的HTML表單。在處理表單時，可以使用Laravel

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題