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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:53 PM

angularjs形状

今日は、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 id="Let-s-Be-Friends">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 id="Thanks-For-Your-Money">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 までご連絡ください。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Dreamweaver Mac版

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

WebStorm Mac版

便利なJavaScript開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。