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

Commit 0a6e464

Browse files
mheverymhevery
committed
feat($route): rename template -> tempalteUrl and add support for inline templates
BREAKING CHANGE: template in $route definition is now templateUrl To migrate just rename `template` to `templateUrl`.
1 parent 7c24282 commit 0a6e464

7 files changed

Lines changed: 113 additions & 86 deletions

File tree

‎docs/content/cookbook/deeplinking.ngdoc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ In this example we have a simple app which consist of two screens:
3535
angular.module('deepLinking', ['ngSanitize'])
3636
.config(function($routeProvider) {
3737
$routeProvider.
38-
when("/welcome", {template:'welcome.html', controller:WelcomeCntl}).
39-
when("/settings", {template:'settings.html', controller:SettingsCntl});
38+
when("/welcome", {templateUrl:'welcome.html', controller:WelcomeCntl}).
39+
when("/settings", {templateUrl:'settings.html', controller:SettingsCntl});
4040
});
4141

4242
AppCntl.$inject = ['$scope', '$route']

‎docs/content/tutorial/step_07.ngdoc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@ __`app/js/app.js`:__
7272
angular.module('phonecat', []).
7373
config(['$routeProvider', function($routeProvider) {
7474
$routeProvider.
75-
when('/phones', {template: 'partials/phone-list.html', controller: PhoneListCtrl}).
76-
when('/phones/:phoneId', {template: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
75+
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
76+
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
7777
otherwise({redirectTo: '/phones'});
7878
}]);
7979
</pre>

‎example/temp.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<script>
77
setupModuleLoader(window);
88
angular.module('example', [], function($routeProvider) {
9-
$routeProvider.when('/view1', {controller: MyCtrl, template: 'view1.html'});
10-
$routeProvider.when('/view2', {controller: MyCtrl, template: 'view2.html'});
9+
$routeProvider.when('/view1', {controller: MyCtrl, templateUrl: 'view1.html'});
10+
$routeProvider.when('/view2', {controller: MyCtrl, templateUrl: 'view2.html'});
1111

1212
function MyCtrl($location, $scope) {
1313
$scope.url = function() {

‎src/ng/directive/ngView.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@
4949
<file name="script.js">
5050
angular.module('ngView', [], function($routeProvider, $locationProvider) {
5151
$routeProvider.when('/Book/:bookId', {
52-
template: 'book.html',
52+
templateUrl: 'book.html',
5353
controller: BookCntl
5454
});
5555
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
56-
template: 'chapter.html',
56+
templateUrl: 'chapter.html',
5757
controller: ChapterCntl
5858
});
5959

‎src/ng/route.js‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,12 @@ function $RouteProvider(){
2929
*
3030
* - `controller` – `{function()=}` – Controller fn that should be associated with newly
3131
* created scope.
32-
* - `template` – `{string=}` – path to an html template that should be used by
32+
* - `template` – `{string=}` – html template as a string that should be used by
3333
* {@link angular.module.ng.$compileProvider.directive.ngView ngView} or
3434
* {@link angular.module.ng.$compileProvider.directive.ngInclude ngInclude} directives.
35+
* this property takes precedence over `templateUrl`.
36+
* - `templateUrl` – `{string=}` – path to an html template that should be used by
37+
* {@link angular.module.ng.$compileProvider.directive.ngView ngView}.
3538
* - `resolve` - `{Object.<string, function>=}` - An optional map of dependencies which should
3639
* be injected into the controller. If any of these dependencies are promises, they will be
3740
* resolved and converted to a value before the controller is instantiated and the
@@ -49,7 +52,7 @@ function $RouteProvider(){
4952
* If `redirectTo` is a function, it will be called with the following parameters:
5053
*
5154
* - `{Object.<string>}` - route parameters extracted from the current
52-
* `$location.path()` by applying the current route template.
55+
* `$location.path()` by applying the current route templateUrl.
5356
* - `{string}` - current `$location.path()`
5457
* - `{Object}` - current `$location.search()`
5558
*
@@ -152,7 +155,7 @@ function $RouteProvider(){
152155
<hr />
153156
154157
<pre>$location.path() = {{$location.path()}}</pre>
155-
<pre>$route.current.template = {{$route.current.template}}</pre>
158+
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
156159
<pre>$route.current.params = {{$route.current.params}}</pre>
157160
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
158161
<pre>$routeParams = {{$routeParams}}</pre>
@@ -173,7 +176,7 @@ function $RouteProvider(){
173176
<file name="script.js">
174177
angular.module('ngView', [], function($routeProvider, $locationProvider) {
175178
$routeProvider.when('/Book/:bookId', {
176-
template: 'book.html',
179+
templateUrl: 'book.html',
177180
controller: BookCntl,
178181
resolve: {
179182
// I will cause a 1 second delay
@@ -185,7 +188,7 @@ function $RouteProvider(){
185188
}
186189
});
187190
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
188-
template: 'chapter.html',
191+
templateUrl: 'chapter.html',
189192
controller: ChapterCntl
190193
});
191194
@@ -365,17 +368,21 @@ function $RouteProvider(){
365368
then(function() {
366369
if (next) {
367370
var keys = [],
368-
values = [];
371+
values = [],
372+
template;
369373

370374
forEach(next.resolve || {}, function(value, key) {
371375
keys.push(key);
372376
values.push(isFunction(value) ? $injector.invoke(value) : $injector.get(value));
373377
});
374-
if (next.template) {
378+
if (isDefined(template = next.template)) {
379+
} else if (isDefined(template = next.templateUrl)) {
380+
template = $http.get(template, {cache: $templateCache}).
381+
then(function(response) { return response.data; });
382+
}
383+
if (isDefined(template)) {
375384
keys.push('$template');
376-
values.push($http.
377-
get(next.template, {cache: $templateCache}).
378-
then(function(response) { return response.data; }));
385+
values.push(template);
379386
}
380387
return $q.all(values).then(function(values) {
381388
var locals = {};

‎test/ng/directive/ngViewSpec.js‎

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ describe('ngView', function() {
3939
};
4040
});
4141

42-
$routeProvider.when('/some', {template: '/tpl.html', controller: Ctrl});
42+
$routeProvider.when('/some', {templateUrl: '/tpl.html', controller: Ctrl});
4343
});
4444

4545
inject(function($route, $rootScope, $templateCache, $location) {
@@ -59,7 +59,7 @@ describe('ngView', function() {
5959

6060
module(function($controllerProvider, $routeProvider) {
6161
$controllerProvider.register('MyCtrl', ['$scope', MyCtrl]);
62-
$routeProvider.when('/foo', {controller: 'MyCtrl', template: '/tpl.html'});
62+
$routeProvider.when('/foo', {controller: 'MyCtrl', templateUrl: '/tpl.html'});
6363
});
6464

6565
inject(function($route, $location, $rootScope, $templateCache) {
@@ -75,8 +75,8 @@ describe('ngView', function() {
7575

7676
it('should load content via xhr when route changes', function() {
7777
module(function($routeProvider) {
78-
$routeProvider.when('/foo', {template: 'myUrl1'});
79-
$routeProvider.when('/bar', {template: 'myUrl2'});
78+
$routeProvider.when('/foo', {templateUrl: 'myUrl1'});
79+
$routeProvider.when('/bar', {templateUrl: 'myUrl2'});
8080
});
8181

8282
inject(function($rootScope, $compile, $httpBackend, $location, $route) {
@@ -97,9 +97,34 @@ describe('ngView', function() {
9797
});
9898

9999

100+
it('should use inline content route changes', function() {
101+
module(function($routeProvider) {
102+
$routeProvider.when('/foo', {template: '<div>{{1+3}}</div>'});
103+
$routeProvider.when('/bar', {template: 'angular is da best'});
104+
$routeProvider.when('/blank', {template: ''});
105+
});
106+
107+
inject(function($rootScope, $compile, $location, $route) {
108+
expect(element.text()).toEqual('');
109+
110+
$location.path('/foo');
111+
$rootScope.$digest();
112+
expect(element.text()).toEqual('4');
113+
114+
$location.path('/bar');
115+
$rootScope.$digest();
116+
expect(element.text()).toEqual('angular is da best');
117+
118+
$location.path('/blank');
119+
$rootScope.$digest();
120+
expect(element.text()).toEqual('');
121+
});
122+
});
123+
124+
100125
it('should remove all content when location changes to an unknown route', function() {
101126
module(function($routeProvider) {
102-
$routeProvider.when('/foo', {template: 'myUrl1'});
127+
$routeProvider.when('/foo', {templateUrl: 'myUrl1'});
103128
});
104129

105130
inject(function($rootScope, $compile, $location, $httpBackend, $route) {
@@ -118,7 +143,7 @@ describe('ngView', function() {
118143

119144
it('should chain scopes and propagate evals to the child scope', function() {
120145
module(function($routeProvider) {
121-
$routeProvider.when('/foo', {template: 'myUrl1'});
146+
$routeProvider.when('/foo', {templateUrl: 'myUrl1'});
122147
});
123148

124149
inject(function($rootScope, $compile, $location, $httpBackend, $route) {
@@ -140,7 +165,7 @@ describe('ngView', function() {
140165
it('should be possible to nest ngView in ngInclude', function() {
141166

142167
module(function($routeProvider) {
143-
$routeProvider.when('/foo', {template: 'viewPartial.html'});
168+
$routeProvider.when('/foo', {templateUrl: 'viewPartial.html'});
144169
});
145170

146171
inject(function($httpBackend, $location, $route, $compile, $rootScope) {
@@ -156,7 +181,7 @@ describe('ngView', function() {
156181
$httpBackend.flush();
157182

158183
expect(elm.text()).toEqual('include: view: content');
159-
expect($route.current.template).toEqual('viewPartial.html');
184+
expect($route.current.templateUrl).toEqual('viewPartial.html');
160185
dealoc(elm)
161186
});
162187
});
@@ -170,7 +195,7 @@ describe('ngView', function() {
170195
}
171196

172197
module(function($routeProvider) {
173-
$routeProvider.when('/foo', {controller: ParentCtrl, template: 'viewPartial.html'});
198+
$routeProvider.when('/foo', {controller: ParentCtrl, templateUrl: 'viewPartial.html'});
174199
});
175200

176201

@@ -209,8 +234,8 @@ describe('ngView', function() {
209234
// this is a test for a bad race condition that affected feedback
210235

211236
module(function($routeProvider) {
212-
$routeProvider.when('/foo', {template: 'myUrl1'});
213-
$routeProvider.when('/bar', {template: 'myUrl2'});
237+
$routeProvider.when('/foo', {templateUrl: 'myUrl1'});
238+
$routeProvider.when('/bar', {templateUrl: 'myUrl2'});
214239
});
215240

216241
inject(function($route, $rootScope, $location, $httpBackend) {
@@ -231,7 +256,7 @@ describe('ngView', function() {
231256

232257
it('should be async even if served from cache', function() {
233258
module(function($routeProvider) {
234-
$routeProvider.when('/foo', {controller: noop, template: 'myUrl1'});
259+
$routeProvider.when('/foo', {controller: noop, templateUrl: 'myUrl1'});
235260
});
236261

237262
inject(function($route, $rootScope, $location, $templateCache) {
@@ -262,7 +287,7 @@ describe('ngView', function() {
262287
};
263288

264289
module(function($routeProvider) {
265-
$routeProvider.when('/foo', {template: 'tpl.html', controller: Ctrl});
290+
$routeProvider.when('/foo', {templateUrl: 'tpl.html', controller: Ctrl});
266291
});
267292

268293
inject(function($templateCache, $rootScope, $location) {
@@ -282,7 +307,7 @@ describe('ngView', function() {
282307

283308
it('should destroy previous scope', function() {
284309
module(function($routeProvider) {
285-
$routeProvider.when('/foo', {template: 'tpl.html'});
310+
$routeProvider.when('/foo', {templateUrl: 'tpl.html'});
286311
});
287312

288313
inject(function($templateCache, $rootScope, $location) {
@@ -319,8 +344,8 @@ describe('ngView', function() {
319344
};
320345

321346
module(function($routeProvider) {
322-
$routeProvider.when('/one', {template: 'one.html', controller: createCtrl('ctrl1')});
323-
$routeProvider.when('/two', {template: 'two.html', controller: createCtrl('ctrl2')});
347+
$routeProvider.when('/one', {templateUrl: 'one.html', controller: createCtrl('ctrl1')});
348+
$routeProvider.when('/two', {templateUrl: 'two.html', controller: createCtrl('ctrl2')});
324349
});
325350

326351
inject(function($httpBackend, $rootScope, $location) {
@@ -368,9 +393,9 @@ describe('ngView', function() {
368393
}
369394

370395
module(function($routeProvider) {
371-
$routeProvider.when('/bar', {template: 'tpl.html', controller: createController('bar')});
396+
$routeProvider.when('/bar', {templateUrl: 'tpl.html', controller: createController('bar')});
372397
$routeProvider.when('/foo', {
373-
template: 'tpl.html', controller: createController('foo'), reloadOnSearch: false});
398+
templateUrl: 'tpl.html', controller: createController('foo'), reloadOnSearch: false});
374399
});
375400

376401
inject(function($templateCache, $location, $rootScope) {
@@ -393,7 +418,7 @@ describe('ngView', function() {
393418

394419
it('should evaluate onload expression after linking the content', function() {
395420
module(function($routeProvider) {
396-
$routeProvider.when('/foo', {template: 'tpl.html'});
421+
$routeProvider.when('/foo', {templateUrl: 'tpl.html'});
397422
});
398423

399424
inject(function($templateCache, $location, $rootScope) {
@@ -414,7 +439,7 @@ describe('ngView', function() {
414439
}
415440

416441
module(function($routeProvider) {
417-
$routeProvider.when('/foo', {template: 'tpl.html', controller: MyCtrl});
442+
$routeProvider.when('/foo', {templateUrl: 'tpl.html', controller: MyCtrl});
418443
});
419444

420445
inject(function($templateCache, $location, $rootScope, $route) {

0 commit comments

Comments
 (0)
⚡