Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.

Commit 88615c8

Browse files
step-2 angular template with repeater
- 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)
1 parent 6922839 commit 88615c8

File tree

3 files changed

+29
-16
lines changed

3 files changed

+29
-16
lines changed

app/index.html

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,19 @@
11
<!doctype html>
2-
<html lang="en" ng-app>
2+
<html lang="en" ng-app="phonecatApp">
33
<head>
44
<meta charset="utf-8">
55
<title>Google Phone Gallery</title>
66
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
77
<link rel="stylesheet" href="css/app.css">
88
<script src="bower_components/angular/angular.js"></script>
9+
<script src="js/controllers.js"></script>
910
</head>
10-
<body>
11+
<body ng-controller="PhoneListCtrl">
1112

1213
<ul>
13-
<li>
14-
<span>Nexus S</span>
15-
<p>
16-
Fast just got faster with Nexus S.
17-
</p>
18-
</li>
19-
<li>
20-
<span>Motorola XOOM™ with Wi-Fi</span>
21-
<p>
22-
The Next, Next Generation tablet.
23-
</p>
14+
<li ng-repeat="phone in phones">
15+
<span>{{phone.name}}</span>
16+
<p>{{phone.snippet}}</p>
2417
</li>
2518
</ul>
2619

app/js/controllers.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
11
'use strict';
22

33
/* Controllers */
4+
5+
var phonecatApp = angular.module('phonecatApp', []);
6+
7+
phonecatApp.controller('PhoneListCtrl', function($scope) {
8+
$scope.phones = [
9+
{'name': 'Nexus S',
10+
'snippet': 'Fast just got faster with Nexus S.'},
11+
{'name': 'Motorola XOOM™ with Wi-Fi',
12+
'snippet': 'The Next, Next Generation tablet.'},
13+
{'name': 'MOTOROLA XOOM™',
14+
'snippet': 'The Next, Next Generation tablet.'}
15+
];
16+
});

test/unit/controllersSpec.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
'use strict';
22

33
/* jasmine specs for controllers go here */
4+
describe('PhoneCat controllers', function() {
45

5-
describe('controllers', function() {
6+
describe('PhoneListCtrl', function(){
67

7-
it("should do something", function() {
8+
beforeEach(module('phonecatApp'));
89

9-
});
10+
it('should create "phones" model with 3 phones', inject(function($controller) {
11+
var scope = {},
12+
ctrl = $controller('PhoneListCtrl', {$scope:scope});
13+
14+
expect(scope.phones.length).toBe(3);
15+
}));
1016

17+
});
1118
});

0 commit comments

Comments
 (0)