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

…#6
sinmetal · May 19, 2013 · 3547c64 · 3547c64
1 parent dc846a9
commit 3547c64
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 21 deletions.
diff --git a/app.yaml b/app.yaml
@@ -12,6 +12,10 @@ handlers:
   static_files: list.html
   upload: list.html
 
+- url: /entry.html
+  static_files: entry.html
+  upload: entry.html
+
 - url: /lib
   static_dir: lib
 

diff --git a/entry.html b/entry.html
@@ -0,0 +1,16 @@
+<div>
+  <form ng-submit="submit()">
+    <select ng-model="entryForm.categoryId" ng-options="c.id as c.name for c in categories" ng-change="changeCategory()">
+      <option value="">-- chose category --</option>
+    </select>
+    <br />
+    <select ng-model="entryForm.itemId" ng-options="i.id as i.name for i in items">
+      <option value="">-- chose item --</option>
+    </select>
+    <br />
+    <input type="text" ng-model="entryForm.name"></input>
+    <br />
+    <button type="submit" class="btn btn-primary">Save</button>
+    <a href="#/" class="btn">Cancel</a>
+  </form>
+</div>
diff --git a/index.html b/index.html
@@ -11,26 +11,17 @@
     <![endif]--><!-- Le styles -->
     <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap-responsive.min.css">
+    <style type="text/css">
+      body {
+        padding-top: 30px;
+        padding-left: 30px;
+      }
+    </style>
   </head>
   <body>
-    <div ng-controller="MainController">
+    <div>
   	  <h2>Hello AngularJS !!</h2>
       <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()">
-            <option value="">-- chose category --</option>
-          </select>
-          <br />
-          <select ng-model="entryForm.itemId" ng-options="i.id as i.name for i in items">
-            <option value="">-- chose item --</option>
-          </select>
-          <br />
-          <input type="text" ng-model="entryForm.name"></input>
-          <br />
-          <button type="submit" class="btn">submit</button>
-        </form>
-      </div>
     </div>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script src="//code.angularjs.org/1.0.6/angular.min.js"></script>

diff --git a/js/main.js b/js/main.js
@@ -2,21 +2,20 @@
   var app = angular.module('sample', ['ngResource']).
     config(function($routeProvider) {
       $routeProvider.
-        when('/', {controller:ListController, templateUrl:'list.html'});
+        when('/', {controller:ListController, templateUrl:'list.html'}).
+        when('/entry', {controller:EntryController, templateUrl:'entry.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){
+  function EntryController($scope, $resource){
     $scope.categories = [{"id" : "1", "name" : "野菜"}];
     var List = $resource("/item/list");
     var Store = $resource("/store");
@@ -37,5 +36,5 @@
         console.log("error entry");
       });
     };
-  });
+  }
 })();
diff --git a/list.html b/list.html
@@ -17,4 +17,5 @@
       </tr>
     </tbody>
   </table>
+  <a href="#/entry" class="btn btn-primary">Entry</a>
 </div>