Adding third view state- items category

Author: akashbanerjee

master-detail-view-pair/index.html

@@ -19,18 +19,21 @@ <h1>Welcome to our Restaurant</h1>
     <script src="src/shoppinglist/menuapp.module.js"></script>
     <script src="src/shoppinglist/data.module.js"></script>
 
+    <!-- Services -->
+    <script src="src/shoppinglist/menudata.service.js"></script>
 
     <!-- Routes -->
     <script src="src/routes.js"></script>
-     <script src="src/spinner/spinner.module.js"></script>
-
+    <script src="src/spinner/spinner.module.js"></script>
 
-    <!-- 'ShoppingList' module artifacts -->
+    <!-- Components -->
     <script src="src/shoppinglist/categories.component.js"></script>
-    <script src="src/shoppinglist/main-shoppinglist.controller.js"></script>
-    <script src="src/shoppinglist/menudata.service.js"></script>
-
+    <script src="src/shoppinglist/items.component.js"></script>
 
+    <!-- Controllers -->
+    <script src="src/shoppinglist/main-shoppinglist.controller.js"></script>
+    <script src="src/shoppinglist/item-detail.controller.js"></script>
+ 
 
     <!-- 'Spinner' module artifacts -->
     <script src="src/spinner/loadingspinner.component.js"></script>

master-detail-view-pair/src/routes.js

@@ -26,14 +26,32 @@ function RoutesConfig($stateProvider, $urlRouterProvider) {
     controller: 'MainShoppingListController as categories',
     resolve: {
       items: ['MenuDataService ', function (MenuDataService) {
-        return MenuDataService .getAllCategories().then(function(response)  {
+        return MenuDataService.getAllCategories().then(function(response)  {
           return response.data;
         });
       }]
     }
+  })
+
+   .state('items', {
+    url: '/items/{category}',
+    templateUrl: 'src/shoppinglist/templates/items.template.html',
+    controller: 'ItemDetailController as itemDetail',
+    resolve: {
+      items: ['$stateParams','MenuDataService', 
+        function ($stateParams,MenuDataService) {
+          return MenuDataService.getItemsForCategory($stateParams.category)
+            .then(function(response)  {
+              return response.data.menu_items;
+            });
+        }]
+    }
   });
 
+
+  
+
 
-}
+} 
 
 })();

master-detail-view-pair/src/shoppinglist/item-detail.controller.js

@@ -0,0 +1,14 @@
+(function ()  {
+  'use strict';
+
+  angular.module('MenuApp')
+  .controller('ItemDetailController', ItemDetailController);
+
+  
+  ItemDetailController.$inject = ['items'];
+  function ItemDetailController(items) {
+    var itemDetail = this;
+    itemDetail.items = items;
+  }
+
+})();

master-detail-view-pair/src/shoppinglist/items.component.js

@@ -0,0 +1,12 @@
+(function () {
+'use strict';
+
+angular.module('MenuApp')
+.component('items', {
+  templateUrl: 'src/shoppinglist/templates/items.component.template.html',
+  bindings: {
+    items: '<'
+  }
+});
+
+})();

master-detail-view-pair/src/shoppinglist/menudata.service.js

@@ -10,9 +10,6 @@ MenuDataService .$inject = ['$http', 'ApiBasePath'];
 function MenuDataService ($http, ApiBasePath) {
   var service = this;
 
-
- 
-
 
   service.getAllCategories  = function () {
 
@@ -23,19 +20,16 @@ function MenuDataService ($http, ApiBasePath) {
 
   };
 
-/*  service.getItemsForCategory  = function (categoryShortName) {
-      var deferred = $q.defer();
-
+  service.getItemsForCategory  = function (categoryShortName) {
 
-      $timeout(function () {
-        
-        deferred.resolve(items);
-      }, 800);
-
-      return deferred.promise;
-    };*/  
-
+      return $http({
+        method: "GET",
+        url: (ApiBasePath + "/menu_items.json"),
+        params: {category: categoryShortName}
+      });
 
+  };
 }
 
-})();
+
+})(); 

master-detail-view-pair/src/shoppinglist/templates/categories.component.template.html

@@ -1,5 +1,6 @@
 <ul>
   <li ng-repeat="item in $ctrl.items">
-    {{ item.short_name }} {{item.name}} {{item.description}}
+    <a ui-sref="items({category: item.short_name })">{{item.name}}</a> 
   </li>
-</ul>
+</ul>
+

master-detail-view-pair/src/shoppinglist/templates/items.component.template.html

@@ -0,0 +1,5 @@
+<ul>
+  <li ng-repeat="item in $ctrl.items">
+    {{item.name}}
+  </li>
+</ul>

master-detail-view-pair/src/shoppinglist/templates/items.template.html

@@ -0,0 +1 @@
+<items items="itemDetail.items"></items>