Create a gist now

Instantly share code, notes, and snippets.

@hokaccha /_README.md Secret
Last active Aug 29, 2015

What would you like to do?

普通の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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment