angular.jsをチュートリアルから学ぶ step5 XHRs & Dependency Injection



前回までは固定されたデータを利用していましたが、
今回のチュートリアルでは外部json形式のデータを取得して表示に利用します。

参考先チュートリアル step5
5 – XHRs & Dependency Injection

json呼び出し部分

Controller内で$http.getを利用してjsonを取得しています。
[javascript]
phonecatApp.controller(‘PhoneListCtrl’, function($scope, $http) {
$http.get(‘phones.json’)
.success(function(data) {
$scope.phones = data;
});
$scope.orderProp = ‘age’;
});
[/javascript]

phones.json

同じディレクトリにphones.jsonファイルを作成して保存します。
本家のチュートリアルのデータを変更しているため少々データの中身が異なります。

[javascript]
[
{
"age": "13",
"id": "3",
"name": "motorola",
"snippet": "are you ready for everything life throws your way?"
},
{
"age": "3",
"id": "1",
"name": "nexus",
"snippet": "nexus!!"
},
{
"age": "17",
"id": "2",
"name": "one",
"snippet": "HTC COOOOOOOOL!!"
}
]
[/javascript]

実行結果

localhost:ember:angularjs_step05.html 2013-10-28 01-07-48

jsonで取得したデータのname要素を表示しています。

ソースコード全体

[html]
<!DOCTYPE HTML>
<html lang="ja" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
</head>
<body ng-controller="PhoneListCtrl">
<div class="container">
<input ng-model="query">

<select ng-model="orderProp">
<option value="name">アルファベット順</option>
<option value="age">新着順</option>
</select>

<h3>Phone Gallery: {{query}}</h3>
<p>totalphone: {{phones.length}}</p>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{phone.name}}
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script>
var phonecatApp = angular.module(‘phonecatApp’, []);
phonecatApp.controller(‘PhoneListCtrl’, function($scope, $http) {
$http.get(‘phones.json’).success(function(data) {
$scope.phones = data;
});
$scope.orderProp = ‘age’;
});
</script>
</body>
</html>
[/html]



コメントを残す