Clever Geek Handbook

AngularJS-Googleの動的Webアプリケーションのフレームワーク

AngularJSは、宣言型のスタイルはUIの作成に適し、必須のスタイルはビジネスロジックの作成に適していると考える開発者向けに作成されました。



禅の角度







AngularJSは包括的なフレームワークです。 標準パッケージでは、次の機能が提供されます。





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のホームページを見ることができます。 いくつかの例もあります。



その他の例：





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の良いビデオ。



他に読むもの





More articles:


All Articles