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

Commit a78ba30

Browse files
petebacondarwingkalpak
authored andcommitted
step-2 Angular Templates
- 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).
1 parent 36494c3 commit a78ba30

File tree

3 files changed

+40
-13
lines changed

3 files changed

+40
-13
lines changed

app/app.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
'use strict';
2+
3+
// Define the `phonecatApp` module
4+
var phonecatApp = angular.module('phonecatApp', []);
5+
6+
// Define the `PhoneListController` controller on the `phonecatApp` module
7+
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
8+
$scope.phones = [
9+
{
10+
name: 'Nexus S',
11+
snippet: 'Fast just got faster with Nexus S.'
12+
}, {
13+
name: 'Motorola XOOM™ with Wi-Fi',
14+
snippet: 'The Next, Next Generation tablet.'
15+
}, {
16+
name: 'MOTOROLA XOOM™',
17+
snippet: 'The Next, Next Generation tablet.'
18+
}
19+
];
20+
});

app/app.spec.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use strict';
2+
3+
describe('PhoneListController', function() {
4+
5+
beforeEach(module('phonecatApp'));
6+
7+
it('should create a `phones` model with 3 phones', inject(function($controller) {
8+
var scope = {};
9+
var ctrl = $controller('PhoneListController', {$scope: scope});
10+
11+
expect(scope.phones.length).toBe(3);
12+
}));
13+
14+
});

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="app.css" />
88
<script src="bower_components/angular/angular.js"></script>
9+
<script src="app.js"></script>
910
</head>
10-
<body>
11+
<body ng-controller="PhoneListController">
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

0 commit comments

Comments
 (0)