Angularインストール
正当な(?)インストール方法としては下記のようにbowerを使ったほうがいいでしょう。
|
1 |
bower install angular |
bowerに関してはこちら
ソース
ただ最初のうちはとっつきにくいと思うので下記のように公開されているanuglarのファイルをそのまま読み込んでしまうがもっとも楽です。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> </head> <body> <div>姓<input type="text" ng-model="family_name"></div> <div>名<input type="text" ng-model="first_name"></div> <div>{{family_name}} : {{ first_name }}</div> </body> </html> |
ng-modelと書くことにより変数として認識させることができ、{{}}でその変数を使用することができます。
上記の例だと単純すぎてわからないとおもいますが、実務で一番使えるのは下記のような処理ではないでしょうか。
- 複数行の数値計算(具体的には受注伝票などで明細行の数値計算の合計値を計算など)
これjQueryだけでやろうとするとかなり大変で、不具合の温床になります。
モジュール、スコープとコントローラ
上記は非常に単純な例ですが、一般的にAngularJSではモジュール、スコープ、コントローラといった概念を使うことが一般的です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.message = "testtest"; }); </script> </head> <body> <div ng-app="myApp"> <div ng-controller="myController"> {{message}} </div> </div> </body> </html> |
モジュールとは
ものすごく簡単に言うとAngularがアプリを作る際の単位の1つです。
例えば下記の部分をモジュールと呼びます。
|
1 |
var app = angular.module('myApp', []); |
myAppというのはモジュール名になります。
またmyAppの横の[]ですが、ここは依存するモジュールがある場合に配列でこの中に定義をします。何もなくても[]で定義しておきましょう。かかないと動きません！
なおエラーを探すのがとても大変です・・
|
1 2 3 4 5 |
<div ng-app="myApp"> <div ng-controller="myController"> {{message}} </div> </div> |
HTML上でng-app=”myApp”と定義して囲ってあるところがモジュールの該当部分になります。
AngularJSまとめ ~モジュール~
AngularJSでモジュールを定義するには？
コントローラーとは
次に紹介するスコープ(HTMLとJavaScriptをつなぐ仕組み)を準備するための仕組みです。
AngularJSのなかで最も基本的な構成単位です。
下記部分がコントローラの登録方法です。
|
1 2 3 |
app.controller('myController', function($scope) { $scope.message = "testtest"; }); |
myControllerがコントローラー名で、functionの部分がコンストラクタ関数になります。
下記がHTMLへの反映部分になります。
|
1 2 3 |
<div ng-controller="myController"> {{message}} </div> |
スコープとは
HTMLとJavaScriptの橋渡しをするサービスです。
|
1 2 3 |
app.controller('myController', function($scope) { $scope.message = "testtest"; }); |
ここの$scopeという部分がスコープサービスになります。
ここで変数として使用するとHTMLのほうで、それがそのまま引き継がれ(このことをバインドするなどといいます。)、使用できるようになります。
|
1 2 3 |
<div ng-controller="myController"> {{message}} </div> |
一連の作業をまとめると、オブジェクト$scopeを引数にとる関数myControllerを用意し、$scopeオブジェクトにmessageを登録し、angular.module()でモジュールappを作詞し、app.controllerでコントローラーmyControllerを登録しています。
参考リンク
今はドッ○インストールなのかもしれませんが、昔は初心者救済サイトというと↓のとほほシリーズでしたね。
モジュール、スコープとコントローラーの理解でお世話になりました。
AngularJSのControllerとScopeの基礎を学ぼう AngularJS は MVW(hatever)!!!
