step-2 Angular Templates

petebacondarwin · petebacondarwin · commit a8180b7e6ee5 · 2016-07-07T14:02:53.000+01:00
- Convert the static phone list to dynamic by:
  - Creating a `PhoneListController` controller.
  - Extracting the data from HTML into the controller as an in-memory dataset.
  - Converting the static document into a template with the use of the `ngRepeat` directive.
- Add a simple unit test for the `PhoneListController` controller to show how to write tests and
  run them using Karma (see README.md for instructions).
diff --git a/app/app.js b/app/app.js
@@ -0,0 +1,20 @@
+'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.'
+    }
+  ];
+});
diff --git a/app/app.spec.js b/app/app.spec.js
@@ -0,0 +1,14 @@
+'use strict';
+
+describe('PhoneListController', function() {
+
+  beforeEach(module('phonecatApp'));
+
+  it('should create a `phones` model with 3 phones', inject(function($controller) {
+    var scope = {};
+    var ctrl = $controller('PhoneListController', {$scope: scope});
+
+    expect(scope.phones.length).toBe(3);
+  }));
+
+});
diff --git a/app/index.html b/app/index.html
@@ -1,26 +1,19 @@
 <!doctype html>
-<html lang="en" ng-app>
+<html lang="en" ng-app="phonecatApp">
   <head>
     <meta charset="utf-8">
     <title>Google Phone Gallery</title>
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
     <link rel="stylesheet" href="app.css" />
     <script src="bower_components/angular/angular.js"></script>
+    <script src="app.js"></script>
   </head>
-  <body>
+  <body ng-controller="PhoneListController">
 
     <ul>
-      <li>
-        <span>Nexus S</span>
-        <p>
-          Fast just got faster with Nexus S.
-        </p>
-      </li>
-      <li>
-        <span>Motorola XOOM™ with Wi-Fi</span>
-        <p>
-          The Next, Next Generation tablet.
-        </p>
+      <li ng-repeat="phone in phones">
+        <span>{{phone.name}}</span>
+        <p>{{phone.snippet}}</p>
       </li>
     </ul>
 
