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

Commit

Permalink
feat($route): rename template -> tempalteUrl and add support for inli…
Browse files Browse the repository at this point in the history
…ne templates

BREAKING CHANGE: template in $route definition is now templateUrl
To migrate just rename `template` to `templateUrl`.
  • Loading branch information
mhevery committed Jun 2, 2012
1 parent 7c24282 commit 0a6e464
Show file tree
Hide file tree
Showing 7 changed files with 113 additions and 86 deletions.
4 changes: 2 additions & 2 deletions docs/content/cookbook/deeplinking.ngdoc
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ In this example we have a simple app which consist of two screens:
angular.module('deepLinking', ['ngSanitize'])
.config(function($routeProvider) {
$routeProvider.
when("/welcome", {template:'welcome.html', controller:WelcomeCntl}).
when("/settings", {template:'settings.html', controller:SettingsCntl});
when("/welcome", {templateUrl:'welcome.html', controller:WelcomeCntl}).
when("/settings", {templateUrl:'settings.html', controller:SettingsCntl});
});

AppCntl.$inject = ['$scope', '$route']
Expand Down
4 changes: 2 additions & 2 deletions docs/content/tutorial/step_07.ngdoc
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ __`app/js/app.js`:__
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {template: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {template: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
</pre>
Expand Down
4 changes: 2 additions & 2 deletions example/temp.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<script>
setupModuleLoader(window);
angular.module('example', [], function($routeProvider) {
$routeProvider.when('/view1', {controller: MyCtrl, template: 'view1.html'});
$routeProvider.when('/view2', {controller: MyCtrl, template: 'view2.html'});
$routeProvider.when('/view1', {controller: MyCtrl, templateUrl: 'view1.html'});
$routeProvider.when('/view2', {controller: MyCtrl, templateUrl: 'view2.html'});

function MyCtrl($location, $scope) {
$scope.url = function() {
Expand Down
4 changes: 2 additions & 2 deletions src/ng/directive/ngView.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,11 @@
<file name="script.js">
angular.module('ngView', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/Book/:bookId', {
template: 'book.html',
templateUrl: 'book.html',
controller: BookCntl
});
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
template: 'chapter.html',
templateUrl: 'chapter.html',
controller: ChapterCntl
});
Expand Down
27 changes: 17 additions & 10 deletions src/ng/route.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,12 @@ function $RouteProvider(){
*
* - `controller` – `{function()=}` – Controller fn that should be associated with newly
* created scope.
* - `template` – `{string=}` – path to an html template that should be used by
* - `template` – `{string=}` – html template as a string that should be used by
* {@link angular.module.ng.$compileProvider.directive.ngView ngView} or
* {@link angular.module.ng.$compileProvider.directive.ngInclude ngInclude} directives.
* this property takes precedence over `templateUrl`.
* - `templateUrl` – `{string=}` – path to an html template that should be used by
* {@link angular.module.ng.$compileProvider.directive.ngView ngView}.
* - `resolve` - `{Object.<string, function>=}` - An optional map of dependencies which should
* be injected into the controller. If any of these dependencies are promises, they will be
* resolved and converted to a value before the controller is instantiated and the
Expand All @@ -49,7 +52,7 @@ function $RouteProvider(){
* If `redirectTo` is a function, it will be called with the following parameters:
*
* - `{Object.<string>}` - route parameters extracted from the current
* `$location.path()` by applying the current route template.
* `$location.path()` by applying the current route templateUrl.
* - `{string}` - current `$location.path()`
* - `{Object}` - current `$location.search()`
*
Expand Down Expand Up @@ -152,7 +155,7 @@ function $RouteProvider(){
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.template = {{$route.current.template}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
Expand All @@ -173,7 +176,7 @@ function $RouteProvider(){
<file name="script.js">
angular.module('ngView', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/Book/:bookId', {
template: 'book.html',
templateUrl: 'book.html',
controller: BookCntl,
resolve: {
// I will cause a 1 second delay
Expand All @@ -185,7 +188,7 @@ function $RouteProvider(){
}
});
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
template: 'chapter.html',
templateUrl: 'chapter.html',
controller: ChapterCntl
});
Expand Down Expand Up @@ -365,17 +368,21 @@ function $RouteProvider(){
then(function() {
if (next) {
var keys = [],
values = [];
values = [],
template;

forEach(next.resolve || {}, function(value, key) {
keys.push(key);
values.push(isFunction(value) ? $injector.invoke(value) : $injector.get(value));
});
if (next.template) {
if (isDefined(template = next.template)) {
} else if (isDefined(template = next.templateUrl)) {
template = $http.get(template, {cache: $templateCache}).
then(function(response) { return response.data; });
}
if (isDefined(template)) {
keys.push('$template');
values.push($http.
get(next.template, {cache: $templateCache}).
then(function(response) { return response.data; }));
values.push(template);
}
return $q.all(values).then(function(values) {
var locals = {};
Expand Down
65 changes: 45 additions & 20 deletions test/ng/directive/ngViewSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ describe('ngView', function() {
};
});

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

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

module(function($controllerProvider, $routeProvider) {
$controllerProvider.register('MyCtrl', ['$scope', MyCtrl]);
$routeProvider.when('/foo', {controller: 'MyCtrl', template: '/tpl.html'});
$routeProvider.when('/foo', {controller: 'MyCtrl', templateUrl: '/tpl.html'});
});

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

it('should load content via xhr when route changes', function() {
module(function($routeProvider) {
$routeProvider.when('/foo', {template: 'myUrl1'});
$routeProvider.when('/bar', {template: 'myUrl2'});
$routeProvider.when('/foo', {templateUrl: 'myUrl1'});
$routeProvider.when('/bar', {templateUrl: 'myUrl2'});
});

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


it('should use inline content route changes', function() {
module(function($routeProvider) {
$routeProvider.when('/foo', {template: '<div>{{1+3}}</div>'});
$routeProvider.when('/bar', {template: 'angular is da best'});
$routeProvider.when('/blank', {template: ''});
});

inject(function($rootScope, $compile, $location, $route) {
expect(element.text()).toEqual('');

$location.path('/foo');
$rootScope.$digest();
expect(element.text()).toEqual('4');

$location.path('/bar');
$rootScope.$digest();
expect(element.text()).toEqual('angular is da best');

$location.path('/blank');
$rootScope.$digest();
expect(element.text()).toEqual('');
});
});


it('should remove all content when location changes to an unknown route', function() {
module(function($routeProvider) {
$routeProvider.when('/foo', {template: 'myUrl1'});
$routeProvider.when('/foo', {templateUrl: 'myUrl1'});
});

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

it('should chain scopes and propagate evals to the child scope', function() {
module(function($routeProvider) {
$routeProvider.when('/foo', {template: 'myUrl1'});
$routeProvider.when('/foo', {templateUrl: 'myUrl1'});
});

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

module(function($routeProvider) {
$routeProvider.when('/foo', {template: 'viewPartial.html'});
$routeProvider.when('/foo', {templateUrl: 'viewPartial.html'});
});

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

expect(elm.text()).toEqual('include: view: content');
expect($route.current.template).toEqual('viewPartial.html');
expect($route.current.templateUrl).toEqual('viewPartial.html');
dealoc(elm)
});
});
Expand All @@ -170,7 +195,7 @@ describe('ngView', function() {
}

module(function($routeProvider) {
$routeProvider.when('/foo', {controller: ParentCtrl, template: 'viewPartial.html'});
$routeProvider.when('/foo', {controller: ParentCtrl, templateUrl: 'viewPartial.html'});
});


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

module(function($routeProvider) {
$routeProvider.when('/foo', {template: 'myUrl1'});
$routeProvider.when('/bar', {template: 'myUrl2'});
$routeProvider.when('/foo', {templateUrl: 'myUrl1'});
$routeProvider.when('/bar', {templateUrl: 'myUrl2'});
});

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

it('should be async even if served from cache', function() {
module(function($routeProvider) {
$routeProvider.when('/foo', {controller: noop, template: 'myUrl1'});
$routeProvider.when('/foo', {controller: noop, templateUrl: 'myUrl1'});
});

inject(function($route, $rootScope, $location, $templateCache) {
Expand Down Expand Up @@ -262,7 +287,7 @@ describe('ngView', function() {
};

module(function($routeProvider) {
$routeProvider.when('/foo', {template: 'tpl.html', controller: Ctrl});
$routeProvider.when('/foo', {templateUrl: 'tpl.html', controller: Ctrl});
});

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

it('should destroy previous scope', function() {
module(function($routeProvider) {
$routeProvider.when('/foo', {template: 'tpl.html'});
$routeProvider.when('/foo', {templateUrl: 'tpl.html'});
});

inject(function($templateCache, $rootScope, $location) {
Expand Down Expand Up @@ -319,8 +344,8 @@ describe('ngView', function() {
};

module(function($routeProvider) {
$routeProvider.when('/one', {template: 'one.html', controller: createCtrl('ctrl1')});
$routeProvider.when('/two', {template: 'two.html', controller: createCtrl('ctrl2')});
$routeProvider.when('/one', {templateUrl: 'one.html', controller: createCtrl('ctrl1')});
$routeProvider.when('/two', {templateUrl: 'two.html', controller: createCtrl('ctrl2')});
});

inject(function($httpBackend, $rootScope, $location) {
Expand Down Expand Up @@ -368,9 +393,9 @@ describe('ngView', function() {
}

module(function($routeProvider) {
$routeProvider.when('/bar', {template: 'tpl.html', controller: createController('bar')});
$routeProvider.when('/bar', {templateUrl: 'tpl.html', controller: createController('bar')});
$routeProvider.when('/foo', {
template: 'tpl.html', controller: createController('foo'), reloadOnSearch: false});
templateUrl: 'tpl.html', controller: createController('foo'), reloadOnSearch: false});
});

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

it('should evaluate onload expression after linking the content', function() {
module(function($routeProvider) {
$routeProvider.when('/foo', {template: 'tpl.html'});
$routeProvider.when('/foo', {templateUrl: 'tpl.html'});
});

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

module(function($routeProvider) {
$routeProvider.when('/foo', {template: 'tpl.html', controller: MyCtrl});
$routeProvider.when('/foo', {templateUrl: 'tpl.html', controller: MyCtrl});
});

inject(function($templateCache, $location, $rootScope, $route) {
Expand Down
Loading

0 comments on commit 0a6e464

Please sign in to comment.