※AngularJSはとても奥が深く、まだ調べ始めたばかりなので誤りがあるかもしれません。
※AngularJSの専門用語と称していますが、基本的な概念はAngular2でも通用すると思います。
※続きました
双方向データバインディング
AngularJS最大の機能の一つ。UIが表示しているデータと、JavaScriptが内部で保持しているデータを自動で同期させる機能。
ただし、同期が行われるのはUIに対するイベントによって値が変更された場合のみなので、jQueryなどで直接値を書き換えた場合には手動で同期する必要がある。
そもそもAngularを用いてフロントエンドの開発をする場合、闇雲にjQueryを使うべきではないと思われる。
モジュール
AngularJSアプリの最大単位。小規模であれば１アプリ１モジュールでも良い。規模が大きいなら、機能ごと、コンポーネントごとにモジュールを作るなどができる。
モジュール内で他モジュールを依存先として指定することができ、これはサードパーティー製のモジュールの機能を引き継ぐ時に使える。
例えば以下の場合は、ngRouteモジュール、ngAnimateモジュールに依存するmyappモジュールを作成できる。
myapp = angular.module('degulog', ['ngRoute' , 'ngAnimate']);
生成したモジュールに対して、各種コントローラ、サービス(後述)、ディレクティブ(後述)などを定義する。
サービス(service)
特定の目的を持った関数(オブジェクト)
AngularJSにおけるサービスは、シングルトンオブジェクトで、状態や振る舞いを保持することができる。そのため、一般的なMVCにおけるモデル層をサービスとして定義する。
サービスは使い方に応じて、Sercice,factory,provider,valueなどに分類されるが、モデルを記述する場合は基本的にfactoryを用いる。
以下はカウントアップ機能を備えたサービスの定義である。
myModule = angular.module(‘mymodule’ , []);
myModule.factory(‘countup’ , function() {
let count = 0;
return {
add: () => ++count,
get: () => count,
};
});
上記のように、クロージャになるように記述することで、状態の保持ができるようになるのでモデルとして利用することができる。
ディレクティブ
HTML上で利用できる拡張タグ、クラス、属性のこと。<ng-***>はAngularJSに標準で搭載されたディレクティブ。
js
var app = angular.module("myApp", []);
app.directive("test", function () {
return {
restrict: "E",
template: "<div>テスト</div>"
}
})
html
<test></test>
これをブラウザで開くと、以下のように変換される
<test><div>テスト</div></test>
例はシンプルすぎるもので、ただの置換にも見えるが、ディレクティブでは要素に属性を付与したり、オブジェクトを操作したりと様々なことができる。
<
h2>
スコープ($scope)
スコープはServiceの1種で、ビューとコントローラの懸け橋となるオブジェクト。
コントローラでscope内に定義したデータ(メソッド)は、対応するビューから参照(実行)することができる。
逆に、ビュー側で名前付けしたDOMを、コントローラでscopeを通して読み書きしたり、イベントを監視することができる。
AngularJSではDOMを直接操作することは推奨されていないので、原則scopeを通してビューを操作する。
フィルター
データを出力する際に特定の加工を施す機能。例えば、テンプレートにて以下のような記述をすると、objectをJSONに変換して出力する
{{obj | JSON}}
フィルターはモジュールで自作することができ、入力に対する出力を返す関数であれば好きなように作成できる。