2016-10-04 23:39:20 -04:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
2015-08-20 17:26:57 -04:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
describe('ngOutlet animations', function () {
|
|
|
|
var elt,
|
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.
2015-09-18 18:53:50 -04:00
|
|
|
$animate,
|
|
|
|
$compile,
|
|
|
|
$rootScope,
|
2016-02-17 02:47:49 -05:00
|
|
|
$rootRouter,
|
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.
2015-09-18 18:53:50 -04:00
|
|
|
$compileProvider;
|
2015-08-20 17:26:57 -04:00
|
|
|
|
|
|
|
beforeEach(function () {
|
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.
2015-09-18 18:53:50 -04:00
|
|
|
module('ng');
|
2015-08-20 17:26:57 -04:00
|
|
|
module('ngAnimate');
|
|
|
|
module('ngAnimateMock');
|
|
|
|
module('ngComponentRouter');
|
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.
2015-09-18 18:53:50 -04:00
|
|
|
module(function (_$compileProvider_) {
|
|
|
|
$compileProvider = _$compileProvider_;
|
2015-08-20 17:26:57 -04:00
|
|
|
});
|
|
|
|
|
2016-02-17 02:47:49 -05:00
|
|
|
inject(function (_$animate_, _$compile_, _$rootScope_, _$rootRouter_) {
|
2015-08-20 17:26:57 -04:00
|
|
|
$animate = _$animate_;
|
|
|
|
$compile = _$compile_;
|
|
|
|
$rootScope = _$rootScope_;
|
2016-02-17 02:47:49 -05:00
|
|
|
$rootRouter = _$rootRouter_;
|
2015-08-20 17:26:57 -04:00
|
|
|
});
|
|
|
|
|
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.
2015-09-18 18:53:50 -04:00
|
|
|
registerComponent('userCmp', {
|
2016-02-10 19:59:26 -05:00
|
|
|
template: '<div>hello {{userCmp.$routeParams.name}}</div>',
|
|
|
|
$routerOnActivate: function(next) {
|
|
|
|
this.$routeParams = next.params;
|
|
|
|
}
|
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.
2015-09-18 18:53:50 -04:00
|
|
|
});
|
2015-08-20 17:26:57 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(function () {
|
|
|
|
expect($animate.queue).toEqual([]);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should work in a simple case', function () {
|
|
|
|
var item;
|
|
|
|
|
|
|
|
compile('<div ng-outlet></div>');
|
|
|
|
|
2016-02-17 02:47:49 -05:00
|
|
|
$rootRouter.config([
|
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.
2015-09-18 18:53:50 -04:00
|
|
|
{ path: '/user/:name', component: 'userCmp' }
|
2015-08-20 17:26:57 -04:00
|
|
|
]);
|
|
|
|
|
2016-02-17 02:47:49 -05:00
|
|
|
$rootRouter.navigateByUrl('/user/brian');
|
2015-08-20 17:26:57 -04:00
|
|
|
$rootScope.$digest();
|
|
|
|
expect(elt.text()).toBe('hello brian');
|
|
|
|
|
|
|
|
// "user" component enters
|
|
|
|
item = $animate.queue.shift();
|
|
|
|
expect(item.event).toBe('enter');
|
|
|
|
|
|
|
|
// navigate to pete
|
2016-02-17 02:47:49 -05:00
|
|
|
$rootRouter.navigateByUrl('/user/pete');
|
2015-08-20 17:26:57 -04:00
|
|
|
$rootScope.$digest();
|
|
|
|
expect(elt.text()).toBe('hello pete');
|
|
|
|
|
|
|
|
// "user pete" component enters
|
|
|
|
item = $animate.queue.shift();
|
|
|
|
expect(item.event).toBe('enter');
|
|
|
|
expect(item.element.text()).toBe('hello pete');
|
|
|
|
|
|
|
|
// "user brian" component leaves
|
|
|
|
item = $animate.queue.shift();
|
|
|
|
expect(item.event).toBe('leave');
|
|
|
|
expect(item.element.text()).toBe('hello brian');
|
|
|
|
});
|
|
|
|
|
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.
2015-09-18 18:53:50 -04:00
|
|
|
|
|
|
|
function registerComponent(name, options) {
|
|
|
|
var controller = options.controller || function () {};
|
|
|
|
|
refactor(lifecycle): prefix lifecycle methods with "ng"
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.
To fix, just rename these methods:
* onInit
* onDestroy
* doCheck
* onChanges
* afterContentInit
* afterContentChecked
* afterViewInit
* afterViewChecked
* _Router Hooks_
* onActivate
* onReuse
* onDeactivate
* canReuse
* canDeactivate
To:
* ngOnInit,
* ngOnDestroy,
* ngDoCheck,
* ngOnChanges,
* ngAfterContentInit,
* ngAfterContentChecked,
* ngAfterViewInit,
* ngAfterViewChecked
* _Router Hooks_
* routerOnActivate
* routerOnReuse
* routerOnDeactivate
* routerCanReuse
* routerCanDeactivate
The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.
Closes #5036
2015-11-16 20:04:36 -05:00
|
|
|
['$routerOnActivate', '$routerOnDeactivate', '$routerOnReuse', '$routerCanReuse', '$routerCanDeactivate'].forEach(function (hookName) {
|
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.
2015-09-18 18:53:50 -04:00
|
|
|
if (options[hookName]) {
|
|
|
|
controller.prototype[hookName] = options[hookName];
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
function factory() {
|
|
|
|
return {
|
|
|
|
template: options.template || '',
|
|
|
|
controllerAs: name,
|
|
|
|
controller: controller
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
if (options.$canActivate) {
|
|
|
|
factory.$canActivate = options.$canActivate;
|
|
|
|
}
|
|
|
|
if (options.$routeConfig) {
|
|
|
|
factory.$routeConfig = options.$routeConfig;
|
|
|
|
}
|
|
|
|
|
|
|
|
$compileProvider.directive(name, factory);
|
2015-08-20 17:26:57 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
function compile(template) {
|
|
|
|
elt = $compile('<div>' + template + '</div>')($rootScope);
|
|
|
|
$rootScope.$digest();
|
|
|
|
return elt;
|
|
|
|
}
|
|
|
|
});
|