AngularJSは、宣言型のスタイルはUIの作成に適し、必須のスタイルはビジネスロジックの作成に適していると考える開発者向けに作成されました。
禅の角度
- DOM操作をアプリケーションロジックから分離するのは良いことです。 これにより、コードのテスト性が大幅に向上します。
- 自動化されたアプリケーションのテストは、アプリケーション自体を書くことと同じくらい重要であると想定するのは良いことです。 テスト容易性は、コードの構造に大きく依存します。
- クライアントの開発をサーバーから分離するのは良いことです。 これにより、並行開発が可能になり、両側での再利用が改善されます。
- UIの設計からビジネスロジックの作成、テストに至るまで、アプリケーションの開発サイクル全体を通じて、フレームワークが開発者をリードするのは良いことです。
- 一般的なタスクが簡単になり、複雑なタスクがより簡単になると便利です。
AngularJSは包括的なフレームワークです。 標準パッケージでは、次の機能が提供されます。
- CRUDアプリケーションを作成するために必要なのは、データバインディング、基本的なテンプレートディレクティブ、フォーム検証、ルーティング、ディープリンク、コンポーネントの再利用、依存性注入、サーバー（RESTful）データソースと対話するためのツールです。
- テストに必要なもの：単体テスト、エンドツーエンドテスト、モック用のツール。
- ディレクトリ構造とテストスクリプトを含むサンプルアプリケーションテンプレート 。
AngularJSはGoogleの従業員によって開発され、少なくとも1つのGoogleサービスである
DoubleClickで使用されています。
例
シンプルなトドキャビネット
<div ng-app> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ] <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add"> </form> </div> </div>
function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; $scope.addTodo = function() { $scope.todos.push({text:$scope.todoText, done:false}); $scope.todoText = ''; }; $scope.remaining = function() { var count = 0; angular.forEach($scope.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; $scope.archive = function() { var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) $scope.todos.push(todo); }); }; }
実際には、
angularjs.orgのホームページを見ることができます。 いくつかの例もあります。
- 「基本」は、データバインディングの簡単な説明です。
- 「Add Some Control」は、ここでコードを提供したtodoキャビネットです。
- 「Wire up a Backend」は、 mongolabのルーティングおよびデータストレージを使用してレコードを作成、保存、編集するためのシンプルなアプリケーションです。
- 「コンポーネントの作成」-再利用可能なコンポーネントの作成。
その他の例：
AngularJSの概念
指令
AngularJSの宣言部分のほぼ全体がディレクティブに基づいています。 HTML構文を充実させるために使用されます。 DOMのコンパイル中に、ディレクティブがHTMLから取得され、実行されます。 ディレクティブは、いくつかの新しい動作を追加したり、DOMを変更したりします。 標準パッケージには、Webアプリケーションを構築するためのかなり多数のディレクティブが含まれています。 しかし、重要な機能は、独自のディレクティブを開発する機能です。これにより、HTMLをDSLに変換できます。
ディレクティブは、lowerCamelCaseを使用して名前が付けられます（ngBindなど）。 使用するときは、区切り文字として特殊文字の1つを使用して、ディレクティブに小文字の名前を付ける必要があります
: 、
- 、または
_ 。 オプションで、
x-または
data-プレフィックスを使用して有効なコードを取得できます。 例：
ng:bind 、
ng-bind 、
ng_bind 、
x-ng-bindおよび
data-ng-bind 。
ディレクティブは、要素（
<my-directive></my-directive> ）、属性（）、クラス（）、またはコメント（）として使用できます。 特定のディレクティブがどのように開発されたかによって異なります。
開発者向けガイドでディレクティブの詳細をご覧ください 。
スコープ
スコープは、アプリケーション内のモデルに関連するオブジェクトです。 式の実行コンテキストです。 スコープは、DOMと同様の階層構造に配置されます。 同時に、親スコープからプロパティを継承します。
スコープは、コントローラーとビューの間の接着剤のようなものです。 テンプレートバインディングフェーズの実行プロセスで、ディレクティブはスコープ内の式の監視（
$watch ）を設定します。
$watchは、ディレクティブに変更に応答して、更新された値または他のアクションを表示する機能を提供します。 コントローラとディレクティブの両方にスコープへの参照がありますが、相互への参照はありません。 したがって、コントローラーはディレクティブとDOMから隔離されます。 このため、アプリケーションをテストする能力が向上します。
スコープの詳細については、開発者ガイドをご覧ください 。
サービス
サービスは、すべてまたは特定のWebアプリケーションに共通する特定のタスクを実行するシングルトンです。 たとえば、
$ httpサービスは、XMLHttpRequestのラッパーです。 他のサービスのいくつかの例（完全なリストについては
ドキュメントを参照）：
サービスを使用するには、コントローラー、別のサービス、ディレクティブなどの依存関係として指定する必要があります。 AngularJSは残りを処理します-依存関係の作成、解決など。
開発者ガイドでサービスの詳細をご覧ください 。
フィルター
フィルターは、ユーザーに表示する前にデータをフォーマットし、コレクション内のアイテムをフィルター処理するように設計されています。 フィルターの例（完全なリストは
ドキュメントにあり
ます ）：
currency 、
date 、
orderBy 、
uppercase 。 フィルターの使用は非常に伝統的です：
{{ expression | filter1 | filter2 }} {{ expression | filter1 | filter2 }}フィルターについて詳しくは、開発者ガイドをご覧ください 。
モジュール
AngularJSのアプリケーションには、プライマリ実行可能メソッドがありません。 代わりに、モジュールはアプリケーションのダウンロード方法の宣言的な説明として機能します。 これにより、たとえば、テストスクリプトを記述するときに、一部の設定をオーバーライドする追加のモジュールをロードできるため、複雑な（エンドツーエンドの）テストが容易になります。
モジュールの詳細については、開発者ガイドをご覧ください 。
テスト中
開発者が書いているように、テストのために彼らはAngularJSで多くのことをしたので、アプリケーションをテストしなければ何も言い訳できません:)
テストe2eシナリオの例：
describe('Buzz Client', function() { it('should filter results', function() { input('user').enter('jacksparrow'); element(':button').click(); expect(repeater('ul li').count()).toEqual(10); input('filterText').enter('Bees'); expect(repeater('ul li').count()).toEqual(1); }); });
ユニットテストと
e2eテストの詳細については、開発者ガイドをご覧ください。
AngularJS Batarang
これは、AngularJSアプリケーションのデバッグを容易にする
Chromeの拡張機能です。 スコープの階層を操作したり、アプリケーションのプロファイルを作成したり、サービス間の依存関係を視覚化したり、要素のページにスコープの内容を表示したり、コンソールからスコープの値を表示および変更したりできます。
githubの
ページの説明文
が適切です。
youtubeの良いビデオ。
他に読むもの