Skip to content

Commit 06f7ba1

Browse files
IgorMinarIgorMinar
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 - 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 [ng:view] widget - 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 0fe84c1 commit 06f7ba1

File tree

7 files changed

+71
-30
lines changed

7 files changed

+71
-30
lines changed

‎app/index.html‎

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,17 @@
11
<!doctype html>
2-
<html lang="en" ng-app>
2+
<html lang="en" ng-app="phonecat">
33
<head>
44
<meta charset="utf-8">
55
<title>Google Phone Gallery</title>
66
<link rel="stylesheet" href="css/app.css">
77
<link rel="stylesheet" href="css/bootstrap.css">
88
<script src="lib/angular/angular.js"></script>
9+
<script src="js/app.js"></script>
910
<script src="js/controllers.js"></script>
1011
</head>
11-
<body ng-controller="PhoneListCtrl">
12+
<body>
1213

13-
<div class="container-fluid">
14-
<div class="row-fluid">
15-
<div class="span2">
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="span10">
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>
14+
<div ng-view></div>
4015

4116
</body>
4217
</html>

‎app/js/app.js‎

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

33
/* App Module */
4+
5+
angular.module('phonecat', []).
6+
config(['$routeProvider', function($routeProvider) {
7+
$routeProvider.
8+
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
9+
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
10+
otherwise({redirectTo: '/phones'});
11+
}]);

‎app/js/controllers.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,10 @@ function PhoneListCtrl($scope, $http) {
1111
}
1212

1313
//PhoneListCtrl.$inject = ['$scope', '$http'];
14+
15+
16+
function PhoneDetailCtrl($scope, $routeParams) {
17+
$scope.phoneId = $routeParams.phoneId;
18+
}
19+
20+
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams'];

‎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 {{phoneId}}

‎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-fluid">
3+
<div class="span2">
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="span10">
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>

‎test/e2e/scenarios.js‎

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

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

7+
it('should redirect index.html to index.html#/phones', function() {
8+
browser().navigateTo('../../app/index.html');
9+
expect(browser().location().url()).toBe('/phones');
10+
});
11+
12+
713
describe('Phone list view', function() {
814

915
beforeEach(function() {
10-
browser().navigateTo('../../app/index.html');
16+
browser().navigateTo('../../app/index.html#/phones');
1117
});
1218

1319

@@ -43,4 +49,17 @@ describe('PhoneCat App', function() {
4349
expect(browser().location().url()).toBe('/phones/nexus-s');
4450
});
4551
});
52+
53+
54+
describe('Phone detail view', function() {
55+
56+
beforeEach(function() {
57+
browser().navigateTo('../../app/index.html#/phones/nexus-s');
58+
});
59+
60+
61+
it('should display placeholder page with phoneId', function() {
62+
expect(binding('phoneId')).toBe('nexus-s');
63+
});
64+
});
4665
});

‎test/unit/controllersSpec.js‎

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

0 commit comments

Comments
 (0)