内容
1 AngularJSの概要
2 JavaScriptフレームワークのエンジニアリングコンセプト
3モジュール
4 $スコープの理解
5つのコントローラー
6サービスと工場
7 Angularコアを使用したテンプレート
8つのディレクティブ（コア）
9ディレクティブ（カスタム）
10個のフィルター（コア）
11フィルター（カスタム）
12 $ routeProviderを使用した動的ルーティング
13フォーム検証
14 $ httpおよび$リソースとのサーバー通信
1 AngularJSの概要
Angularは、高品質のJavaScript Webクライアントアプリケーションを開発するためのMVWフレームワークです。 Googleによって作成および保守され、Webの将来、どのような新機能および標準が準備されているかを確認できます。
MVWは、Model-View-Whatever（モデル-ビュー-何でも）、つまり、アプリケーション開発時の設計パターンの選択における柔軟性を表します。 モデルMVC（Model-View-Controller）またはMVVM（Model-View-ViewModel）を選択できます。
このチュートリアルは、AngularJS、その概念、およびAPIを学習して、優れたWebアプリケーションを現代的な方法で作成するための出発点として作成されました。
AngularJSは、HTMLを改善するためのフレームワークとして位置付けられています。 彼は、JavaScriptとサーバー側の両方のさまざまなプログラミング言語から概念をコンパイルし、HTMLから何か動的なものを作成しています。 アプリケーション開発へのデータベースベースのアプローチを採用しています。 モデル、DOMを更新したり、他の時間のかかる操作（ブラウザーエラーの修正など）を行う必要はありません。 データに焦点を当て、データがHTMLを処理し、アプリケーションのプログラミングのみを行います。
JavaScriptフレームワークのエンジニアリングの概念
データやその他のエンジニアリングの概念を扱うというAngularJSの立場は、Backbone.jsやEmber.jsなどのフレームワークとは異なります。 私たちはすでに知っているHTMLに満足しており、Angularは自分でHTMLを改善しています。 Angularは、データと通信するために、純粋なJavaScriptオブジェクトに存在するモデルへの変更でDOMを更新します。 モデルが更新されると、Angularはアプリケーションの現在の状態を含むオブジェクトを更新します。
2.1 MVCおよびMVVM
静的サイトの作成に慣れている場合、ページに必要なデータを入力し、HTMLの同様の部分を何度も繰り返す場合、HTMLを1つずつ手動で作成するプロセスに精通しています。 これらは、格子列、ナビゲーションの構造、リンクまたは画像のリストなどです。 1つの小さな詳細が変更されると、テンプレート全体を更新し、その後のすべての使用を更新する必要があります。 また、ナビゲーション項目ごとに同じコードをコピーする必要があります。
椅子につかまって-Angularには職務と動的なHTMLが分離されています。 つまり、データはモデルに存在し、HTMLはビューに変換される小さなテンプレートの形で存在し、コントローラーを使用してこれら2つの概念を接続し、モデルとビューの変更をサポートします。 つまり、ナビゲーションは動的に表示され、1つのリストアイテムから作成され、モデルの各アイテムに対して自動的に繰り返されます。 これは簡略化された概念です。後でテンプレートについて詳しく説明します。
MVCとMVVMの違いは、MVVMがインターフェイス開発専用に設計されていることです。 ビューはプレゼンテーションレイヤーで構成され、ViewModelにはプレゼンテーションロジックが含まれ、Modelにはビジネスロジックとデータが含まれます。 MVVMは、AngularJSなどのフレームワークが成功する双方向のデータ通信を促進するように設計されました。 近年、Angularが傾いているように、MVVMパスに焦点を当てます。
2.2双方向データ通信
双方向データ通信は、モデルレイヤーとビューレイヤー間の同期を提供する非常に単純な概念です。 モデルへの変更はビューに転送され、ビューへの変更は自動的にモデルに反映されます。 したがって、モデルはアプリケーションの状態に関するデータの実際のソースになります。
Angularは、単純なJavaScriptオブジェクトを使用してモデルとビューを同期し、それらのいずれかを簡単に楽しく更新できるようにします。 AngularはデータをJSONに変換し、RESTメソッドと最適に通信します。 このアプローチを使用すると、アプリケーションの状態全体がブラウザに保存され、サーバーから断片的に送信されることはなく、状態が破損したり失われたりする心配がないため、フロントエンドアプリケーションを構築するのが簡単です。
これらの値は、制御パターンとして使用可能な角度式を介してバインドします。 ng-modelと呼ばれる属性を介してモデルをバインドすることもできます。 Angularは、AngularのコアにアクセスするさまざまなAPIにその属性を使用します。
2.3依存性注入（DI）
DIは、コンポーネントが依存関係と通信する方法を定義するプログラム開発テンプレートです。 インジェクションとは、依存オブジェクトを依存オブジェクトに転送することであり、これらの依存関係はしばしばサービスと呼ばれます。
AngularJSでは、関数引数を巧妙に使用して必要な依存関係を宣言し、Angularはそれらを渡します。 依存関係を渡すのを忘れたが、必要な場所で参照した場合、サービスは定義されず、結果としてAngular内でコンパイルエラーが発生します。 ただし、Angularはエラーをスローするので、デバッグは非常に簡単です。心配しないでください。
2.4シングルページアプリケーション（SPA）、状態管理、およびAjax（HTTP）
単一ページアプリケーション（SPA）では、必要なすべてのコード（HTML、CSS、およびJavaScript）が1回のページロードで呼び出されるか、必要なリソースが動的に接続され、通常はユーザーのアクションに応じて必要に応じてページに追加されます。 HTML5の最新のテクノロジーにより、1つのアプリケーションが複数の論理ページで動作できるようになりますが、ページは操作中にリロードせず、制御を別のページに転送しません。 SPAとの相互作用は、多くの場合、サーバーとのバックグラウンド通信を通じて発生します。
古いアプリケーションでは、プログラムの状態がサーバーに保存されたとき、ユーザーが見るものとサーバーに保存されたものの間に違いがありました。 また、すべてのデータがHTMLテンプレートに保存され、動的ではないため、モデルにはアプリケーションの状態がありませんでした。 サーバーが静的テンプレートを準備し、ユーザーがそこに情報を入力し、ブラウザーがそれを送り返した後、ページがリロードされ、バックエンドが状態を更新しました。 保存されていない状態は失われ、ブラウザはページを再度更新した後にすべてのデータをダウンロードする必要がありました。
時代は変わり、ブラウザはアプリケーションの状態を保存し、複雑なロジックとフレームワークが人気を集めています。 AngularJSは状態をブラウザに保存し、必要に応じて、GET、POST、PUT、およびDELETEメソッドを使用してAjax（HTTP）経由で変更を渡します。 美しさは、サーバーがフロントエンドから独立できることと、フロントエンドがサーバーから独立できることです。 同じサーバーは、完全に異なるフロントエンドを備えたモバイルアプリケーションで動作できます。 これにより、柔軟性が得られます。バックエンドでは、JSONデータをあらゆるサーバーサイド言語で使いやすいように処理できるためです。
2.5アプリケーション構造
AngularにはさまざまなAPIがありますが、アプリケーションの構造は通常同じであるため、ほとんどすべてのアプリケーションは同様の方法で構築され、開発者は簡単にプロジェクトに参加できます。 また、予測可能なAPIとデバッグプロセスを提供し、開発時間とラピッドプロトタイピングを削減します。 Angularは、開発とテストの両方で最も簡単な「テスト容易性」を中心に構築されています。
勉強しましょう。
3モジュール
すべてのアプリケーションはモジュールを介して作成されます。 モジュールは他のモジュールに依存する場合と、単一の場合があります。 モジュールは、アプリケーションのさまざまなセクションのコンテナとして機能するため、コードを再利用できます。 モジュールを作成するには、グローバルオブジェクト、フレームワークのネームスペース、およびモジュールメソッドが使用されます。
3.1セッター
アプリケーションには1つのアプリモジュールがあります。
angular.module('app', []);
2番目の引数は[]です。通常、この配列には、接続する必要があるモジュールの依存関係が含まれます。 モジュールは他のモジュールに依存する場合があり、他のモジュールも依存関係を持つ場合があります。 この場合、配列は空です。
3.2ゲッター
コントローラ、ディレクティブ、サービス、およびその他の機能を作成するには、既存のモジュールを参照する必要があります。 構文にはわずかな違いがあります-2番目の引数は使用しません。
angular.module('app');
3.3モジュールの操作
モジュールは、変数を介して保存および呼び出すことができます。 モジュールを変数に保存する例を次に示します。
var app = angular.module('app', []);
これで、app変数を使用してアプリケーションをビルドできます。
3.4 HTMLブートストラップ
アプリケーションがDOMのどこに配置されているかを説明するには、通常は
<html>
要素であるため、ng-app属性をモジュールに関連付ける必要があります。 したがって、Angularにアプリケーションをロードする場所を伝えます。
<html ng-app="app"> <head></head> <body></body> </html>
JavaScriptファイルを非同期でロードする場合は、angular.bootstrap（document.documentElement、['app']）;を使用して手動でアプリケーションをロードする必要があります。
4 $スコープの理解
プログラミングの基本概念の1つはスコープです。 Angularでは、スコープは双方向のデータ通信ループを可能にし、アプリケーションの状態を保持する主要なオブジェクトの1つです。 $スコープは非常にトリッキーなオブジェクトで、データと値にアクセスできるだけでなく、AngularがアプリケーションをレンダリングするときにDOMでそのデータを提供します。
$スコープは、同期されたデータを保存するJavaScriptとDOMの間の自動ブリッジです。 これにより、HTML構文を使用し、Angularが対応する$スコープ値をレンダリングするときに、テンプレートの操作が簡単になります。 これにより、JavaScriptとDOMの間に接続が作成されます。 一般的に、$スコープはViewModelの役割を果たします。
$スコープは、コントローラー内でのみ使用されます。 そこで、コントローラーデータをビューにバインドします。 コントローラでデータを宣言する方法の例を次に示します。
$scope.someValue = 'Hello';
これをDOMに表示するには、コントローラーをHTMLにアタッチし、Angularに値を挿入する場所を指示する必要があります。
<div ng-controller="AppCtrl"> {{ someValue }} </div>
Angularスコープの概念を次に示します。これは、字句スコープに関してJavaScriptのいくつかのルールに従います。 Controllerがアタッチされている要素の外側では、データはスコープ外です-スコープ外で参照した場合、変数がスコープ外になるのと同じです。
任意のJavaScriptタイプを$スコープにバインドできます。 したがって、サーバーと通信するサービスからデータを取得し、Viewプレゼンテーションレイヤーに転送します。
コントローラーとデータリンクを作成すればするほど、より多くのスコープが表示されます。 階層を理解するのに費用はかかりません-$ rootScope変数はここで役立ちます。
パート2