【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()); }; }]);