初心者向けとしては最後になります。最後は $http を利用し外部リソースと通信するプログラムを書きます。外部リソースとやりとりをすることでアプリケーションとしては基本的な要素をすべて学んだことにはなります。AngularJSではもっと多くの機能がありますので「Advent Calendar 2014」など期待されたらと思います。
AngularJS Advent Calendar 2014 - Adventar
これまで
- ビルトインディレクティブ
- コントローラー/ファクトリ
- ルーター
を利用することで「Single-page Application」を構築するために必要となる要素を説明しました。特に外部リソースを必要としないアプリケーションを作成する場合は前回までで十分です。よりアプリケーションとして構築するためには「情報を取得する」「入力されたデータを登録する」など必要になります。
外部リソースにアクセスする
外部リソースにアクセスするためには
- $http
- $resource
がありますが、今回は $http を利用します。
$http
$httpはHTTP通信のもとデータのやりとりをするためのものです。$httpには
$http.get $http.head $http.post $http.put $http.delete $http.jsonp $http.patch
があります。ここで、JSONP（JSON with padding）とはクロスドメインなデータを取得する仕組みのことです。
取得するデータの準備
いまプロジェクトディレクトリが
プロジェクトフォルダー
|- index.html
|- header.html
|- app
|- app.js
|- controller
| |- main
| | |- main.html
| | |- main.js
| | |- mainCtrl.js
| |- footer
| |- footer.html
| |- footer.js
| |- footerCtrl.js
|- factory
|- factory.js
ですのでJSONデータを配置するディレクトリとデータを作成します。
プロジェクトフォルダー
|- index.html
|- header.html
|- json
| |- userlist.json
|- app
|- app.js
|- controller
| |- main
| | |- main.html
| | |- main.js
| | |- mainCtrl.js
| |- footer
| |- footer.html
| |- footer.js
| |- footerCtrl.js
|- factory
|- factory.js
ここで userlist.json は「初心者向けAngularJS - その１」で利用したリストを使います。
[
{"name": "山田", "age": 24},
{"name": "田中", "age": 28},
{"name": "佐藤", "age": 18},
{"name": "井上", "age": 32},
{"name": "高橋", "age": 46}
]
準備はこれだけです。次にこのデータを取得するロジックを記述します。
mainCtrl.jsの変更
'use strict'; angular.module('app') .controller('mainCtrl', function ($scope, factory) { // controllerの中身 $scope.onClick = function () { $scope.message = factory.showMassage("AngularJSアプリケーション"); }; });
mainCtrl.js で $http が利用できるよう宣言します。
'use strict'; angular.module('app') .controller('mainCtrl', function ($scope, $http, factory) { // controllerの中身 $scope.onClick = function () { $scope.message = factory.showMassage("AngularJSアプリケーション"); }; });
次に $http を使ってデータを取得します。$http.get を使いましょう。
'use strict'; angular.module('app') .controller('mainCtrl', function ($scope, $http, factory) { // controllerの中身 $scope.onClick = function () { $scope.message = factory.showMassage("AngularJSアプリケーション"); }; $http.get('/json/userlist.json').success(function(data) { $scope.demoData = data; }); });
今回登録については実装しませんが、その場合はJSON形式のデータが引数をして増えます。httpに対するメソッドもpostを使いますので
$http.post('/someUrl', {msg:'hello word!'}).success(function(data) {
});
となります。
テンプレートの修正
取得するデータを表示させるためテンプレートを少しカスタマイズします。ただこれも「初心者向けAngularJS - その１」で既に使ったものです。
<div ng-controller="mainCtrl"> <!-- 何かを記載 --> <input type="button" value="クリックでメッセージ表示" ng-click="onClick()"> <span ng-bind="::message"></span> <ul> <li ng-repeat="data in demoData">{{data.name}} - {{data.age}}</li> </ul> </div>
これで完了です。リストが表示されるはずです。
最後に
AngularJS で軽くコーティングするにはごく簡単にできたのではないかと思います。「初心者向けAngularJS - その２」ではモジュール分割という少しややこしい話はありましたが。ここまでで十分簡単なサイトなら作れるレベルになったのではないかと思います。 AngularJSではもっと高機能な（なのでちょっと難しい）要素が多く存在します。AngularJSハンズオン等頻繁に行われていますので、足を運びより高度な技術を習得されることを望みます。
AngularJS ハッカソン - AngularJS Japan User Group | Doorkeeper
