👆🏽 👩‍🎤 🛏️ AngularJS 1.x-CodeSchoolからのコース翻訳 👩‍👩‍👦‍👦 🧕🏿 🧓🏼

この出版物は、この文脈で私にふさわしいと思われる小さな追加を加えた、元のCoodSchoolコースの翻訳です。 この出版物は、Angularに精通し始めたばかりの人を対象としています。

はじめに

AngularJSは、動的に更新されるコンテンツで1ページのWebアプリケーションを作成することを主な目的とした人気のあるJavaScriptライブラリです。このライブラリは、スロバキアのプログラマーMishka Heveryによって作成されました。MishkaHeveryは、Googleで働いており、上司からJavaScriptを学ぶタスクを受け取りました。彼は、言語を学ぶ最良の方法は、それに基づいて独自のフレームワークを作成することだと判断しました。 Angular（「Angula」のように聞こえ、文字通り「Angular」と訳される）は、 MVC （M-モデル（データ）、V-ビュー（ビュー）、C-コントローラー（コントローラー、制御レイヤーアプリケーションのロジックを提供します）。

さまざまなソースがコントローラーの目的を説明します。つまり、コントローラーはユーザーのアクションにのみ応答してモデルを変更し、これらの変更はユーザーの関与なしにインターフェースに表示されます。または、コントローラーがモデルに変更を加えるだけでなく、必要に応じて後続の処理とともにモデルから変更を受け取ることもできます。角度は2番目の概念を順守します。

Angularは外部ライブラリから独立しており、純粋なJavaScriptで記述されています（これは多くの場合、プラスと呼ばれます）。同時に、原則として、Bootstrap CSSと組み合わせて使用することをお勧めします。また、Angularは、たとえば視覚効果のためにjQueryとの共有を制限しません。原則として、プレゼンテーション（デザイン）を目的とした他のJSライブラリ（FacebookチームのReactなど）は、Angularと一緒に使用できます。

1.フレームワークの主要なエンティティであるモジュール、コントローラー、ディレクティブ、式に精通します。

Angularの基本構造はモジュールです。本質的には、相互接続された機能のコンテナです。したがって、Angularでのアプリケーションの作成は、アプリケーションの名前を示す基本モジュールの作成から始まります。まず、次のコードを含むapp.jsファイルを作成します。

var app = angular.module('AppName', [ ]);

AppNameは、アプリケーションの名前です。もちろん、それはあなたの好みに合わせて変えることができます。角括弧[]には、モジュールの操作に必要な他のモジュールへの依存関係が示されています。存在しない場合は、単に空の配列を示します。これについては後で詳しく説明します。

コントローラー[コントローラー]

さらにモジュールで、コントローラーを定義します。彼は一人ですが、多くの可能性があります。それぞれ異なる名前で呼び出します。

 app.controller('StoreController', function(){ this.data = {name: 'Gem', //     price : 3.49} //   });

ここで、HTMLコード内のいくつかの重要なステップ（モジュールをデザインに接続します）。これを行うには、index.htmlファイルを作成します。このファイルでは、選択した<html ng-app = "AppName">という名前のモジュールを使用していることを最初に宣言します。

Angularは、このHTML内で使用するモジュールを認識します。また、ライブラリ自体とファイルをアプリケーションに接続します。

 <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="app.js"></script>

式[式]

HTML内では、変数は中括弧{{}}で示されます。この変数は、最初にコントローラーで定義する必要があります。また、{{}}内では、変数だけでなく式も指定できます。例：{{'Price：' + store.data.price + '$'}}。

ブラウザはJSが定義する前に画像をロードしようとするため、IMGタグのsrc属性内では式を使用できないことに注意してください。したがって、Angularは特別なng-srcディレクティブを使用します。

 <img ng-src="{{expression}}"/>

指令

ディレクティブは、HTMLタグ内で直接使用される特別な属性であり、このディレクティブに対して定義されたロジックに従って、Angularによって処理されます。たとえば、データを表示する必要があるブロック内で、このデータを提供するコントローラーの名前（この場合はStoreController）を指定します。これは、組み込みのng-controllerディレクティブを使用して行われます。

 <div ng-controller="StoreController as store"> {{store.data.price}} //  3.49 <\div>

他の一般的に使用される組み込みディレクティブは次のとおりです。

ng-show-値がFalseの場合、HTML要素を非表示にします（display：noneを使用）。モデルの状態に応じてインターフェイス要素を削除する必要がある場合に役立ちます。たとえば、販売されている製品の場合、[購入]ボタンを自動的に削除します。

ng-hideはng-showの逆です。つまり値がTrueの場合、要素を非表示にします。

ng-repeat -foreach関数と意味が似ています。つまり HTMLブロックに含まれるタグを繰り返します。たとえば、別の製品をコントローラーに追加します。

 app.controller('StoreController', function(){ this.data = [{name: 'Gem', price : 3.49}, {name: 'Emerald', price : 17.99}] });

ここで、両方の製品の価格を表示するために、ng-repeatを使用します。

 <div ng-controller="StoreController as store"> <div ng-repeat="product in store.data"> <li>{{product.name}}: ${{product.price}} <\div> <\div>

出力では次のようになります。

宝石：3.49ドル

エメラルド：17.99ドル

Angularには、さまざまなルーチンタスクを解決するために設計された他の多くの組み込みディレクティブもあります。

2.フィルター、ディレクティブ、クリーンコード

フィルターは式およびディレクティブで使用され、データ形式を変更するように設計されています。

{{データ| フィルター[：オプション1] [：オプション2]}}

 <li>{{product.name}}: {{product.price | currency:"$":0}} // Emerald: $17 ============= = ======== === = | | | | +-     () | | | +-   () | | +-  () | +- pipe (""          ) +-

フィルターの例：

 <b>date</b> {{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}} // 12/27/2013 @ 12:50AM

 <b>uppercase</b> {{'octagon gem' | uppercase}} // OCTAGON GEM

 <b>limitTo</b> {{'My Description' | limitTo:8}} // My Descr <li ng-repeat="product in store.products | limitTo:3"> //

 <b>orderBy</b> <li ng-repeat="product in store.products | orderBy:'-price'"> //

Angularの組み込みフィルターの完全なリスト。

ここで、コードのクリーンさについて少し説明します。これを行うには、次の例を使用します。

 <section ng-init="tab = 1"> <ul class="nav nav-pills"> <li ng-class="{active:tab === 1}"> <a href ng-click="tab = 1">Description</a> </li> <li ng-class="{active:tab === 2}"> <a href ng-click="tab = 2">Specifications</a> </li> <li ng-class="{active:tab === 3}"> <a href ng-click="tab = 3">Reviews</a> </li> </ul> <div class="panel" ng-show="tab === 1"> <h4>Description </h4> <p>{{product.description}}</p> </div> </section>

ご覧のとおり、ロジックはHTMLに直接含まれていますが、これはもちろん正しくないため、コントローラーレベルに移動する必要があります。これを行うには、コントローラー関数に次のコードを追加します。

 app.controller("PanelController", function(){ //  this.tab = 1; //    this.selectTab = function(setTab) { this.tab = setTab; }; //      this.isSelected = function(checkTab){ return this.tab === checkTab; }; });

ロジックは現在コントローラー内にあり、それに応じてHTMLを変更するだけです。

 <section ng-controller="PanelController as panel"> <ul class="nav nav-pills"> <li ng-class="{ active: panel.isSelected(1) }"> <a href ng-click="panel.selectTab(1)">Description</a> </li> <li ng-class="{ active: panel.isSelected(2) }"> <a href ng-click="panel.selectTab(2)">Specifications</a> </li> <li ng-class="{ active: panel.isSelected(3) }"> <a href ng-click="panel.selectTab(3)">Reviews</a> </li> </ul> <div class="panel" ng-show="panel.isSelected(1)"> <h4>Description </h4> <p>{{product.description}}</p> </div> </section>

3.フォームの作成例のモデルとバリデーター

Angularの主な機能の1つは、いわゆる双方向データバインディングです。これは、（フォームの）ページのデータを変更するとモデル（データを格納するオブジェクト）のデータが自動的に変更され、モデルのデータを変更すると関連するデータも自動的に更新されることを意味しますページの情報。一見混乱しているように見えるので、例を使って説明する価値があります。

 <form name="reviewForm"> <blockquote> <b>Stars: {{review.stars}}</b> {{review.body}} <cite>by: {{review.author}}</cite> </blockquote> <select ng-model="review.stars"> <option value="1">1 star</option> <option value="2">2 stars</option> . . . </select> <textarea ng-model="review.body"></textarea> <label>by:</label> <input ng-model="review.author" type="email" /> <input type="submit" value="Submit" /> </form>

たとえば、<select ng-model = "review.stars">セレクターのデータを変更すると、式{{review.stars}}を使用してページに自動的に表示されます

したがって、ビューレベル（ビュー）からのデータはデータストレージレイヤー（モデル）に転送され、その逆も同様です。

また、 ng-modelディレクティブを使用してモデルデータを送信する場合、データが検証され、検証の結果に基づいて特別なクラスが設定され、その他多くの有用なイベントが発生することに注意してください。

次に、フォームをコントローラに接続し、その処理を保証します。まず、 addReviewメソッドを含むコントローラー自体を作成します。このメソッドは、フォームが送信されたときに呼び出す必要があります。

 app.controller("ReviewController", function(){ this.review = {}; //     this.addReview = function(product) { product.reviews.push(this.review); //        this.review = {}; //   }; });

次に、フォームに必要な調整を行います

 <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)"> <blockquote> <b>Stars: {{reviewCtrl.review.stars}}</b> {{reviewCtrl.review.body}} <cite>by: {{reviewCtrl.review.author}}</cite> </blockquote> <select ng-model="reviewCtrl.review.stars"> <option value="1">1 star</option> <option value="2">2 stars</option> . . . </select> <textarea ng-model="reviewCtrl.review.body"></textarea> <label>by:</label> <input ng-model="reviewCtrl.review.author" type="email" /> <input type="submit" value="Submit" /> </form>

検証を追加します。まず、 必須の引数を使用してフォームフィールドを必須としてマークし、有効なフォームのデータのみが保存されるという条件も追加します。これを行うには、 novalidateオプションをFormタグに追加すると、デフォルトのHTML検証が無効になり、 reviewForm。$ Valid条件が追加されます。これにより、 addReviewメソッドは有効なフォームでのみ呼び出されます。

 <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" novalidate ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)"> <blockquote> <b>Stars: {{reviewCtrl.review.stars}}</b> {{reviewCtrl.review.body}} <cite>by: {{reviewCtrl.review.author}}</cite> </blockquote> <select ng-model="reviewCtrl.review.stars" required> <option value="1">1 star</option> <option value="2">2 stars</option> . . . </select> <textarea ng-model="reviewCtrl.review.body" required></textarea> <label>by:</label> <input ng-model="reviewCtrl.review.author" type="email" required/> <div> reviewForm is {{reviewForm.$valid}} </div> <input type="submit" value="Submit" /> </form>

type属性を使用して指定された特定のタイプのすべてのフィールドは、正しい入力のためにチェックされます。この場合、Angularは検証状態に応じて特定のCSSクラスをフィールドに追加します。

したがって、たとえば、電子メールタイプの場合、確立されたクラスは次のように変更されます。

.ng-pristine .ng-invalid //初期状態（クリーン、無効）

.ng-dirty .ng-invalid //無効なメール（入力済み、無効）

.ng-dirty .ng-valid //有効な電子メール（記入済み、有効）

したがって、これらのクラスに適したCSSルールを設定できます。そのため、たとえば、誤って入力されたフィールドの周りに赤いフレームがあり、正しく入力されたフィールドの周りに緑色のフレームがあります。

 .ng-dirty.ng-invalid { border-color: #FA787E; //   } .ng-dirty.ng-valid { border-color: #78FA89; //   }

現在、入力フィールドでは次のバリデーターがサポートされています。

時間
日付
日時ローカル
週
月
数
テキスト
メール（最小要件）
url（最小要件の遵守）
チェックボックス
ラジオ

4.独自のディレクティブを作成する

Angularの優れた機能の1つは、カスタムディレクティブを作成できることです。言い換えれば、独自のロジックを持つ独自のHTMLタグを作成し、HTML全体を置き換えることができます。たとえば、挿入して<editor>タグを作成し、ページにテキストエディターを取得できます。

これにより、アプリケーションの構造を完全に伝える表現力豊かなコードを作成できます。そしてもちろん、これによりコードの再利用が大幅に改善されます。

原則として、HTMLコードのフラグメントの再利用に関して、Angularは自由にng-includeディレクティブを使用します。これにより、コードの一部を別のファイルに取り出すことができます。次のようになります。

 <h3 ng-include="'product-title.html'"></h3>

名前を囲む一重引用符に注意してください。それらは、ファイル名を含む変数ではなく、名前を持つ文字列であることをAngularに伝えます。

したがって、product-title.htmlファイルには、AngularがH3タグのコンテンツとして挿入するコードが含まれます。例：

 {{product.name}} <em class="pull-right">${{product.price}}</em>

ご覧のとおり、この方法で挿入されたコードには、そのようなフラグメントを一般的なコードに挿入した後に処理される式が含まれている場合があります。

ただし、独自のディレクティブの作成に戻ります。これは次のように行われます。

 app.directive('productTitle', function(){ return { restrict: 'E', // E -      Element templateUrl: 'product-title.html' }; });

これで、これをHTMLタグとして使用できます。 HTMLのproductTitleディレクティブの名前はproduct-titleに変換されることに注意してください。

 <product-title></product-title>

タグをカスタマイズする別の方法は、独自の属性を作成することです。この場合、ディレクティブを作成するときに、E（要素）の代わりに、 restrictプロパティにA（属性）を指定する必要があります。その後、HTMLタグは次のようになります。

 <h3 product-title></h3>

ウィジェットや、独自のロジックを含む他の完全に独立した要素の挿入には「restrict：E」を使用し、mixinには「restrict：A」を使用することをお勧めします。

ウィジェットに関しては、必要なすべてのロジックを含むコントローラーなしでは実行できません。 Angularでは、いくつかの方法でこれを実装できます。まず、 ng-controller属性を追加するだけです：

<product-panels ng-controller = "パネルとしてのPanelController">

ただし、ディレクティブを作成する関数内でコントローラープロパティを使用する方が適切です。

 app.directive('productPanels', function(){ return { restrict: 'E', templateUrl: 'product-panels.html', controller: function(){ ... //  }, controllerAs: 'panels' //   }; });

5.依存関係とサービス

依存関係は、作成する新しいモジュールの機能を確保するために必要なモジュールです。また、異なるモジュール間でロジックの独立した部分を分散させることにより、アプリケーションの構造を改善する方法と考えることもできます。次の例を考えてみましょう。

 //  app.js (function(){ var app = angular.module('store', []); app.controller('StoreController', function(){ . . . }); app.directive('productTitle', function(){ . . . }); app.directive('productGallery', function(){ . . . }); app.directive('productPanels', function(){ . . . }); })();

必要な柔軟性に応じて、独立したモジュールでディレクティブを作成したり、各モジュールで独自のモジュールを作成したりすることは論理的です。

ただし、この場合、アプリケーションの構造を過度に複雑にしないために、共通のモジュールを削除します。

 //  products.js (function(){ var app = angular.module('store-products', []); app.directive('productTitle', function(){ . . . }); app.directive('productGallery', function(){ . . . }); app.directive('productPanels', function(){ . . . }); })();

次に、store-productsモジュールをstoreモジュールの依存関係として指定します。

 //  app.js (function(){ var app = angular.module('store', [store-products]); app.controller('StoreController', function(){ . . . }); })();

最後のステップは、新しいファイルを忘れずに含めることです。

 //  index.html <!DOCTYPE html> <html ng-app="store"> <head> . . . </head> <body ng-controller="StoreController as store"> . . . <script src="angular.js"></script> <script src="app.js"></script> <script src="products.js"></script> </body> </html>

その結果、機能に基づいてモジュールを分割しました。

app.js-ng-appディレクティブを使用した最上位モジュールプラグインが含まれています。

products.js-製品および製品のみのすべての機能が含まれています。

また、依存関係として、Angularに組み込まれているさまざまな標準機能を提供するサービスを指定できます。組み込みサービスの名前は$で始まります。

最も人気のあるサービスの例は次のとおりです。

$ http -XMLHttpRequestを介したサーバーとの通信。

$ log-ブラウザコンソールにメッセージを記録します。

$ filter-配列内のデータをフィルターします。

... 完全なリスト。

コントローラーに依存性注入を含める例。

 app.controller('SomeController', [ '$http', '$log', function($http, $log){ var store = this; store.products = []; $http({ method: 'GET', url: '/products.json' }).success(function(data, status, headers, config) { $log.info(status); store.products = data; }) } ]);

AngularJS 1.x-CodeSchoolからのコース翻訳