Initial commit-REST API Display'

akashbanerjee · akashbanerjee · commit 85d5bc589222 · 2017-04-25T10:39:26.000+05:30
diff --git a/master-detail-view-pair/css/styles.css b/master-detail-view-pair/css/styles.css
@@ -0,0 +1,27 @@
+body {
+  font-size: 1.2em;
+}
+
+.error {
+  color: red;
+  font-weight: bold;
+  display: none;
+}
+
+.loading-icon {
+  position: absolute;
+  left: 50%;
+  top: 10px;
+}
+
+.active {
+  font-weight: bold;
+}
+
+li[ui-sref]:hover {
+  display: inline-block;
+  cursor: pointer;
+  border: solid black 1px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
diff --git a/master-detail-view-pair/images/flickr-loading.gif b/master-detail-view-pair/images/flickr-loading.gif
diff --git a/master-detail-view-pair/index.html b/master-detail-view-pair/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html ng-app='MenuApp'>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="css/styles.css">
+    <title>Welcome to our Restaurant</title>
+  </head>
+  <body>
+    <h1>Welcome to our Restaurant</h1>
+
+    <ui-view></ui-view>
+    <loading-spinner></loading-spinner>
+
+    <!-- Libraries -->
+    <script src="lib/angular.min.js"></script>
+    <script src="lib/angular-ui-router.min.js"></script>
+
+    <!-- Modules -->
+    <script src="src/shoppinglist/menuapp.module.js"></script>
+    <script src="src/shoppinglist/data.module.js"></script>
+
+
+    <!-- Routes -->
+    <script src="src/routes.js"></script>
+     <script src="src/spinner/spinner.module.js"></script>
+
+
+    <!-- 'ShoppingList' module artifacts -->
+    <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>
+
+
+
+    <!-- 'Spinner' module artifacts -->
+    <script src="src/spinner/loadingspinner.component.js"></script>
+     
+  </body>
+</html>
diff --git a/master-detail-view-pair/lib/angular-ui-router.min.js b/master-detail-view-pair/lib/angular-ui-router.min.js
diff --git a/master-detail-view-pair/lib/angular.min.js b/master-detail-view-pair/lib/angular.min.js
diff --git a/master-detail-view-pair/src/routes.js b/master-detail-view-pair/src/routes.js
@@ -0,0 +1,39 @@
+(function () {
+'use strict';
+
+angular.module('MenuApp')
+.config(RoutesConfig);
+
+RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
+function RoutesConfig($stateProvider, $urlRouterProvider) {
+
+
+  $urlRouterProvider.otherwise('/');
+
+
+  $stateProvider
+
+ 
+  .state('home', {
+    url: '/',
+    templateUrl: 'src/shoppinglist/templates/home.template.html'
+  })
+
+
+  .state('categories', {
+    url: '/categories',
+    templateUrl: 'src/shoppinglist/templates/main-shoppinglist.template.html',
+    controller: 'MainShoppingListController as categories',
+    resolve: {
+      items: ['MenuDataService ', function (MenuDataService) {
+        return MenuDataService .getAllCategories().then(function(response)  {
+          return response.data;
+        });
+      }]
+    }
+  });
+
+ 
+}
+
+})();
diff --git a/master-detail-view-pair/src/shoppinglist/categories.component.js b/master-detail-view-pair/src/shoppinglist/categories.component.js
@@ -0,0 +1,12 @@
+(function () {
+'use strict';
+
+angular.module('MenuApp')
+.component('categories', {
+  templateUrl: 'src/shoppinglist/templates/categories.component.template.html',
+  bindings: {
+    items: '<'
+  }
+});
+
+})();
diff --git a/master-detail-view-pair/src/shoppinglist/data.module.js b/master-detail-view-pair/src/shoppinglist/data.module.js
@@ -0,0 +1,6 @@
+(function () {
+'use strict';
+
+angular.module('Data', []);
+
+})();
diff --git a/master-detail-view-pair/src/shoppinglist/main-shoppinglist.controller.js b/master-detail-view-pair/src/shoppinglist/main-shoppinglist.controller.js
@@ -0,0 +1,16 @@
+(function () {
+'use strict';
+
+angular.module('MenuApp')
+.controller('MainShoppingListController', MainShoppingListController);
+
+
+MainShoppingListController.$inject = ['items'];
+function MainShoppingListController(items) {
+  var categories = this;
+  categories.items = items;
+
+ 
+}
+
+})();
diff --git a/master-detail-view-pair/src/shoppinglist/menuapp.module.js b/master-detail-view-pair/src/shoppinglist/menuapp.module.js
@@ -0,0 +1,6 @@
+(function () {
+'use strict';
+
+angular.module('MenuApp', ['ui.router','Spinner','Data']);
+
+})();
diff --git a/master-detail-view-pair/src/shoppinglist/menudata.service.js b/master-detail-view-pair/src/shoppinglist/menudata.service.js
@@ -0,0 +1,41 @@
+(function () {
+'use strict';
+
+angular.module('Data')
+.service('MenuDataService ', MenuDataService )
+.constant('ApiBasePath', "https://davids-restaurant.herokuapp.com");
+
+
+MenuDataService .$inject = ['$http', 'ApiBasePath'];
+function MenuDataService ($http, ApiBasePath) {
+  var service = this;
+
+
+ 
+
+  
+  service.getAllCategories  = function () {
+    
+       return $http({
+        method: "GET",
+        url: (ApiBasePath + "/categories.json")
+      });
+      
+  };
+
+/*  service.getItemsForCategory  = function (categoryShortName) {
+      var deferred = $q.defer();
+
+      
+      $timeout(function () {
+        
+        deferred.resolve(items);
+      }, 800);
+
+      return deferred.promise;
+    };*/  
+
+
+}
+
+})();
diff --git a/master-detail-view-pair/src/shoppinglist/templates/categories.component.template.html b/master-detail-view-pair/src/shoppinglist/templates/categories.component.template.html
@@ -0,0 +1,5 @@
+<ul>
+  <li ng-repeat="item in $ctrl.items">
+    {{ item.short_name }} {{item.name}} {{item.description}}
+  </li>
+</ul>
diff --git a/master-detail-view-pair/src/shoppinglist/templates/home.template.html b/master-detail-view-pair/src/shoppinglist/templates/home.template.html
@@ -0,0 +1 @@
+<a ui-sref="categories">Explore Menu!</a>
diff --git a/master-detail-view-pair/src/shoppinglist/templates/main-shoppinglist.template.html b/master-detail-view-pair/src/shoppinglist/templates/main-shoppinglist.template.html
@@ -0,0 +1,5 @@
+ <a ui-sref="home">Home</a> &lt; <span>List</span>
+  <h3>All Categories Menu</h3>
+  <categories items="categories.items"></categories>
+
+  <ui-view></ui-view>
diff --git a/master-detail-view-pair/src/spinner/loadingspinner.component.js b/master-detail-view-pair/src/spinner/loadingspinner.component.js
@@ -0,0 +1,43 @@
+(function() {
+  'use strict';
+
+  angular.module('Spinner')
+  .component('loadingSpinner', {
+    templateUrl: 'src/spinner/loadingspinner.template.html',
+    controller: SpinnerController
+  });
+  
+  SpinnerController.$inject= ['$rootScope'];
+  function SpinnerController($rootScope)  {
+    var $ctrl = this;
+    var cancellers= [];
+
+    $ctrl.$onInit = function()  {
+      var cancel = $rootScope.$on('$stateChangeStart',
+        function(event, toState, toParams, fromState, fromParams, options)  {
+          $ctrl.showSpinner = true;
+        });
+      cancellers.push(cancel);
+
+      cancel = $rootScope.$on('$stateChangeSuccess',
+        function(event, toState, toParams, fromState, fromParams, error)  {
+          $ctrl.showSpinner = false;
+        });
+      cancellers.push(cancel);
+
+      cancel = $rootScope.$on('$stateChangeError',
+        function(event, toState, toParams, fromState, fromParams, error)  {
+          $ctrl.showSpinner = false;
+        });
+      cancellers.push(cancel);
+    };
+   
+
+    $ctrl.$onDestroy = function() {
+      cancellers.forEach(function(item) {
+        item();
+      });
+    };
+  }
+})();
+
diff --git a/master-detail-view-pair/src/spinner/loadingspinner.template.html b/master-detail-view-pair/src/spinner/loadingspinner.template.html
@@ -0,0 +1,4 @@
+<img ng-if="$ctrl.showSpinner"
+     class="loading-icon"
+     src="images/flickr-loading.gif"
+     alt="loading">
diff --git a/master-detail-view-pair/src/spinner/spinner.module.js b/master-detail-view-pair/src/spinner/spinner.module.js
@@ -0,0 +1,14 @@
+(function () {
+'use strict';
+
+angular.module('Spinner', []);
+
+angular.module('Spinner')
+.config(function () {
+  console.log("Spinner config fired.");
+}).
+run(function () {
+  console.log("Spinner run fired.");
+});
+
+})();
