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

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

今日我々は、AngularJsと素晴らしいUIルータとAngular ngAnimateモジュールを使用して、アニメーションのマルチステップフォームを作成します 。 この手法は、ユーザーの操作を簡素化したい場合に大きなフォームで使用できます。

この技術はすでに多くのWebページに適用されています。 たとえば、ショッピングカート、登録フォーム、業務プロセス、および多くのマルチステップフォームでは、ユーザーがオンラインでフォームに記入することが容易になります。

以下はそれを構築します:

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202805-5b4a5cd502ad6.jpg(1064×629)

UIルータを使用すると、状態を埋め込み、各状態ごとに異なるビューを表示することができ、多段階のフォームを簡単に作成できます。

ビジネスに立ち寄り、ベストフォームを作成しましょう!

プロジェクトを作成する

作成プロジェクトにはテンプレート構造があり、レイアウトファイル、各フォームのビューファイル、フォーマットファイル、および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ルータにUIビューを設定します。 ここでは、ブートストラップを使用してスタイルを素早く適用します。


<!- 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)を本体にどのように適用したかに注目してください。

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

次のセクションで説明します。 これで、フォームとそのサブビューエリアのビューを作成する必要があります。
フォームテンプレートビュー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>
{{ formData }}
</pre>
</div>
</div>

プロジェクトでui-viewを2度目にどのように使用したかに注目してください。 これは、UIルーターが優れている場所です。宣言とビューを入れ子にすることができます。 これにより、アプリケーションを開発する際に多くの柔軟性がもたらされます。 UIルーターの内容については、 公式文書を参照してください。

状態ベースのアクティベーションクラスを追加する

各ステータスボタンは、起動時に表示する必要があります。 この効果を得るために、UIルータが提供するui-sref-activeを使用します。 ui-srefが現在の状態と一致する場合、指定したクラスが追加されます。

今、私たちのフォームがどのように見えるかを知りたいかもしれません。 ブラウザを見てみましょう。

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202805-5b4a5cd5882f2.png(613×307)

これまでのところ、私たちはすべてのコンテンツを私たちが望んでいたものと正確に一致させることはできませんでしたが、これは一連の素晴らしいことの始まりです。 次に、スタイルを少し追加し、埋め込みビューとコメントを追加してみましょう。

Basic Stylingstyle.css

私たちは、フォームコンテナとステータスボタンを設計して、フォームをより見栄え良くします。


/* 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?</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を使用する場合は、URLではなくルートで定義された状態に接続する必要があります。 Angularはこれを使用してhrefを作成します。

以下は、各フォームの現在のページです。

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202805-5b4a5cd5a95cf.jpg(450×525)

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202805-5b4a5cd5bc36e.jpg(450×525)

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202805-5b4a5cd5de3de.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クラスに適用します。

第3に、@keyframesでアニメーションを定義します。 これらの部品はすべて一緒になっており、私たちのフォームには角度アニメーション、国家ベースのUIルーター、角度データバインディングがあります。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ