AngularJS_AngularJSを使用してフォームウィザードを実装する方法-jsチュートリアル-php.cn

AngularJS_AngularJSを使用してフォームウィザードを実装する方法

WBOY

リリース： 2016-05-16 15:53:43

オリジナル

1483 人が閲覧しました

今日は、AngularJs、優れた UI Router と Angular ngAnimate モジュールを使用して、アニメーション付きのマルチステップフォームを作成します。この手法は、ユーザーの操作を簡素化したい大規模なフォームで使用できます。

このテクノロジーが多くの Web ページに適用されていることがわかりました。ショッピングカート、登録フォーム、オンボーディングフロー、多くの複数ステップのフォームなどにより、ユーザーはオンラインでフォームに簡単に記入できるようになります。

ここでそれを構築します:

2015619120033761.jpg (1064×629)

状態を埋め込み、状態ごとに異なるビューを表示できる 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 Router に伝えるために ui ビューを設定します。ここでは、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 アプリ (formApp) を本体にどのように適用したかに注目してください。

Angular アプリ 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.profile もあります。このアイデアは、アプリケーションの状態が変化すると (トランスレーター: ルーティング、クエリ文字列など)、サブビューがメインビュー領域に表示されます。 (翻訳者: そして、サブビューエリアの変更を更新し、サブビューエリアのステータスを記録することしかできません。)

これについては次のセクションで説明します。次に、フォームとそのサブビュー領域のビューを作成する必要があります。
フォームテンプレートビュー 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 }}

ログイン後にコピー

/* 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; }

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

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

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

/* 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); } }