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

Commit a721374

Browse files
petebacondarwinpetebacondarwin
committed
step-9 Routing & Multiple Views
- Introduce the `$route` service, which allows binding URLs to views for routing and deep-linking: - Add the `ngRoute` module as a dependency. - Configure routes for the application. - Use the `ngView` directive in 'index.html'. - Create a phone list route (`/phones`): - Map `/phones` to the existing `phoneList` component. - Create a phone detail route (`/phones/:phoneId`): - Map `/phones/:phoneId` to a new `phoneDetail` component. - Create a dummy `phoneDetail` component, which displays the selected phone ID. - Pass the `phoneId` parameter to the component's controller via `$routeParams`.
1 parent 4471508 commit a721374

File tree

9 files changed

+68
-8
lines changed

9 files changed

+68
-8
lines changed

‎app/app.config.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use strict';
2+
3+
angular.
4+
module('phonecatApp').
5+
config(['$locationProvider' ,'$routeProvider',
6+
function config($locationProvider, $routeProvider) {
7+
$locationProvider.hashPrefix('!');
8+
9+
$routeProvider.
10+
when('/phones', {
11+
template: '<phone-list></phone-list>'
12+
}).
13+
when('/phones/:phoneId', {
14+
template: '<phone-detail></phone-detail>'
15+
}).
16+
otherwise('/phones');
17+
}
18+
]);

‎app/app.module.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
// Define the `phonecatApp` module
44
angular.module('phonecatApp', [
5-
// ...which depends on the `phoneList` module
6-
'phoneList'
5+
'ngRoute',
6+
'phoneDetail',
7+
'phoneList',
78
]);

‎app/index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,17 @@
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="bower_components/angular-route/angular-route.js"></script>
910
<script src="app.module.js"></script>
11+
<script src="app.config.js"></script>
1012
<script src="phone-list/phone-list.module.js"></script>
1113
<script src="phone-list/phone-list.component.js"></script>
14+
<script src="phone-detail/phone-detail.module.js"></script>
15+
<script src="phone-detail/phone-detail.component.js"></script>
1216
</head>
1317
<body>
1418

15-
<!-- Use a custom component to render a list of phones -->
16-
<phone-list></phone-list>
19+
<div ng-view></div>
1720

1821
</body>
1922
</html>

‎app/phone-detail/phone-detail.component.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict';
2+
3+
// Register `phoneDetail` component, along with its associated controller and template
4+
angular.
5+
module('phoneDetail').
6+
component('phoneDetail', {
7+
template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
8+
controller: ['$routeParams',
9+
function PhoneDetailController($routeParams) {
10+
this.phoneId = $routeParams.phoneId;
11+
}
12+
]
13+
});

‎app/phone-detail/phone-detail.module.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict';
2+
3+
// Define the `phoneDetail` module
4+
angular.module('phoneDetail', [
5+
'ngRoute'
6+
]);

‎app/phone-list/phone-list.template.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@
2222

2323
<ul class="phones">
2424
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
25-
<a href="#/phones/{{phone.id}}" class="thumb">
25+
<a href="#!/phones/{{phone.id}}" class="thumb">
2626
<img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
2727
</a>
28-
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
28+
<a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
2929
<p>{{phone.snippet}}</p>
3030
</li>
3131
</ul>

‎bower.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"dependencies": {
99
"angular": "1.5.x",
1010
"angular-mocks": "1.5.x",
11+
"angular-route": "1.5.x",
1112
"bootstrap": "3.3.x"
1213
}
1314
}

‎e2e-tests/scenarios.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,15 @@
55

66
describe('PhoneCat Application', function() {
77

8-
describe('phoneList', function() {
8+
it('should redirect `index.html` to `index.html#!/phones', function() {
9+
browser.get('index.html');
10+
expect(browser.getLocationAbsUrl()).toBe('/phones');
11+
});
12+
13+
describe('View: Phone list', function() {
914

1015
beforeEach(function() {
11-
browser.get('index.html');
16+
browser.get('index.html#!/phones');
1217
});
1318

1419
it('should filter the phone list as a user types into the search box', function() {
@@ -62,4 +67,16 @@ describe('PhoneCat Application', function() {
6267

6368
});
6469

70+
describe('View: Phone detail', function() {
71+
72+
beforeEach(function() {
73+
browser.get('index.html#!/phones/nexus-s');
74+
});
75+
76+
it('should display placeholder page with `phoneId`', function() {
77+
expect(element(by.binding('$ctrl.phoneId')).getText()).toBe('nexus-s');
78+
});
79+
80+
});
81+
6582
});

‎karma.conf.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ module.exports = function(config) {
66

77
files: [
88
'bower_components/angular/angular.js',
9+
'bower_components/angular-route/angular-route.js',
910
'bower_components/angular-mocks/angular-mocks.js',
1011
'**/*.module.js',
1112
'*!(.module|.spec).js',

0 commit comments

Comments
 (0)