AngularJSの特徴についてまとめました

wp-admin

10年前

公式サイトの記述を参考にしてAngularJSの特徴をまとめました。

（１）まずは実際に動かしてみる
　
公式サイトにあるサンプルコードを実際に動かしてみます。
http://angularjs.org/
　
①”todo.js”という名前でJavaScriptファイルを作成し、サンプルコードをコピー。
　
②HTMLファイルを任意の名前で作成し、サンプルコードをコピー。
　
③同様に”todo.css”を作成
　
●コードの中身
　
①JavaScriptファイルのインクルード
　
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js”></script>
<script src=”js/todo.js”></script>
　
②スタイルシートのインクルード
　
<link rel=”stylesheet” href=”js/todo.css”>
　
③コントローラの指定
　
（HTML）
<div ng-controller=”TodoCtrl”>
　
（JavaScript）
function TodoCtrl($scope) {
　
④データバインディング？
　
（HTML）
<span>{{remaining()}} of {{todos.length}} remaining</span>
　
（JavaScript）

$scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };
　
$scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

　
（２）AngularJSの特徴
　
この項の目次
１）なぜAngularJSか？
２）拡張性
３）基本的なコード
４）データバインディング
５）コントローラ
６）プレーンなJavaScript
７）ディープリンキング
８）クライアントサイドフォームバリデーション
９）サーバーとの連携
１０）ディレクティブ
１１）コンポーネントの再利用
１２）ローカライゼーション
１３）組み込み可能（Embeddable）
１４）注入可能（Injectable）
１５）テストしやすい
　
１）なぜAngularJSか？
　
・HTMLは静的ドキュメントで動的なビューを定義するには向いていない。
・AngularJSはHTMLを個別のアプリ用に拡張できる。
・表現性に優れ、読み易く、すばやく開発できる。
　
２）拡張性
　
・AngularJSはアプリ開発に適するようにフレームワークを構築するためのツールセット
・拡張性があり他のライブラリともうまく動作する。
・すべての機能は、個別の開発に合わせて変更したり置き換えたりする事が出来る。
　
３）基本的なコード
　

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

JavaScriptのコードを記載せず上記コードのみで動的コンテンツ（テキストボックスに名前を入力すると即、”Hello 入力した名前”が表示）が作成できる。
　
４）データバインディング
　
・モデルを更新するとビューにも自動で反映。ビューを変更するとモデルも更新される。
これによって面倒なDOM操作軽減できる。
　
５）コントローラ
　
・コントローラはDOMエレメントに対する振る舞いを記述。
・AngularJSではこの振る舞いをDOM更新の共通定義、モデル変更の監視、コールバックの登録なしにきれいで読みやすいコードを記述できる。
　
６）プレーンなJavaScript
　
・他のフレームワークと違ってアクセサーメソッド内でモデルをラップするための専用のタイプを継承させる必要がない。
・プレーンなJavaScriptオブジェクトなのでテスト、メンテナンス、再利用が容易
　
７）ディープリンキング
　
・ディープリンクは、アプリ内でユーザーがどのページにいるかを反映でき、見たいページでブックマークするときなどに有用。
・通常のサーバーへのラウンドトリップがあるアプリでは自動で取得できるがAJAXアプリでは出来ない。
・AngularJSではディープリンクのメリットをデスクトップアプリのような振る舞いになるように結びつけている。
　
下記ページに詳しく説明されています。
http://docs.angularjs.org/cookbook/deeplinking
　
一つのページ内のある領域に異なるURLで選択して表示内容を切り替えられる例が紹介されています。
　
８）クライアントサイドフォームバリデーション
　
・JavaScriptによるコードを記述せずにフォームのバリデーションルールを定義できる。
　
９）サーバーとの連携
　
・サードパーティライブラリを使った様々な他のバックエンドと同様にXHR（XMLHttpRequest）上のビルトインサービスを提供する。
・”promise”は、データの非同期のリターンをハンドリングする事によってコードをよりシンプルに出来る。
　
１０）ディレクティブ
　
・ディレクティブはAngularJSでのみ利用できるユニークで強力な機能。
・ディレクティブによって、開発しているアプリ固有の新しいHTML構文を作成できる。
　
１１）コンポーネントの再利用
　
・再利用できるコンポーネントを作成するのにディレクティブを使用出来る。
・コンポーネントによって複雑なDOM構造、CSS、ロジックを隠蔽できる。
・コンポーネントによってアプリが何をし、どのように見えるかを分離することが出来る。
　
１２）ローカライゼーション
　
・AngularJSのロケールはフィルターを使用でき、ディレクティブを利用してすべてのロケールで利用できるようにブロックを構築する事が出来る。
　
１３）組み込み可能（Embeddable）
　
・AngularJSは他のテクノロジーともうまく動作する。
既存のページに好きなだけAngularJSを追加する事が出来る。
たいていの他のフレームワークはフルコミットメントする必要がある。
　
・一つのページに複数のAngularJSアプリを組み込む事が出来る。
　
・AngularJSはグローバルステートを持たないのでiframeを使用しなくても一つのページに複数のアプリを実行させる事が出来る。
　
１４）注入可能（Injectable）
　
・AngularJSのDependency Injection（依存性注入、DI）によって、アプリがどのように結合するか宣言する形で表現できる。
これによってメンテナンスが大変なmain()メソッドが必要なくなる。
　
・DIはAngularJSのコアでもあるので、開発者のニーズに合わないコンポーネントを簡単に交換することが出来る。
　
１５）テストしやすい
　
・AngularJSはテストしやすいように設計されている。
・振る舞いとビューを分離しやすく、モックがプレバンドルされていて、DIによるメリットを享受できる。
・エンドツーエンドのシナリオランナーの機能も有している。