【AngularJS】AngularJSとは

AngularJSについて雑記。
以下リンク内容を写経でお勉強
Angularjsとは
参考
www.tohoho-web.com/ex/angularjs.html
http://dev.classmethod.jp/client-side/javascript/angularjs-2/

◼︎Googleとコミュニティが開発するjsフレームワーク
◼︎MVC
◼︎クライアント側でJSのコントローラでデータモデルを管理して
◼︎画面とリアルタイムにデータを交換するのに適したフレームワーク
◼︎Directive(HTMLの属性と要素を拡張した新しいマークアップ)という仕組みを使っている。
Angularがアプリを起動する時、HTMLコンパイラはDOM要素内を探索してDirective要素を探す。
Directiveが見つかると、DOM要素とリンクされる。
Angularは対象のHTMLをコンパイルして、HTML要素や属性に振る舞いを紐付け新しい要素・属性を作る

◼︎HTMLコンパイラ: Angularがブラウザに対して任意のHTML文法を伝えるための方法
◼︎コンパイル: DOMツリーを辿ってDirectieのためにDOM要素をつなぎ合わせる過程。

◼︎どんな？
◼︎{{}}の中でjsの式をかける

◼︎︎フィルタをかけられる

◼︎モジュールとコントローラの使用
・ng-appでアプを指定し、ng-controllerでコントローラを指定。
コントローラの中で$scopeに定義した変数を{{}}で使用できる

◼︎ng-repeatを用いてリストの操作
◼︎orderByでソート
◼︎filterでフィルタリング
◼︎ng-clickでコントローラに定義したアクションを呼び出す
◼︎フォームバリデーション

◼Directiveの指定例◼︎
◼︎ng-app
︎
html属性に「ng-app」というDirectiveが指定されている。
(ngAppはどの属性に指定してもokらしい)

アプリケーションが初期化される時に、指定された属性をルートとして自動的にDirectiveとリンクする
これによって後から出てくる{{}}という式が処理される

◼︎ng-model
input要素指定。入力フィールドの値を変数へ格納する。

◼︎ng-init
変数の初期化を行っている

◼︎DI(依存性注入)
モジュール同士の依存関係を構築できる。

//service.js
//myServiceという名前のモジュールを定義し、greetServiceというサービスを定義
var myApp = angular.module('myService',[]);
myApp.service('greetService', function(){
	this.sayHello = function() {
		return "Hello, world!"
	};
});

//controller.js
//myServiceモジュールに依存しており、greetSerbiceの関数を使用している
var myApp = angular.module('myControll', ["myService"]);
myApp.controller('MyCtrl' ['$scope', 'greetService', function($scope, greetService){
	$scope.greet = function() {
		console.log(greetService.sayHello());		
	};
}]);