AngularJSとは？
Googleが作っているJavaScriptのSPAを作れるMVCフレームワーク。Angular(AngularJS2)とは別物。別物ではあるのでいまだにAngularJSで作られているアプリケーションも存在はします。
MVWパターン
model
データ
|
1 |
const name = "taro" |
view
ビュー。HTMLのこと。
whatever
モデルとviewをバインドしてくれる何か。AngularJSでは色々な方法があるので特に名前をつけていない。ほとんどの場合コントローラーを作る。
Module、Controller
|
1 2 |
const myApp = angular.module('myApp',[]); myApp.controller('mainController'); |
モジュールの第二引数は依存しているモジュールを入れる。
Scope
AngularJSの最も重要な機能。ViewとModelをバインドしてくれる存在。
model
|
1 2 3 4 5 6 7 8 9 |
const myApp = angular.module('myApp', []); myApp.controller('mainController', function($scope) { $scope.name = '田中 太郎'; $scope.age = 15; $scope.getname = function() { return '田中'; } console.log($scope); }); |
$scope
「$」には特別な意味があるわけではない。単純な変数名。中身は結構複雑な変数になっています。中身はAngularJsがDIで注入している。
scopeには自由にプロパティを追加できる。
view
中括弧二つとscopeはくっついている。「$scope.name = '田中 太郎';」であればこのように出力する。
|
1 2 3 |
<div ng-controller="mainController"> <h1>{{ name + 'さん'}}、 こんにちは！</h1> </div> |
DI
$scopeと指定するだけでAngular側はscopeサービスを注入しないといけないなという動きになる。他にも色々なサービスがあり$logなどと指定するとlogサービスを注入してくれたりする。
|
1 2 3 4 5 6 7 8 |
const myApp = angular.module('myApp', []); myApp.controller('mainController', function($scope) { console.log($scope); // Angular側が自動で「$scope」という名前だけ見て判定して注入してくれる。 }); const search = function (firstName, $scope, height, age) { return '田中 太郎'; }; console.log(angular.injector().annotate(search)) // 関数の引数の名前が配列で帰る。 |
minify化
以下のように配列化することでminify化もできるようになります。（配列化しないとminify化した時の変数名の省略化に対応できないため。）
|
1 2 3 |
myApp.controller('mainController', ['$scope','$log',function($scope,$log) { console.log($scope); }]); |
ポイントとしては、配列の最後にfunctionを持ってくること。
サービス
基本はシングルトンになり、ソース全体で共有されます。ただ、$scopeだけは新たにインスタンスを作ります。
$logサービス
AngularJSでログを出力したい場合はこれを使う。console.logはベストじゃない。
|
1 2 3 4 5 6 7 |
const myApp = angular.module('myApp', []); myApp.controller('mainController', function($log) { $log.log("テスト"); $log.debug("debug"); $log.info("info"); }); |
$filterサービス
|
1 2 3 4 |
const myApp = angular.module('myApp', []); myApp.controller('mainController', function($filter) { $filter("uppercase")('emiry'); // 大文字にできる。EMIRY }); |
$locationサービス
URLを確認できる。
$watch
変化の前の値と新しい値を管理している。
$digestループ
何かしたらの値に変化があったかチェックする。その変数に関連する人全てに対して更新をかけていく。
|
1 2 3 4 5 6 7 8 9 |
const myApp = angular.module('myApp', []); myApp.controller('mainController', ['$scope', function ($scope) { $scope.handle = ''; $scope.$watch('handle', function(newValue, oldValue) { console.log('旧：', oldValue); console.log('新：', newValue); }); }]); |
上記例では、handleという変数が変化があった場合はwatchで設定した関数が呼ばれる。（digestループ）
$http
外部データをフェッチする。XMLHttpRequestをラップしたもの。
他パッケージ(モジュール)
Angularはコアモジュール以外にもいろんなモジュールがあります。
angular-messages
formのバリデーションができるモジュール
https://www.npmjs.com/package/angular-messages
第二引数に依存モジュールを追加します。（angular-messagesであればngMessages）
model
|
1 2 3 4 |
const myApp = angular.module('myApp', ['ngMessages']); myApp.controller('mainController', function ($scope, $log, $filter, $resource) { console.log($resource); }); |
view
<div ng-message="required">aaa</div>
angular-route
AngularJSでSPAを実装する上でなくてはならないパッケージ。（なお、ui-routeというサードパーティのパッケージなどは存在する）
以下のように遷移先のページと紐づけるコントローラーをそれぞれ指定できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
myApp.config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'pages/first.html', controller: 'firstController' }) .when('/second', { templateUrl: 'pages/second.html', controller: 'secondController' }) }); |
Directive
AngularJSにどのようにDOMを組み立てるか記した説明書のようなもの。（classを追加したり、特定のDOMを見えなくしたり、DOMを生成したりと）
ng-controller
コントローラーを定義する。幾つでも定義ができる。scopeに関してはコントローラーごとに別々のインスタンスになるので競合しない。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
const myApp = angular.module('myApp', []); myApp.controller('firstController', ['$scope', function ($scope) { $scope.name = 'First'; }]); myApp.controller('secondController', ['$scope', function ($scope) { $scope.name = 'Second'; }]); <div class="container"> <div ng-controller="firstController"> <h1>{{ name }}</h1> </div> <div ng-controller="secondController"> <h3>{{ name }}</h3> </div> </div> |
ng-if
条件分岐を作れる。DOMは消える。
ng-show
条件分岐を作れる。DOMは残る。
ng-class
条件付きでclass適用などができる。
ng-click
関数をかける。
ng-cloak
遅延描画させることができる。ネット回線が遅い環境などで使える。
ng-repeat
for文。最もよく使う。
ng-view
angular-routeで実装した場合にHTMLを挿入してくれる。
ng-model
scopeの中に変数を探してバインドしてくれる。双方向Binding。viewの中で行った変更はソースに反映され、ソースの中で行った変更はviewに反映される。jQueryで書く場合めちゃくちゃコードを書かないといけないのに比べてすごく便利。
|
1 2 3 4 5 6 7 |
const myApp = angular.module('myApp', []); myApp.controller('mainController', ['$scope', function ($scope) { $scope.handle = ''; }]); <input type="text" ng-model="handle" /> <h1>{{handle}}</h1> |
なお、この場合は変数ですが、functionなどもfunction()などと定義してあげることで呼び出すことも可能です。（scopeとfilterを組み合わせるなどをしたい場合などに使える。）
この記事へのコメントはありません。