step-2 angular template with repeater

IgorMinar · IgorMinar · commit d90cbe489b34 · 2012-10-18T00:02:21.000-07: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 JsTD (see README.md for instructions)
diff --git a/app/index.html b/app/index.html
@@ -6,21 +6,14 @@
   <link rel="stylesheet" href="css/app.css">
   <link rel="stylesheet" href="css/bootstrap.css">
   <script src="lib/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">
+      {{phone.name}}
+      <p>{{phone.snippet}}</p>
     </li>
   </ul>
 
diff --git a/app/js/controllers.js b/app/js/controllers.js
@@ -1,3 +1,14 @@
 'use strict';
 
 /* Controllers */
+
+function PhoneListCtrl($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,7 +1,15 @@
 'use strict';
 
 /* jasmine specs for controllers go here */
+describe('PhoneCat controllers', function() {
 
-describe('controllers', function() {
+  describe('PhoneListCtrl', function(){
 
+    it('should create "phones" model with 3 phones', function() {
+      var scope = {},
+          ctrl = new PhoneListCtrl(scope);
+
+      expect(scope.phones.length).toBe(3);
+    });
+  });
 });
