refactor(angular_1_router): use directives for route targets
BREAKING CHANGE:
Previously, route configuration took a controller constructor function as the value of
`component` in a route definition:
```
$route.config([
{ route: '/', component: MyController }
])
```
Based on the name of the controller, we used to use a componentMapper service to
determine what template to pair with each controller, how to bind the instance to
the $scope.
To make the 1.x router more semantically alligned with Angular 2, we now route to a directive.
Thus a route configuration takes a normalized directive name:
```
$route.config([
{ route: '/', component: 'myDirective' }
])
```
BREAKING CHANGE:
In order to avoid name collisions, lifecycle hooks are now prefixed with `$`. Before:
```
MyController.prototype.onActivate = ...
```
After:
```
MyController.prototype.$onActivate = ...
```
Same for `$canActivate` (which now lives on the directive factory function),
`$canDeactivate`, `$canReuse`, and `$onDeactivate` hooks.
This commit is contained in:
Brian Ford
@ -6,41 +6,39 @@ describe('navigation', function () {
|
||||
$compile,
|
||||
$rootScope,
|
||||
$router,
|
||||
$templateCache,
|
||||
$controllerProvider,
|
||||
$componentMapperProvider;
|
||||
|
||||
var OneController, TwoController, UserController;
|
||||
|
||||
$compileProvider;
|
||||
|
||||
beforeEach(function () {
|
||||
module('ng');
|
||||
module('ngComponentRouter');
|
||||
module(function (_$controllerProvider_, _$componentMapperProvider_) {
|
||||
$controllerProvider = _$controllerProvider_;
|
||||
$componentMapperProvider = _$componentMapperProvider_;
|
||||
module(function (_$compileProvider_) {
|
||||
$compileProvider = _$compileProvider_;
|
||||
});
|
||||
|
||||
inject(function (_$compile_, _$rootScope_, _$router_, _$templateCache_) {
|
||||
inject(function (_$compile_, _$rootScope_, _$router_) {
|
||||
$compile = _$compile_;
|
||||
$rootScope = _$rootScope_;
|
||||
$router = _$router_;
|
||||
$templateCache = _$templateCache_;
|
||||
});
|
||||
|
||||
UserController = registerComponent('user', '<div>hello {{user.name}}</div>', function ($routeParams) {
|
||||
this.name = $routeParams.name;
|
||||
registerComponent('userCmp', {
|
||||
template: '<div>hello {{userCmp.$routeParams.name}}</div>'
|
||||
});
|
||||
registerComponent('oneCmp', {
|
||||
template: '<div>{{oneCmp.number}}</div>',
|
||||
controller: function () {this.number = 'one'}
|
||||
});
|
||||
registerComponent('twoCmp', {
|
||||
template: '<div>{{twoCmp.number}}</div>',
|
||||
controller: function () {this.number = 'two'}
|
||||
});
|
||||
OneController = registerComponent('one', '<div>{{one.number}}</div>', boringController('number', 'one'));
|
||||
TwoController = registerComponent('two', '<div>{{two.number}}</div>', boringController('number', 'two'));
|
||||
});
|
||||
|
||||
|
||||
it('should work in a simple case', function () {
|
||||
compile('<ng-outlet></ng-outlet>');
|
||||
|
||||
$router.config([
|
||||
{ path: '/', component: OneController }
|
||||
{ path: '/', component: 'oneCmp' }
|
||||
]);
|
||||
|
||||
$router.navigateByUrl('/');
|
||||
@ -49,26 +47,9 @@ describe('navigation', function () {
|
||||
expect(elt.text()).toBe('one');
|
||||
});
|
||||
|
||||
|
||||
// See https://github.com/angular/router/issues/105
|
||||
xit('should warn when instantiating a component with no controller', function () {
|
||||
put('noController', '<div>{{ 2 + 2 }}</div>');
|
||||
$router.config([
|
||||
{ path: '/', component: 'noController' }
|
||||
]);
|
||||
|
||||
spyOn(console, 'warn');
|
||||
compile('<ng-outlet></ng-outlet>');
|
||||
$router.navigateByUrl('/');
|
||||
|
||||
expect(console.warn).toHaveBeenCalledWith('Could not find controller for', 'NoControllerController');
|
||||
expect(elt.text()).toBe('4');
|
||||
});
|
||||
|
||||
|
||||
it('should navigate between components with different parameters', function () {
|
||||
$router.config([
|
||||
{ path: '/user/:name', component: UserController }
|
||||
{ path: '/user/:name', component: 'userCmp' }
|
||||
]);
|
||||
compile('<ng-outlet></ng-outlet>');
|
||||
|
||||
@ -82,42 +63,46 @@ describe('navigation', function () {
|
||||
});
|
||||
|
||||
|
||||
it('should not reactivate a parent when navigating between child components with different parameters', function () {
|
||||
var spy = jasmine.createSpy('onActivate');
|
||||
function ParentController() {}
|
||||
ParentController.$routeConfig = [
|
||||
{ path: '/user/:name', component: UserController }
|
||||
];
|
||||
ParentController.prototype.onActivate = spy;
|
||||
|
||||
registerComponent('parent', 'parent { <ng-outlet></ng-outlet> }', ParentController);
|
||||
it('should reuse a parent when navigating between child components with different parameters', function () {
|
||||
var instanceCount = 0;
|
||||
function ParentController() {
|
||||
instanceCount += 1;
|
||||
}
|
||||
registerComponent('parentCmp', {
|
||||
template: 'parent { <ng-outlet></ng-outlet> }',
|
||||
$routeConfig: [
|
||||
{ path: '/user/:name', component: 'userCmp' }
|
||||
],
|
||||
controller: ParentController
|
||||
});
|
||||
|
||||
$router.config([
|
||||
{ path: '/parent/...', component: ParentController }
|
||||
{ path: '/parent/...', component: 'parentCmp' }
|
||||
]);
|
||||
compile('<ng-outlet></ng-outlet>');
|
||||
|
||||
$router.navigateByUrl('/parent/user/brian');
|
||||
$rootScope.$digest();
|
||||
expect(spy).toHaveBeenCalled();
|
||||
expect(instanceCount).toBe(1);
|
||||
expect(elt.text()).toBe('parent { hello brian }');
|
||||
|
||||
spy.calls.reset();
|
||||
|
||||
$router.navigateByUrl('/parent/user/igor');
|
||||
$rootScope.$digest();
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
expect(instanceCount).toBe(1);
|
||||
expect(elt.text()).toBe('parent { hello igor }');
|
||||
});
|
||||
|
||||
|
||||
it('should work with nested outlets', function () {
|
||||
var childComponent = registerComponent('childComponent', '<div>inner { <div ng-outlet></div> }</div>', [
|
||||
{ path: '/b', component: OneController }
|
||||
]);
|
||||
registerComponent('childCmp', {
|
||||
template: '<div>inner { <div ng-outlet></div> }</div>',
|
||||
$routeConfig: [
|
||||
{ path: '/b', component: 'oneCmp' }
|
||||
]
|
||||
});
|
||||
|
||||
$router.config([
|
||||
{ path: '/a/...', component: childComponent }
|
||||
{ path: '/a/...', component: 'childCmp' }
|
||||
]);
|
||||
compile('<div>outer { <div ng-outlet></div> }</div>');
|
||||
|
||||
@ -128,40 +113,30 @@ describe('navigation', function () {
|
||||
});
|
||||
|
||||
|
||||
it('should work with recursive nested outlets', function () {
|
||||
put('two', '<div>recur { <div ng-outlet></div> }</div>');
|
||||
// TODO: fix this
|
||||
xit('should work with recursive nested outlets', function () {
|
||||
registerComponent('recurCmp', {
|
||||
template: '<div>recur { <div ng-outlet></div> }</div>',
|
||||
$routeConfig: [
|
||||
{ path: '/recur', component: 'recurCmp' },
|
||||
{ path: '/end', component: 'oneCmp' }
|
||||
]});
|
||||
|
||||
$router.config([
|
||||
{ path: '/recur', component: TwoController },
|
||||
{ path: '/', component: OneController }
|
||||
{ path: '/recur', component: 'recurCmp' },
|
||||
{ path: '/', component: 'oneCmp' }
|
||||
]);
|
||||
|
||||
compile('<div>root { <div ng-outlet></div> }</div>');
|
||||
$router.navigateByUrl('/');
|
||||
$router.navigateByUrl('/recur/recur/end');
|
||||
$rootScope.$digest();
|
||||
expect(elt.text()).toBe('root { one }');
|
||||
});
|
||||
|
||||
it('should inject $scope into the controller constructor', function () {
|
||||
var injectedScope;
|
||||
var UserController = registerComponent('user', '', function ($scope) {
|
||||
injectedScope = $scope;
|
||||
});
|
||||
|
||||
$router.config([
|
||||
{ path: '/user', component: UserController }
|
||||
]);
|
||||
compile('<div ng-outlet></div>');
|
||||
|
||||
$router.navigateByUrl('/user');
|
||||
$rootScope.$digest();
|
||||
|
||||
expect(injectedScope).toBeDefined();
|
||||
});
|
||||
|
||||
|
||||
it('should change location path', inject(function ($location) {
|
||||
$router.config([
|
||||
{ path: '/user', component: UserController }
|
||||
{ path: '/user', component: 'userCmp' }
|
||||
]);
|
||||
|
||||
compile('<div ng-outlet></div>');
|
||||
@ -178,7 +153,7 @@ describe('navigation', function () {
|
||||
|
||||
$router.config([
|
||||
{ path: '/', redirectTo: '/user' },
|
||||
{ path: '/user', component: UserController }
|
||||
{ path: '/user', component: 'userCmp' }
|
||||
]);
|
||||
|
||||
$router.navigateByUrl('/');
|
||||
@ -189,16 +164,19 @@ describe('navigation', function () {
|
||||
|
||||
|
||||
it('should change location to the canonical route with nested components', inject(function ($location) {
|
||||
var childRouter = registerComponent('childRouter', '<div>inner { <div ng-outlet></div> }</div>', [
|
||||
{ path: '/old-child', redirectTo: '/new-child' },
|
||||
{ path: '/new-child', component: OneController},
|
||||
{ path: '/old-child-two', redirectTo: '/new-child-two' },
|
||||
{ path: '/new-child-two', component: TwoController}
|
||||
]);
|
||||
registerComponent('childRouter', {
|
||||
template: '<div>inner { <div ng-outlet></div> }</div>',
|
||||
$routeConfig: [
|
||||
{ path: '/old-child', redirectTo: '/new-child' },
|
||||
{ path: '/new-child', component: 'oneCmp'},
|
||||
{ path: '/old-child-two', redirectTo: '/new-child-two' },
|
||||
{ path: '/new-child-two', component: 'twoCmp'}
|
||||
]
|
||||
});
|
||||
|
||||
$router.config([
|
||||
{ path: '/old-parent', redirectTo: '/new-parent' },
|
||||
{ path: '/new-parent/...', component: childRouter }
|
||||
{ path: '/new-parent/...', component: 'childRouter' }
|
||||
]);
|
||||
|
||||
compile('<div ng-outlet></div>');
|
||||
@ -219,7 +197,7 @@ describe('navigation', function () {
|
||||
|
||||
it('should navigate when the location path changes', inject(function ($location) {
|
||||
$router.config([
|
||||
{ path: '/one', component: OneController }
|
||||
{ path: '/one', component: 'oneCmp' }
|
||||
]);
|
||||
compile('<div ng-outlet></div>');
|
||||
|
||||
@ -232,18 +210,18 @@ describe('navigation', function () {
|
||||
|
||||
it('should expose a "navigating" property on $router', inject(function ($q) {
|
||||
var defer;
|
||||
var pendingActivate = registerComponent('pendingActivate', '', {
|
||||
onActivate: function () {
|
||||
registerComponent('pendingActivate', {
|
||||
$canActivate: function () {
|
||||
defer = $q.defer();
|
||||
return defer.promise;
|
||||
}
|
||||
});
|
||||
$router.config([
|
||||
{ path: '/pendingActivate', component: pendingActivate }
|
||||
{ path: '/pending-activate', component: 'pendingActivate' }
|
||||
]);
|
||||
compile('<div ng-outlet></div>');
|
||||
|
||||
$router.navigateByUrl('/pendingActivate');
|
||||
$router.navigateByUrl('/pending-activate');
|
||||
$rootScope.$digest();
|
||||
expect($router.navigating).toBe(true);
|
||||
defer.resolve();
|
||||
@ -251,40 +229,31 @@ describe('navigation', function () {
|
||||
expect($router.navigating).toBe(false);
|
||||
}));
|
||||
|
||||
function registerComponent(name, options) {
|
||||
var controller = options.controller || function () {};
|
||||
|
||||
function registerComponent(name, template, config) {
|
||||
var Ctrl;
|
||||
if (!template) {
|
||||
template = '';
|
||||
}
|
||||
if (!config) {
|
||||
Ctrl = function () {};
|
||||
} else if (angular.isArray(config)) {
|
||||
Ctrl = function () {};
|
||||
Ctrl.annotations = [new angular.annotations.RouteConfig(config)];
|
||||
} else if (typeof config === 'function') {
|
||||
Ctrl = config;
|
||||
} else {
|
||||
Ctrl = function () {};
|
||||
if (config.canActivate) {
|
||||
Ctrl.$canActivate = config.canActivate;
|
||||
delete config.canActivate;
|
||||
['$onActivate', '$onDeactivate', '$onReuse', '$canReuse', '$canDeactivate'].forEach(function (hookName) {
|
||||
if (options[hookName]) {
|
||||
controller.prototype[hookName] = options[hookName];
|
||||
}
|
||||
Ctrl.prototype = config;
|
||||
});
|
||||
|
||||
function factory() {
|
||||
return {
|
||||
template: options.template || '',
|
||||
controllerAs: name,
|
||||
controller: controller
|
||||
};
|
||||
}
|
||||
$controllerProvider.register(componentControllerName(name), Ctrl);
|
||||
put(name, template);
|
||||
return Ctrl;
|
||||
}
|
||||
|
||||
function boringController(model, value) {
|
||||
return function () {
|
||||
this[model] = value;
|
||||
};
|
||||
}
|
||||
if (options.$canActivate) {
|
||||
factory.$canActivate = options.$canActivate;
|
||||
}
|
||||
if (options.$routeConfig) {
|
||||
factory.$routeConfig = options.$routeConfig;
|
||||
}
|
||||
|
||||
function put(name, template) {
|
||||
$templateCache.put(componentTemplatePath(name), [200, template, {}]);
|
||||
$compileProvider.directive(name, factory);
|
||||
}
|
||||
|
||||
function compile(template) {
|
||||
|
||||
Reference in New Issue
Block a user