Laddy in

Programming & Technology!!

NEW ARTICLE
windows11拡張機能で画像文字読み込み
  • angular.jsをチュートリアルから学ぶ step5 XHRs & Dependency Injection

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




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

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

目次

json呼び出し部分

Controller内で$http.getを利用してjsonを取得しています。

phonecatApp.controller('PhoneListCtrl', function($scope, $http) {
    $http.get('phones.json')
      .success(function(data) {
          $scope.phones = data;
      });
    $scope.orderProp = 'age';
});

phones.json

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

[
 {
  "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!!"
 }
]

実行結果

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




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

ソースコード全体

<!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>
//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js