AngularJSで同じサーバーにあるJSONデータを読み込むサンプル

AngularJSではJSONを結構よく使うと思われますので参考に。
ちなみに、JSONデータはutf-8で保存しないと文字化けします。

AngularJSでJSONを読み込むサンプル

index.html

<!DOCTYPE HTML>
<html ng-app="myApp" lang="ja">
<head>
  <meta charset="utf-8">
  <title>Angular JSON Get Sample</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script>
  var app = angular.module('myApp', []);

  app.controller('MainController', ['$scope', '$timeout', '$http', function($scope, $timeout, $http){
    $timeout(function() {
    $http.get('data/sample.json')
      .success(function(data) {
      $scope.items = data.list;
    })
    .error(function(err) {
      alert('読み込み失敗');
    });
  });

  }]);
  </script>
</head>
<body ng-controller="MainController">
  <ul>
    <li ng-repeat="value in items">
    出席番号:{{value.id}}
    氏名:{{value.name}}
    </li>
  </ul>
</body>
</html>

sample.json

{
  "list": [
      {
          "id": "001",
          "name": "山田一郎"
      },
      {
          "id": "002",
          "name": "鈴木次郎"
      },
      {
          "id": "003",
          "name": "岡本三郎"
      },
      {
          "id": "004",
          "name": "浅岡四郎"
      },
      {
          "id": "005",
          "name": "佐藤五郎"
      }
  ]
}