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

Commit 8655c41

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 986d225 commit 8655c41

File tree

9 files changed

+68
-5
lines changed

9 files changed

+68
-5
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: 2 additions & 1 deletion
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
5+
'ngRoute',
6+
'phoneDetail',
67
'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="lib/bootstrap/dist/css/bootstrap.css" />
77
<link rel="stylesheet" href="app.css" />
88
<script src="lib/angular/angular.js"></script>
9+
<script src="lib/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+
]);

‎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.getCurrentUrl()).toContain('index.html#!/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
'lib/angular/angular.js',
9+
'lib/angular-route/angular-route.js',
910
'../node_modules/angular-mocks/angular-mocks.js',
1011
'**/*.module.js',
1112
'*!(.module|.spec).js',

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"license": "MIT",
88
"dependencies": {
99
"angular": "1.7.x",
10+
"angular-route": "1.7.x",
1011
"bootstrap": "3.3.x"
1112
},
1213
"devDependencies": {

0 commit comments

Comments
 (0)