普通のAngularJSアプリケーションは、app1.htmlのように、ControllerでngResourceなり$httpなりを使ってデータをとってきて初期データを定義する。
しかし、app2.htmlのように、サーバーサイドで予めデータをレンダリングした結果を出力し、その結果を元にAngularJS向けのデータをつくりたいケースがある。このようにしたいのは、初期表示速度とアクセシビリティの二つが主な理由。（ここでいうアクセシビリティはマシンリーダブルという意味で端的に言うと検索エンジンに読んでもらいたいということ）。
こういうケースでどのようにするのがいいのか、もしくはこういうケースではAngularJS使わない方がいいのか。
| <!DOCTYPE html> | |
| <html lang="ja" ng-app> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Sample</title> | |
| </head> | |
| <body> | |
| <div ng-controller="MainCtrl"> | |
| <ul ng-repeat="item in list"> | |
| <li>{{item.name}} ({{item.age}})</li> | |
| </ul> | |
| <div>count: {{list.length}}</div> | |
| <form ng-submit="onsubmit($event)"> | |
| <input type="text" ng-model="name" placeholder="name"> | |
| <input type="number" ng-model="age" placeholder="age"> | |
| <input type="submit"> | |
| </form> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> | |
| <script> | |
| function MainCtrl($scope, $http) { | |
| $scope.list = []; | |
| // ./list.json はこんな感じ | |
| // | |
| // [ | |
| // { "name": "John", "age": 20 }, | |
| // { "name": "Bill", "age": 30 } | |
| // ] | |
| $http.get('./list.json').success(function(list) { | |
| $scope.list = list; | |
| }); | |
| $scope.onsubmit = function(event) { | |
| event.preventDefault(); | |
| $scope.list.push({ name: $scope.name, age: $scope.age }); | |
| $scope.name = null; | |
| $scope.age = null; | |
| }; | |
| } | |
| </script> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html lang="ja" ng-app> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Sample</title> | |
| </head> | |
| <body> | |
| <div ng-controller="MainCtrl"> | |
| <!-- このデータを$scopeに紐づけてng-repeatでレンダリングしたい --> | |
| <ul> | |
| <li>John (20)</li> | |
| <li>Bill (30)</li> | |
| </ul> | |
| <!-- これも $scope.list.length とかにしたい --> | |
| <div>count: 2</div> | |
| <form ng-submit="onsubmit($event)"> | |
| <input type="text" ng-model="name" placeholder="name"> | |
| <input type="number" ng-model="age" placeholder="age"> | |
| <input type="submit"> | |
| </form> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> | |
| <script> | |
| function MainCtrl($scope) { | |
| // これをDOMから作りたい | |
| $scope.list = []; | |
| $scope.onsubmit = function(event) { | |
| event.preventDefault(); | |
| $scope.list.push({ name: $scope.name, age: $scope.age }); | |
| $scope.name = null; | |
| $scope.age = null; | |
| }; | |
| } | |
| </script> | |
| </body> | |
| </html> |
