list.htmlを外部ファイルにし、AngularJSが動いてから表示することで、AngularJS適用前のDOMが表示されることを防止 #6

sinmetal · May 19, 2013 · dc846a9 · dc846a9
1 parent 39e0a27
commit dc846a9
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 25 deletions.
diff --git a/app.yaml b/app.yaml
@@ -8,6 +8,10 @@ handlers:
   static_files: index.html
   upload: index.html
 
+- url: /list.html
+  static_files: list.html
+  upload: list.html
+
 - url: /lib
   static_dir: lib
 

diff --git a/index.html b/index.html
@@ -15,26 +15,7 @@
   <body>
     <div ng-controller="MainController">
   	  <h2>Hello AngularJS !!</h2>
-      <div>
-        <table class="table">
-          <thead>
-            <tr>
-              <td>No</td>
-              <td>CategoryId</td>
-              <td>ItemId</td>
-              <td>Name</td>
-            </tr>
-          </thead>
-          <tbody ng-repeat="s in stores">
-            <tr>
-              <td>{{$index}}</td>
-              <td>{{s.CategoryId}}</td>
-              <td>{{s.ItemId}}</td>
-              <td>{{s.Name}}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+      <div ng-view></div>
       <div>
         <form ng-submit="submit()">
           <select ng-model="entryForm.categoryId" ng-options="c.id as c.name for c in categories" ng-change="changeCategory()">

diff --git a/js/main.js b/js/main.js
@@ -1,17 +1,25 @@
 (function() {
-  var app = angular.module("sample", ["ngResource"]);
-  app.controller("MainController", function($scope, $resource){
-    $scope.categories = [{"id" : "1", "name" : "野菜"}];
-    var List = $resource("/item/list");
-    var Store = $resource("/store");
+  var app = angular.module('sample', ['ngResource']).
+    config(function($routeProvider) {
+      $routeProvider.
+        when('/', {controller:ListController, templateUrl:'list.html'});
+    });
 
+  function ListController($scope, $resource) {
+    var Store = $resource("/store");
     $scope.stores = Store.query(function() {
       console.log("success store query");
       console.log($scope.stores);
       console.log($scope.stores[0].CategoryId);
     }, function(){
       console.log("error store query");
     });
+  }
+
+  app.controller("MainController", function($scope, $resource){
+    $scope.categories = [{"id" : "1", "name" : "野菜"}];
+    var List = $resource("/item/list");
+    var Store = $resource("/store");
 
     $scope.changeCategory = function() {
       $scope.items = List.query({id : $scope.entryForm.categoryid}, function(){

diff --git a/list.html b/list.html
@@ -0,0 +1,20 @@
+<div>
+  <table class="table">
+    <thead>
+      <tr>
+        <td>No</td>
+        <td>CategoryId</td>
+        <td>ItemId</td>
+        <td>Name</td>
+      </tr>
+    </thead>
+    <tbody ng-repeat="s in stores">
+      <tr>
+        <td>{{$index}}</td>
+        <td>{{s.CategoryId}}</td>
+        <td>{{s.ItemId}}</td>
+        <td>{{s.Name}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>