ウェブデザイナーがはじめる AngularJS シリーズウェブデザイナーがはじめるAngularJS：SPA（Single Page Application）をはじめる前に
はじめに
{{ “4844336681” | amazon_product:‘AngularJSリファレンス’ }}のKindle版を読んで感じたことをメモっておきます。Chapter 07：ルーティングと通信まで読めばAngularJSの基本的な機能について把握することがで、Chapter 08からは独自にカスタムフィルターやカスタムサービスなどを作成する方法、テストやセキュリティについて書かれています。
とりあえず理解しておきたいこと
まずはChapter 07まで流し読みし、ルーティングを使って画面遷移ができるサンプルを作ることを目標に必要なことを覚えていきます。簡単に各項目の概要をメモしておきます。ウェブデザイナー目線でテンプレート側から理解できるように順番を並べています。詳しくは{{ “4844336681” | amazon_product:‘AngularJSリファレンス’ }}を参照してください。
ビルトインディレクティブ（Chapter 02）
HTMLを拡張する仕組み。HTMLをマークアップするようにデータバインディングやコントローラなどを定義しDOM操作やイベント登録が行えます。
<html ng-app="app">
<body>
<div ng-controller="myController">
<p>{{ message }}</p>
<button ng-clock="goodbey()">push</button>
</div>
</body>
</html>
コントローラとスコープ（Chapter 06）
コントローラとスコープを使い変数や関数をテンプレートから呼び出すことができます。
var app = angular.module('app', []);
app.controller( 'myController', ['$scope', function($scope){
$scope.message = "Hello world";
$scope.goodbye = function () {
$scope.message = "Goodbye";
}
}]);
プロパティは双方向データバインディングによって表示も自動で書き換えられます。
<html ng-app="app">
<body>
<div ng-controller="myController">
<p>{{ message }}</p>
<button ng-clock="goodbey()">push</button>
</div>
</body>
</html>
フィルター（Chapter 03）
データを整形する機能。モデルの値を変更することなく表示フォーマットを変更できる。
{{ model | filter }}
サービス（Chapter 03 - 2）
任意のタスクを実行する処理グループ。ビルトインサービス、カスタムサービス等をコントローラーを作成する際に読み込み、コントローラー内で利用する。
var app = angular.module('app', []);
app.controller( 'ServiceCtrl', ['$interval', function($interval){ // $intervalがビルトインサービスと呼ばれるもの
var num = 0;
$interval(function(){ //関数を100ミリ秒毎に呼び出す
console.log(num++);
}, 100 );
}]);
グローバルAPI（Chapter 04）
グローバル変数として用意されているangularオブジェクトを経由して利用できるAPIです。オブジェクトの操作やDOM操作（jqLite）、その他汎用的なメソッドが用意されています。
var appEl = angular.element(document.getElementById('app'));
モジュール（Chapter 05）
関数やオブジェクトをグループ化して管理する仕組み。ディレクティブ、サービス、フィルター、コントローラなどすべてモジュール機能によって管理されています。
//
var app = angular.module('myapp', []);
ルーティング（Chapter 07）
ルーティングはHash（URLのhttp://hoge.com/#fugaにある#fuga）かHTML5のpushStateを使うことでページ全体をリクエストすることなくViewを読み込み、コントローラーを切り替えることができます。ルーティングを行うにはngRouteモジュールが必要です。
var myapp = angular.module('myapp', ['ngRoute']);
myapp.config(['$routeProvider',
function(routeProvider) {
routeProvider.when('/', { templateUrl: 'views/screen-01.html'})
routeProvider.when('/2', { templateUrl: 'views/screen-02.html'})
.otherwise({ redirectTo: '/'});
}
]);
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<title>title</title>
<meta charset="utf-8">
<script src="angular.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li><a ng-href="/#/">view 1</a></li>
<li><a ng-href="/#/2">view 2</a></li>
</ul>
<div ng-view></div>
</body>
</html>
ngRouteはシンプルな機能しか持っていないため複雑な制御をしたければui-routerを使うようです。
重要だけれどもまだピンとこないもの
重要だと思うけれど、どういう風に使えば良いのかピンとこないものをメモしておきます。
DI (Dependency Injection)
DI (Dependency Injection)とは、あるコンポーネントから別のコンポーネントを利用する際に、直接コンポーネントを呼び出すコードを記述するのではなく、設定ファイルやアノテーション（注釈）機能を使ってコンポーネント間の依存関係を記述し、実行時に依存関係を解決するというデザインパターンです。コンポーネント間の依存関係を弱めることで、メンテナンス性の向上はもちろん、テスト実行時に依存オブジェクトをモックに切り替えることなどが可能になります。
説明はわかるけども実際に使ってみないとと言ったところ。
アプリケーションを構築するためのアーキテクチャ
Chapter 06 Section 4に書かれているアプリケーションを構築するためのアーキテクチャを読んでおくと全体像をイメージできます。他にも参考になりそうな資料があったので貼ってきます。
今回はここまで。
次回はngRouteを試すためにMiddlemanの環境を用意したいと思います。
前回：ウェブデザイナーがはじめるAngularJS：AngularJSをはじめる。
参考記事
シリーズ
- AngularJSをはじめる前に - AngularJSに関するサイトやスライドまとめ
- ウェブデザイナーがはじめるAngularJS：AngularJSをはじめる
- ウェブデザイナーがはじめるAngularJS：SPA（Single Page Application）をはじめる前に
- ウェブデザイナーがはじめるAngularJS：MiddlemanとBowerで作るAngularJSアプリ開発環境
- ウェブデザイナーがはじめるAngularJS：ngRouteを使ったシンプルなViewの切り替え
- ウェブデザイナーがはじめるAngularJS：AngularUI Routerの基礎知識
- ウェブデザイナーがはじめるAngularJS：ngCookiesやngStorageを使ったCookieやlocalStorageへのアクセス
- ウェブデザイナーがはじめるAngularJS：DOM操作系ディレクティブを試す
- ウェブデザイナーがはじめるAngularJS：イベント系ディレクティブを試す
- ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理
- ウェブデザイナーがはじめるAngularJS：$httpProviderのInterceptorsを使ってリクエスト・レスポンスを操作する
- ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策
- ウェブデザイナーがはじめるAngularJS：コントローラ間の連携
- ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap