Angularjsとは何ですか？
AngularJSは、動的なWebアプリケーション向けに設計された構造フレームワークです。 HTMLをテンプレート言語として使用することができ、HTML構文を拡張することにより、アプリケーションコンポーネントをより明確かつ簡潔に構築できます。その革新は、データのバインディングと依存関係の注入を使用しているため、多くのコードを書く必要性がなくなります。これらはすべて、ブラウザー側のJavaScriptを介して実装されており、サーバー側のテクノロジーと完全に組み合わせることもできます。
AngularJSは、ビルディングアプリケーションにおけるHTMLの欠点を克服するように設計されています。 HTMLは、静的テキストディスプレイ用に設計された優れた宣言言語ですが、Webアプリケーションを構築する場合は弱くなります。だから私はブラウザに自分がやりたいことをさせるためにいくつかの仕事をしました（あなたはそれが少しトリックだと思うかもしれません）。 formatdate
通常、次のテクノロジーを使用して、動的アプリケーションの構築における静的Webテクノロジーの欠点を解決します。
1。クラスライブラリ - クラスライブラリは、Webアプリケーションの作成に役立つ機能のコレクションです。あなたを導くのはあなたのコードであり、クラスライブラリをいつ使用するかを決定するのはあなた次第です。クラスライブラリには、jqueryなどが含まれます。
2。フレームワーク - フレームワークは、特別な実装されたWebアプリケーションであり、特定のビジネスロジックを入力するだけです。フレームワークはここで主導的な役割を果たし、特定のアプリケーションロジックに基づいてコードを呼び出します。フレームには、ノックアウト、スプラウトコアなどが含まれます。
AngularJSは、別のアプローチを使用しており、これは、アプリケーションの構築におけるHTML自体の欠点を補おうとします。 AngularJSを使用すると、識別子を呼び出す構造を使用して、ブラウザが新しい構文を認識できます。例えば：
1。データバインディングにダブルブレース{{}}構文を使用します。
2。DOM制御構造を使用して、DOMフラグメントを反復または非表示にします。
3。フォームをサポートし、フォーム検証。
4.論理コードを関連DOM要素に関連付けることができます。
5。HTMLを再利用可能なコンポーネントに分割できます。
エンドツーエンドソリューション
AngularJSは、Webアプリケーションでエンドツーエンドのソリューションになろうとしています。これは、Webアプリケーションのほんの一部ではなく、エンドツーエンドの完全なソリューションであることを意味します。これにより、CRUDを備えたアプリケーションを構築するときにAngularJSが「頑固」に表示されます（CREATE、クエリ取得、更新、DELETE DELETE）（元のテキストは意見があります。つまり、他の方法はありません）。しかし、その「頑固さ」にもかかわらず、それはまだその「頑固さ」がアプリケーションを構築する出発点にあることを保証し、それでも柔軟に変えることができます。 AngularJSの優れた機能のいくつかは次のとおりです。
1. CRUDアプリケーションの構築に使用できるすべての可能なコンテンツには、データバインディング、基本的なテンプレート識別子、フォーム検証、ルーティング、ディープリンク、コンポーネントの再利用、および依存関係インジェクションが含まれます。
2。テストの側面には、単体テスト、エンドツーエンドのテスト、シミュレーション、自動テストフレームワークが含まれます。
3。ディレクトリレイアウトとテストスクリプトを開始点として使用したシードアプリケーション。
Angularjsの可愛らしさ
AngularJSは、開発者により高いレベルの抽象化を提示することにより、アプリケーション開発を簡素化します。他の抽象的なテクニックと同様に、これも柔軟性を失います。言い換えれば、すべてのアプリケーションがAngularJSでの使用に適しているわけではありません。 AngularJは、主にCRUDアプリケーションの構築を考慮しています。幸いなことに、Webアプリケーションの少なくとも90％がCRUDアプリケーションです。しかし、Angularjsを使用して構築するのに適したものを理解するには、AngularJを使用して構築するのに適していないものを理解する必要があります。
ゲームやグラフィカルインターフェイスエディターなど、頻繁に複雑なDOM操作を備えたアプリケーションは、CRUDアプリケーションとは大きく異なります。それらは、AngularJを使用して構築するのに適していません。このようなjQueryのような軽い、よりシンプルなテクニックを使用する方が良いかもしれません。
単純なAngularJSインスタンス
以下は、フォームを含む典型的なCRUDアプリケーションです。フォーム値は最初に検証され、次にローカルスタイルでフォーマットされる合計値を計算するために使用されます。開発者の一般的な概念は次のとおりです。最初に理解する必要があります。
1。データモデル（データモデル）をビュー（UI）に関連付けます。
2。ユーザー入力を書き、読み取り、検証します。
3.モデルに基づいて新しい値を計算します。
4.出力形式をローカライズします。
index.html：
コードコピーは次のとおりです。
<！doctype html>
<html ng-app>
<head>
<スクリプトsrc = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<スクリプトsrc = "script.js"> </script>
</head>
<body>
<div ng-controller = "invoicecntl">
<b>請求書：</b>
<br>
<br>
<表>
<tr> <td>数量</td> <td>コスト</td> </tr>
<tr>
<td> <入力型= "integer" min = "0" ng-model = "qty" reby> </td>
<td> <入力タイプ= "number" ng-model = "cost"必須> </td>
</tr>
</table>
<hr>
<b>合計：</b> {{qty * cost |通貨}}
</div>
</body>
</html>
script.js：
コードコピーは次のとおりです。
関数InvoiceCntl（$ scope）{
$ scope.qty = 1;
$ scope.cost = 19.95;
}
エンドツーエンドテスト：
コードコピーは次のとおりです。
それ（ '角度結合を示す必要があります'、function（）{
期待（binding（ 'qty * cost'））。toequal（ '$ 19.95'）;
input（ 'qty'）。enter（ '2'）;
input（ 'cost'）。enter（ '5.00'）;
期待（binding（ 'qty * cost'））。toequal（ '$ 10.00'）;
}）;
関数InvoiceCntl（$ scope）{$ scope.qty = 1; $ scope.cost = 19.95;}
ランニング効果：
コードコピーは次のとおりです。
請求書：
数量コスト
合計：{{qty * cost |通貨}}
上記の例を試してみてください。この例がどのように連携するかを見てみましょう。 「タグでは、「ng-app」識別子を使用して、これが角度アプリケーションであることを示します。この「ng-app」識別子により、Angularjs **はアプリケーションを自動的に初期化します。 ``タグを使用してangularjsスクリプトをロードします：<script src = "http://code.angularjs.org/angular-1.0.min.js">
ng-modelプロパティを<input>タグに設定することにより、angularjsは双方向でデータを自動的にバインドします。また、いくつかの簡単なデータ検証を同時に実施しました。
コードコピーは次のとおりです。
数量：<input type = "integer" min = "0" ng-model = "qty"必須>
コスト：<入力型= "number" ng-model = "cost"必須>
この入力ボックスのウィジェットは普通に見えますが、次のポイントを認識しても普通ではありません。
1.ページがロードされると、AngularJSは、ウィジェットで宣言されたモデル名（数量、コスト）に従って同じ名前の変数を生成します。これらの変数は、MVC設計パターンのM（モデル）と考えることができます。
2。上記のウィジェットの入力には特別な能力があることに注意してください。データを入力しない場合、または入力データが無効である場合、この入力ボックスは自動的に赤くなります。入力ボックスのこの新しい機能により、開発者はCRUDアプリケーションで共通のフィールド検証関数を簡単に実装できます。
最後に、神秘的な二重ブレースを見ることができます。
コードコピーは次のとおりです。
合計：{{qty * cost |通貨}}
この{{expression}}タグはAngularJSデータバインディングです。その中の式は、式とフィルター（{{式|フィルター}}）の組み合わせである可能性があります。 AngularJSは、入力データと出力データをフォーマットするフィルターを提供します。
上記の例では、{{{}}の式は、AngularJSに入力ボックスから取得したデータを掛け、乗算結果をローカル通貨スタイルにフォーマットし、ページに出力するように依頼します。
AngularJSメソッドを呼び出したり、フレームワークを使用したりするなどの特定のロジックを書くことも書いていないことに言及する価値がありますが、上記の機能は完了しています。この実装の背後にあるのは、ブラウザが静的ページを生成するために以前よりも多くの作業を行っており、動的なWebアプリケーションのニーズを満たすことができることです。 AngularJSは、動的Webアプリケーションの開発しきい値を下げて、クラスライブラリやフレームワークが必要ないポイントに引き下げます。
Angularjsの「Zen Tao（概念）」
Angularは、ビルディング（UI）とソフトウェアロジックの作成の場合、宣言コードは命令コードよりもはるかに優れていると考えていますが、命令コードはビジネスロジックを表現するのに非常に適しています。
1. DOM操作とアプリケーションロジックの分離は非常に良いアイデアであり、コードの調整性を大幅に改善できます。
2。テストと開発を等しく扱うことは非常に良い考えです。テストの難しさは、コードの構造に大きく依存します。
3.クライアント側とサーバー側のデカップリングは、特に良い練習です。双方が並行して発達し、両側の再利用を可能にすることができます。
4.フレームワークが開発プロセス全体を通して開発者を導くことができる場合：UIの設計、ビジネスロジックの作成、テストから、開発者にとって大きな助けになります。
5.「複合体を単純化して単純化し、ゼロに単純化する」ことは常に良いことです。
Angularjsは次の悪夢からあなたを解放できます：
1.コールバックの使用：コールバックの使用は、コードの読み取り可能性を破壊し、コードを断片化し、元のビジネスロジックを確認することは困難です。コールバックなど、いくつかの一般的なコードを削除することは良いことです。 JavaScript言語の設計のために書く必要があるコードを劇的に削減すると、アプリケーションのロジックをより明確に見ることができます。
2。操作DOM要素の手動でコードを書き込む：操作DOMはAJAXアプリケーションの非常に基本的な部分ですが、常に「面倒」でエラーが発生しやすいです。宣言的な方法で説明されているUIインターフェイスは、アプリケーションステータスの変更とともに変更される可能性があり、低レベルのDOM操作コードの作成から解放できます。 AngularJSで書かれたほとんどのアプリケーションでは、開発者は自分でDOMを動作させるコードを作成する必要がなくなりましたが、必要に応じて書くことができます。
3. UIインターフェイスへのデータの読み取りと書き込み：AJAXアプリケーションの大部分はCRUD操作です。古典的なプロセスは、サーバーデータを内部オブジェクトに形成し、オブジェクトをHTMLフォームにコンパイルし、ユーザーがフォームを変更してフォームを確認することです。エラーがある場合、エラーが表示され、データを内部オブジェクトに再編成してサーバーに戻します。このプロセスで繰り返されるコードが多すぎるため、特定のビジネスロジックとビジネスの詳細ではなく、アプリケーションの実行プロセス全体を常に説明するようにコードが表示されます。
4.開始する前に、多くの基本コードを記述する必要があります。通常、「Hello World」アプリケーションを実装するには、多くの基本コードを記述する必要があります。 AngularJSを使用すると、アプリケーションの書き込みを簡単に書き始めることができるサービスを提供します。これらのサービスは、Guiceのような依存関係に依存する依存関係依存関係インジェクションでアプリケーションに自動的に追加されます。これにより、アプリケーションの特定の開発をすばやく入力できます。特に真実は、自動テストの初期化プロセスを完全に把握できることです。