Finish components, ready for course 2

upgradingangularjs · Nov 26, 2017 · d94ce31 · d94ce31
1 parent 21a60c9
commit d94ce31
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 62 deletions.
diff --git a/public/config.routes.js b/public/config.routes.js
@@ -1,16 +1,13 @@
 angular.module('app')
     .config(['$routeProvider', function($routeProvider){
         $routeProvider.when('/', {
-            templateUrl : './home/home.html',
-            controller  : 'homeController'
+            template: '<home></home>'
         }).when('/customers', {
             template: '<customers></customers>'
         }).when('/orders', {
-            templateUrl : './orders/orders.html',
-            controller  : 'ordersController'
+            template: '<orders></orders>'
         }).when('/products', {
-            templateUrl : './products/products.html',
-            controller  : 'productsController'
+            template: '<products></products>'
         }).when('/customers/:id', {
             template: '<customer-detail customer="$resolve.customer"></customer-detail>',
             resolve: {
@@ -22,8 +19,7 @@ angular.module('app')
                 ]
 			}
         }).when('/orders/:id', {
-            templateUrl : './orderDetail/orderDetail.html',
-            controller  : 'orderDetailController',
+            template: '<order-detail order="$resolve.order"></order-detail>',
             resolve: {
                 order: [
                     '$route', 'orderService', function ($route, orderService) {
@@ -33,8 +29,7 @@ angular.module('app')
                 ]
             }
         }).when('/products/:id', {
-            templateUrl : './productDetail/productDetail.html',
-            controller  : 'productDetailController',
+            template: '<product-detail product="$resolve.product"></product-detail>',
             resolve: {
                 product: [
                     '$route', 'productService', function ($route, productService) {

diff --git a/public/home/home.html b/public/home/home.html
@@ -1,3 +1,3 @@
 <div class="row">
-    <h1>{{title}}</h1>
+    <h1>{{$ctrl.title}}</h1>
 </div>
diff --git a/public/home/home.js b/public/home/home.js
@@ -1,3 +1,16 @@
-angular.module('app').controller('homeController', ['$scope', function($scope){
-    $scope.title = 'Awesome, Inc. Internal Ordering System';
-}]);
+(function(){
+    'use strict';
+
+    var homeComponent = {
+        templateUrl: './home/home.html',
+        bindings: {},
+        controller: homeComponentController
+    };
+
+    function homeComponentController(){
+        var vm = this;
+        vm.title = 'Awesome, Inc. Internal Ordering System';
+    }
+
+    angular.module('app').component('home', homeComponent);
+})();
diff --git a/public/orderDetail/orderDetail.html b/public/orderDetail/orderDetail.html
@@ -1,12 +1,12 @@
 <div class="row">
-    <h1>{{title}}: {{order.id}}</h1>
+    <h1>{{$ctrl.title}}: {{$ctrl.order.id}}</h1>
 </div>
 <div class="row">
     <div class="col-md-3">
         <h3>Customer Name:</h3>
     </div>
     <div class="col-md-4 end">
-        <h3>{{customer.fullName}}</h3>
+        <h3>{{$ctrl.customer.fullName}}</h3>
     </div>
 </div>
 <div class="row">
@@ -22,7 +22,7 @@ <h3>Items</h3>
                 </tr>
             </thead>
             <tbody>
-                <tr data-ng-repeat="item in order.items">
+                <tr data-ng-repeat="item in $ctrl.order.items">
                     <td>
                         <a data-ng-href="#/products/{{item.productId}}">{{item.productId}}</td>
                     <td>{{item.productName}}</td>
@@ -33,27 +33,27 @@ <h3>Items</h3>
         </table>
     </div>
 </div>
-<div class="row" data-ng-if="customer.getsDiscount">
+<div class="row" data-ng-if="$ctrl.customer.getsDiscount">
     <div class="col-md-3">
         <h4>Total Cost:</h4>
     </div>
     <div class="col-md-4 end">
-        <h4>{{order.totalCost | currency}}</h4>
+        <h4>{{$ctrl.order.totalCost | currency}}</h4>
     </div>
 </div>
-<div class="row" data-ng-if="customer.getsDiscount">
+<div class="row" data-ng-if="$ctrl.customer.getsDiscount">
     <div class="col-md-3">
         <h4>Customer Discount:</h4>
     </div>
     <div class="col-md-4 end">
-        <h4>{{customer.discount.discountPercent}}%</h4>
+        <h4>{{$ctrl.customer.discount.discountPercent}}%</h4>
     </div>
 </div>
 <div class="row">
     <div class="col-md-3">
         <h4>Total Sale:</h4>
     </div>
     <div class="col-md-4 end">
-        <h4>{{order.totalSale | currency}}</h4>
+        <h4>{{$ctrl.order.totalSale | currency}}</h4>
     </div>
 </div>
diff --git a/public/orderDetail/orderDetail.js b/public/orderDetail/orderDetail.js
@@ -1,19 +1,32 @@
-angular.module('app').controller('orderDetailController', ['$scope', 'order', 'productService', 'customerService',
-    function ($scope, order, productService, customerService) {
-        $scope.title = 'Order Detail';
-        $scope.order = order;
+(function(){
+    'use strict';
 
-        activate();
+    var orderDetailComponent = {
+        templateUrl: './orderDetail/orderDetail.html',
+        bindings: {
+            order: '<'
+        },
+        controller: orderDetailComponentController
+    };
 
-        function activate() {
+    orderDetailComponentController.$inject = ['productService', 'customerService'];
+    function orderDetailComponentController(productService, customerService) {
+        var vm = this;
+        vm.title = 'Order Detail';
+        vm.order = this.order;
+
+        vm.$onInit = function() {
             var products = productService.getProducts();
-            $scope.customer = customerService.getCustomer($scope.order.customerId);
-            $scope.order.items.forEach(function (item) {
+            vm.customer = customerService.getCustomer(vm.order.customerId);
+            vm.order.items.forEach(function (item) {
                 var product = _.find(products, function (product) {
                     return product.id === item.productId;
-                })
+                });
                 item.productName = product.name;
                 item.itemPrice = item.quantity * product.price;
             });
-        }
-    }]);
+        };
+    }
+
+    angular.module('app').component('orderDetail', orderDetailComponent);
+})();
diff --git a/public/orders/orders.html b/public/orders/orders.html
@@ -1,5 +1,5 @@
 <div class="row">
-    <h1>{{title}}</h1>
+    <h1>{{$ctrl.title}}</h1>
     <table class="table">
             <thead>
                 <tr>
@@ -10,7 +10,7 @@ <h1>{{title}}</h1>
                 </tr>
             </thead>
             <tbody>
-                <tr data-ng-repeat="order in orders">
+                <tr data-ng-repeat="order in $ctrl.orders">
                     <td><a data-ng-href="#/orders/{{order.id}}">{{order.id}}</a></td>
                     <td>{{order.customerName}}</td>
                     <td>{{order.totalItems}}</td>

diff --git a/public/orders/orders.js b/public/orders/orders.js
@@ -1,17 +1,28 @@
-angular.module('app').controller('ordersController', ['$scope', 'orderService', 'customerService',
-    function ($scope, orderService, customerService) {
-        $scope.title = 'Orders';
+(function(){
+    'use strict';
 
-        activate();
+    var ordersComponent = {
+        templateUrl: './orders/orders.html',
+        bindings: {},
+        controller: ordersComponentController
+    };
 
-        function activate() {
-            $scope.customers = customerService.getCustomers();
-            $scope.orders = orderService.getOrders();
-            $scope.orders.forEach(function (order) {
-                var customer = _.find($scope.customers, function (customer) {
+    ordersComponentController.$inject = ['orderService', 'customerService'];
+    function ordersComponentController(orderService, customerService) {
+        var vm = this;
+        vm.title = 'Orders';
+
+        vm.$onInit = function() {
+            vm.customers = customerService.getCustomers();
+            vm.orders = orderService.getOrders();
+            vm.orders.forEach(function (order) {
+                var customer = _.find(vm.customers, function (customer) {
                     return order.customerId === customer.id;
-                })
+                });
                 order.customerName = customer.fullName;
             });
-        }
-    }]);
+        };
+    }
+
+    angular.module('app').component('orders', ordersComponent);
+})();
diff --git a/public/productDetail/productDetail.html b/public/productDetail/productDetail.html
@@ -1,19 +1,19 @@
 <div class="row">
-    <h1>{{title}}: {{product.name}}</h1>
+    <h1>{{$ctrl.title}}: {{$ctrl.product.name}}</h1>
 </div>
 <div class="row">
     <div class="col-md-3">
         <b>Color:</b>
     </div>
     <div class="col-md-4 end">
-        {{product.color}}
+        {{$ctrl.product.color}}
     </div>
 </div>
 <div class="row">
     <div class="col-md-3">
         <b>Price:</b>
     </div>
     <div class="col-md-4 end">
-        {{product.price | currency}}
+        {{$ctrl.product.price | currency}}
     </div>
 </div>
diff --git a/public/productDetail/productDetail.js b/public/productDetail/productDetail.js
@@ -1,4 +1,19 @@
-angular.module('app').controller('productDetailController', ['$scope', 'product', function($scope, product){
-    $scope.title = 'Product Detail';
-    $scope.product = product;
-}]);
+(function(){
+    'use strict';
+
+    var productDetailComponent = {
+        templateUrl: './productDetail/productDetail.html',
+        bindings: {
+            product: '<'
+        },
+        controller: productDetailComponentController
+    };
+
+    function productDetailComponentController(){
+        var vm = this;
+        vm.title = 'Product Detail';
+        vm.product = this.product;
+    }
+
+    angular.module('app').component('productDetail', productDetailComponent);
+})();
diff --git a/public/products/products.html b/public/products/products.html
@@ -1,6 +1,6 @@
 <div class="row">
     <div class="col-md-12">
-        <h1>{{title}}</h1>
+        <h1>{{$ctrl.title}}</h1>
         <table class="table">
             <thead>
                 <tr>
@@ -11,7 +11,7 @@ <h1>{{title}}</h1>
                 </tr>
             </thead>
             <tbody>
-                <tr data-ng-repeat="product in products">
+                <tr data-ng-repeat="product in $ctrl.products">
                     <td><a data-ng-href="#/products/{{product.id}}">{{product.id}}</a></td>
                     <td>{{product.name}}</td>
                     <td>{{product.color}}</td>

diff --git a/public/products/products.js b/public/products/products.js
@@ -1,9 +1,21 @@
-angular.module('app').controller('productsController', ['$scope', 'productService', function($scope, productService){
-    $scope.title = 'Products';
+(function(){
+    'use strict';
 
-    activate();
+    var productsComponent = {
+        templateUrl: './products/products.html',
+        bindings: {},
+        controller: productsComponentController
+    };
 
-    function activate(){
-        $scope.products = productService.getProducts();
+    productsComponentController.$inject = ['productService', ];
+    function productsComponentController(productService){
+        var vm = this;
+        vm.title = 'Products';
+
+        vm.$onInit = function(){
+            vm.products = productService.getProducts();
+        };
     }
-}]);
+
+    angular.module('app').component('products', productsComponent);
+})();