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

Commit c8a72ec

Browse files
petebacondarwingkalpak
petebacondarwin
authored and
gkalpak
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 4db3c69 commit c8a72ec

File tree

7 files changed

+65
-6
lines changed

7 files changed

+65
-6
lines changed

‎app/app.config.js

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

‎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+
]);

‎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: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,17 @@
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+
browser.getLocationAbsUrl().then(function(url) {
11+
expect(url).toBe('/phones');
12+
});
13+
});
14+
15+
describe('View: Phone list', function() {
916

1017
beforeEach(function() {
11-
browser.get('index.html');
18+
browser.get('index.html#/phones');
1219
});
1320

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

6370
});
6471

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

0 commit comments

Comments
 (0)