step-3 Components

gkalpak · gkalpak · commit c1ca5d0a2428 · 2016-11-21T12:34:37.000+02:00
- Introduce components.
- Combine the controller and the template into a reusable, isolated `phoneList` component.
- Refactor the application and tests to use the `phoneList` component.
diff --git a/app/app.js b/app/app.js
@@ -1,20 +1,4 @@
 'use strict';
 
 // Define the `phonecatApp` module
-var phonecatApp = angular.module('phonecatApp', []);
-
-// Define the `PhoneListController` controller on the `phonecatApp` module
-phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
-  $scope.phones = [
-    {
-      name: 'Nexus S',
-      snippet: 'Fast just got faster with Nexus S.'
-    }, {
-      name: 'Motorola XOOM™ with Wi-Fi',
-      snippet: 'The Next, Next Generation tablet.'
-    }, {
-      name: 'MOTOROLA XOOM™',
-      snippet: 'The Next, Next Generation tablet.'
-    }
-  ];
-});
+angular.module('phonecatApp', []);
diff --git a/app/app.spec.js b/app/app.spec.js
diff --git a/app/index.html b/app/index.html
@@ -7,15 +7,12 @@
     <link rel="stylesheet" href="app.css" />
     <script src="bower_components/angular/angular.js"></script>
     <script src="app.js"></script>
+    <script src="phone-list.component.js"></script>
   </head>
-  <body ng-controller="PhoneListController">
+  <body>
 
-    <ul>
-      <li ng-repeat="phone in phones">
-        <span>{{phone.name}}</span>
-        <p>{{phone.snippet}}</p>
-      </li>
-    </ul>
+    <!-- Use a custom component to render a list of phones -->
+    <phone-list></phone-list>
 
   </body>
 </html>
diff --git a/app/phone-list.component.js b/app/phone-list.component.js
@@ -0,0 +1,28 @@
+'use strict';
+
+// Register `phoneList` component, along with its associated controller and template
+angular.
+  module('phonecatApp').
+  component('phoneList', {
+    template:
+        '<ul>' +
+          '<li ng-repeat="phone in $ctrl.phones">' +
+            '<span>{{phone.name}}</span>' +
+            '<p>{{phone.snippet}}</p>' +
+          '</li>' +
+        '</ul>',
+    controller: function PhoneListController() {
+      this.phones = [
+        {
+          name: 'Nexus S',
+          snippet: 'Fast just got faster with Nexus S.'
+        }, {
+          name: 'Motorola XOOM™ with Wi-Fi',
+          snippet: 'The Next, Next Generation tablet.'
+        }, {
+          name: 'MOTOROLA XOOM™',
+          snippet: 'The Next, Next Generation tablet.'
+        }
+      ];
+    }
+  });
diff --git a/app/phone-list.component.spec.js b/app/phone-list.component.spec.js
@@ -0,0 +1,19 @@
+'use strict';
+
+describe('phoneList', function() {
+
+  // Load the module that contains the `phoneList` component before each test
+  beforeEach(module('phonecatApp'));
+
+  // Test the controller
+  describe('PhoneListController', function() {
+
+    it('should create a `phones` model with 3 phones', inject(function($componentController) {
+      var ctrl = $componentController('phoneList');
+
+      expect(ctrl.phones.length).toBe(3);
+    }));
+
+  });
+
+});
