step-2 angular template with repeater

petebacondarwin · petebacondarwin · commit 88615c87818e · 2015-06-29T13:36:12.000+01:00
- Converted the static html list into dynamic one by:
  - creating PhoneListCtrl controller for the application
  - extracting the data from HTML into a the controller as an in-memory
    dataset
  - converting the static document into a template with the use of
    `[ngRepeat]` [directive] which iterates over the dataset with phones,
    clones the ngRepeat template for each instance and renders it into the
    view
- Added a simple unit test to show off how to write tests and run them
  with Karma (see README.md for instructions)
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="css/app.css">
   <script src="bower_components/angular/angular.js"></script>
+  <script src="js/controllers.js"></script>
 </head>
-<body>
+<body ng-controller="PhoneListCtrl">
 
   <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>
 
diff --git a/app/js/controllers.js b/app/js/controllers.js
@@ -1,3 +1,16 @@
 'use strict';
 
 /* Controllers */
+
+var phonecatApp = angular.module('phonecatApp', []);
+
+phonecatApp.controller('PhoneListCtrl', function($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/test/unit/controllersSpec.js b/test/unit/controllersSpec.js
@@ -1,11 +1,18 @@
 'use strict';
 
 /* jasmine specs for controllers go here */
+describe('PhoneCat controllers', function() {
 
-describe('controllers', function() {
+  describe('PhoneListCtrl', function(){
 
-  it("should do something", function() {
+    beforeEach(module('phonecatApp'));
 
-  });
+    it('should create "phones" model with 3 phones', inject(function($controller) {
+      var scope = {},
+          ctrl = $controller('PhoneListCtrl', {$scope:scope});
+
+      expect(scope.phones.length).toBe(3);
+    }));
 
+  });
 });
