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

Commit 2fe56e1

Browse files
petebacondarwinpetebacondarwin
committed
step-7 $route and app partitioning
- Introduce the [$route] service which allows binding URLs for deep-linking with views - Create PhoneCatCtrl which governs the entire app and contains $route configuration - Load the ngRoute module - Map `/phones' to PhoneListCtrl and partails/phones-list.html - Map `/phones/<phone-id>' to PhoneDetailCtrl and partails/phones-detail.html - Copy deep linking parameters to root controller `params` property for access in sub controllers - Replace content of index.html with [ngView] directive - Create phone list route - Preserve existing PhoneListCtrl controller - Move existing html from index.html to partials/phone-list.html - Create phone details route - Empty placeholder PhoneDetailsCtrl controller - Empty placeholder partials/phane-details.html template
1 parent fb1b540 commit 2fe56e1

File tree

8 files changed

+94
-37
lines changed

8 files changed

+94
-37
lines changed

‎app/index.html

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,13 @@
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="bower_components/angular-route/angular-route.js"></script>
10+
<script src="js/app.js"></script>
911
<script src="js/controllers.js"></script>
1012
</head>
11-
<body ng-controller="PhoneListCtrl">
13+
<body>
1214

13-
<div class="container-fluid">
14-
<div class="row">
15-
<div class="col-md-2">
16-
<!--Sidebar content-->
17-
18-
Search: <input ng-model="query">
19-
Sort by:
20-
<select ng-model="orderProp">
21-
<option value="name">Alphabetical</option>
22-
<option value="age">Newest</option>
23-
</select>
24-
25-
</div>
26-
<div class="col-md-10">
27-
<!--Body content-->
28-
29-
<ul class="phones">
30-
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
31-
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
32-
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
33-
<p>{{phone.snippet}}</p>
34-
</li>
35-
</ul>
36-
37-
</div>
38-
</div>
39-
</div>
15+
<div ng-view></div>
4016

4117
</body>
4218
</html>

‎app/js/app.js

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

33
/* App Module */
4+
5+
var phonecatApp = angular.module('phonecatApp', [
6+
'ngRoute',
7+
'phonecatControllers'
8+
]);
9+
10+
phonecatApp.config(['$routeProvider',
11+
function($routeProvider) {
12+
$routeProvider.
13+
when('/phones', {
14+
templateUrl: 'partials/phone-list.html',
15+
controller: 'PhoneListCtrl'
16+
}).
17+
when('/phones/:phoneId', {
18+
templateUrl: 'partials/phone-detail.html',
19+
controller: 'PhoneDetailCtrl'
20+
}).
21+
otherwise({
22+
redirectTo: '/phones'
23+
});
24+
}]);

‎app/js/controllers.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,18 @@
22

33
/* Controllers */
44

5-
var phonecatApp = angular.module('phonecatApp', []);
5+
var phonecatControllers = angular.module('phonecatControllers', []);
66

7-
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {
8-
$http.get('phones/phones.json').success(function(data) {
9-
$scope.phones = data;
10-
});
7+
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
8+
function($scope, $http) {
9+
$http.get('phones/phones.json').success(function(data) {
10+
$scope.phones = data;
11+
});
1112

12-
$scope.orderProp = 'age';
13-
}]);
13+
$scope.orderProp = 'age';
14+
}]);
15+
16+
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
17+
function($scope, $routeParams) {
18+
$scope.phoneId = $routeParams.phoneId;
19+
}]);

‎app/partials/phone-detail.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TBD: detail view for <span>{{phoneId}}</span>

‎app/partials/phone-list.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="container-fluid">
2+
<div class="row">
3+
<div class="col-md-2">
4+
<!--Sidebar content-->
5+
6+
Search: <input ng-model="query">
7+
Sort by:
8+
<select ng-model="orderProp">
9+
<option value="name">Alphabetical</option>
10+
<option value="age">Newest</option>
11+
</select>
12+
13+
</div>
14+
<div class="col-md-10">
15+
<!--Body content-->
16+
17+
<ul class="phones">
18+
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
19+
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
20+
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
21+
<p>{{phone.snippet}}</p>
22+
</li>
23+
</ul>
24+
25+
</div>
26+
</div>
27+
</div>

‎bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"angular": "1.3.x",
1010
"angular-mocks": "1.3.x",
1111
"jquery": "~2.1.1",
12-
"bootstrap": "~3.1.1"
12+
"bootstrap": "~3.1.1",
13+
"angular-route": "1.3.x"
1314
}
1415
}

‎test/e2e/scenarios.js

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,18 @@
44

55
describe('PhoneCat App', function() {
66

7+
it('should redirect index.html to index.html#/phones', function() {
8+
browser.get('app/index.html');
9+
browser.getLocationAbsUrl().then(function(url) {
10+
expect(url.split('#')[1]).toBe('/phones');
11+
});
12+
});
13+
14+
715
describe('Phone list view', function() {
816

917
beforeEach(function() {
10-
browser.get('app/index.html');
18+
browser.get('app/index.html#/phones');
1119
});
1220

1321

@@ -63,4 +71,17 @@ describe('PhoneCat App', function() {
6371
});
6472
});
6573
});
74+
75+
76+
describe('Phone detail view', function() {
77+
78+
beforeEach(function() {
79+
browser.get('app/index.html#/phones/nexus-s');
80+
});
81+
82+
83+
it('should display placeholder page with phoneId', function() {
84+
expect(element(by.binding('phoneId')).getText()).toBe('nexus-s');
85+
});
86+
});
6687
});

‎test/unit/controllersSpec.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,8 @@ describe('PhoneCat controllers', function() {
3030
expect(scope.orderProp).toBe('age');
3131
});
3232
});
33+
34+
35+
describe('PhoneDetailCtrl', function(){
36+
});
3337
});

0 commit comments

Comments
 (0)