angular-cn/modules/angular1_router/test/integration/navigation_spec.js

360 lines
9.5 KiB
JavaScript
Raw Normal View History

'use strict';
describe('navigation', function () {
var elt,
$compile,
$rootScope,
$rootRouter,
$compileProvider;
beforeEach(function () {
module('ng');
module('ngComponentRouter');
module(function (_$compileProvider_) {
$compileProvider = _$compileProvider_;
});
inject(function (_$compile_, _$rootScope_, _$rootRouter_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$rootRouter = _$rootRouter_;
});
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
registerDirective('userCmp', {
template: '<div>hello {{userCmp.$routeParams.name}}</div>',
$routerOnActivate: function(next) {
this.$routeParams = next.params;
}
});
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
registerDirective('oneCmp', {
template: '<div>{{oneCmp.number}}</div>',
controller: function () {this.number = 'one'}
});
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
registerDirective('twoCmp', {
template: '<div>{{twoCmp.number}}</div>',
controller: function () {this.number = 'two'}
});
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
registerComponent('threeCmp', {
template: '<div>{{$ctrl.number}}</div>',
controller: function () {this.number = 'three'}
});
registerComponent('getParams', {
template: '<div>{{$ctrl.params.x}}</div>',
controller: function () {
this.$routerOnActivate = function(next) {
this.params = next.params;
};
}
})
});
it('should work in a simple case', function () {
compile('<ng-outlet></ng-outlet>');
$rootRouter.config([
{ path: '/', component: 'oneCmp' }
]);
$rootRouter.navigateByUrl('/');
$rootScope.$digest();
expect(elt.text()).toBe('one');
});
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
it('should work with components created by the `mod.component()` helper', function () {
compile('<ng-outlet></ng-outlet>');
$rootRouter.config([
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
{ path: '/', component: 'threeCmp' }
]);
$rootRouter.navigateByUrl('/');
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
$rootScope.$digest();
expect(elt.text()).toBe('three');
});
it('should navigate between components with different parameters', function () {
$rootRouter.config([
{ path: '/user/:name', component: 'userCmp' }
]);
compile('<ng-outlet></ng-outlet>');
$rootRouter.navigateByUrl('/user/brian');
$rootScope.$digest();
expect(elt.text()).toBe('hello brian');
$rootRouter.navigateByUrl('/user/igor');
$rootScope.$digest();
expect(elt.text()).toBe('hello igor');
});
it('should reuse a parent when navigating between child components with different parameters', function () {
var instanceCount = 0;
function ParentController() {
instanceCount += 1;
}
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
registerDirective('parentCmp', {
template: 'parent { <ng-outlet></ng-outlet> }',
$routeConfig: [
{ path: '/user/:name', component: 'userCmp' }
],
controller: ParentController
});
$rootRouter.config([
{ path: '/parent/...', component: 'parentCmp' }
]);
compile('<ng-outlet></ng-outlet>');
$rootRouter.navigateByUrl('/parent/user/brian');
$rootScope.$digest();
expect(instanceCount).toBe(1);
expect(elt.text()).toBe('parent { hello brian }');
$rootRouter.navigateByUrl('/parent/user/igor');
$rootScope.$digest();
expect(instanceCount).toBe(1);
expect(elt.text()).toBe('parent { hello igor }');
});
it('should work with nested outlets', function () {
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
registerDirective('childCmp', {
template: '<div>inner { <div ng-outlet></div> }</div>',
$routeConfig: [
{ path: '/b', component: 'oneCmp' }
]
});
$rootRouter.config([
{ path: '/a/...', component: 'childCmp' }
]);
compile('<div>outer { <div ng-outlet></div> }</div>');
$rootRouter.navigateByUrl('/a/b');
$rootScope.$digest();
expect(elt.text()).toBe('outer { inner { one } }');
});
it('should work when parent route has empty path', inject(function ($location) {
registerComponent('childCmp', {
template: '<div>inner { <div ng-outlet></div> }</div>',
$routeConfig: [
{ path: '/b', component: 'oneCmp' }
]
});
$rootRouter.config([
{ path: '/...', component: 'childCmp' }
]);
compile('<div>outer { <div ng-outlet></div> }</div>');
$rootRouter.navigateByUrl('/b');
$rootScope.$digest();
expect(elt.text()).toBe('outer { inner { one } }');
expect($location.path()).toBe('/b');
}));
refactor(router): improve recognition and generation pipeline This is a big change. @matsko also deserves much of the credit for the implementation. Previously, `ComponentInstruction`s held all the state for async components. Now, we introduce several subclasses for `Instruction` to describe each type of navigation. BREAKING CHANGE: Redirects now use the Link DSL syntax. Before: ``` @RouteConfig([ { path: '/foo', redirectTo: '/bar' }, { path: '/bar', component: BarCmp } ]) ``` After: ``` @RouteConfig([ { path: '/foo', redirectTo: ['Bar'] }, { path: '/bar', component: BarCmp, name: 'Bar' } ]) ``` BREAKING CHANGE: This also introduces `useAsDefault` in the RouteConfig, which makes cases like lazy-loading and encapsulating large routes with sub-routes easier. Previously, you could use `redirectTo` like this to expand a URL like `/tab` to `/tab/posts`: @RouteConfig([ { path: '/tab', redirectTo: '/tab/users' } { path: '/tab', component: TabsCmp, name: 'Tab' } ]) AppCmp { ... } Now the recommended way to handle this is case is to use `useAsDefault` like so: ``` @RouteConfig([ { path: '/tab', component: TabsCmp, name: 'Tab' } ]) AppCmp { ... } @RouteConfig([ { path: '/posts', component: PostsCmp, useAsDefault: true, name: 'Posts' }, { path: '/users', component: UsersCmp, name: 'Users' } ]) TabsCmp { ... } ``` In the above example, you can write just `['/Tab']` and the route `Users` is automatically selected as a child route. Closes #4728 Closes #4228 Closes #4170 Closes #4490 Closes #4694 Closes #5200 Closes #5475
2015-11-23 21:07:37 -05:00
it('should work with recursive nested outlets', function () {
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
registerDirective('recurCmp', {
template: '<div>recur { <div ng-outlet></div> }</div>',
$routeConfig: [
{ path: '/recur', component: 'recurCmp' },
{ path: '/end', component: 'oneCmp' }
]});
$rootRouter.config([
{ path: '/recur', component: 'recurCmp' },
{ path: '/', component: 'oneCmp' }
]);
compile('<div>root { <div ng-outlet></div> }</div>');
$rootRouter.navigateByUrl('/recur/recur/end');
$rootScope.$digest();
expect(elt.text()).toBe('root { one }');
});
it('should change location path', inject(function ($location) {
$rootRouter.config([
{ path: '/user', component: 'userCmp' }
]);
compile('<div ng-outlet></div>');
$rootRouter.navigateByUrl('/user');
$rootScope.$digest();
expect($location.path()).toBe('/user');
}));
it('should pass through query terms to the location', inject(function ($location) {
$rootRouter.config([
{ path: '/user', component: 'userCmp' }
]);
compile('<div ng-outlet></div>');
$rootRouter.navigateByUrl('/user?x=y');
$rootScope.$digest();
expect($location.path()).toBe('/user');
expect($location.search()).toEqual({ x: 'y'});
}));
it('should change location to the canonical route', inject(function ($location) {
compile('<div ng-outlet></div>');
$rootRouter.config([
refactor(router): improve recognition and generation pipeline This is a big change. @matsko also deserves much of the credit for the implementation. Previously, `ComponentInstruction`s held all the state for async components. Now, we introduce several subclasses for `Instruction` to describe each type of navigation. BREAKING CHANGE: Redirects now use the Link DSL syntax. Before: ``` @RouteConfig([ { path: '/foo', redirectTo: '/bar' }, { path: '/bar', component: BarCmp } ]) ``` After: ``` @RouteConfig([ { path: '/foo', redirectTo: ['Bar'] }, { path: '/bar', component: BarCmp, name: 'Bar' } ]) ``` BREAKING CHANGE: This also introduces `useAsDefault` in the RouteConfig, which makes cases like lazy-loading and encapsulating large routes with sub-routes easier. Previously, you could use `redirectTo` like this to expand a URL like `/tab` to `/tab/posts`: @RouteConfig([ { path: '/tab', redirectTo: '/tab/users' } { path: '/tab', component: TabsCmp, name: 'Tab' } ]) AppCmp { ... } Now the recommended way to handle this is case is to use `useAsDefault` like so: ``` @RouteConfig([ { path: '/tab', component: TabsCmp, name: 'Tab' } ]) AppCmp { ... } @RouteConfig([ { path: '/posts', component: PostsCmp, useAsDefault: true, name: 'Posts' }, { path: '/users', component: UsersCmp, name: 'Users' } ]) TabsCmp { ... } ``` In the above example, you can write just `['/Tab']` and the route `Users` is automatically selected as a child route. Closes #4728 Closes #4228 Closes #4170 Closes #4490 Closes #4694 Closes #5200 Closes #5475
2015-11-23 21:07:37 -05:00
{ path: '/', redirectTo: ['/User'] },
{ path: '/user', component: 'userCmp', name: 'User' }
]);
$rootRouter.navigateByUrl('/');
$rootScope.$digest();
expect($location.path()).toBe('/user');
}));
it('should change location to the canonical route with nested components', inject(function ($location) {
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
registerDirective('childRouter', {
template: '<div>inner { <div ng-outlet></div> }</div>',
$routeConfig: [
refactor(router): improve recognition and generation pipeline This is a big change. @matsko also deserves much of the credit for the implementation. Previously, `ComponentInstruction`s held all the state for async components. Now, we introduce several subclasses for `Instruction` to describe each type of navigation. BREAKING CHANGE: Redirects now use the Link DSL syntax. Before: ``` @RouteConfig([ { path: '/foo', redirectTo: '/bar' }, { path: '/bar', component: BarCmp } ]) ``` After: ``` @RouteConfig([ { path: '/foo', redirectTo: ['Bar'] }, { path: '/bar', component: BarCmp, name: 'Bar' } ]) ``` BREAKING CHANGE: This also introduces `useAsDefault` in the RouteConfig, which makes cases like lazy-loading and encapsulating large routes with sub-routes easier. Previously, you could use `redirectTo` like this to expand a URL like `/tab` to `/tab/posts`: @RouteConfig([ { path: '/tab', redirectTo: '/tab/users' } { path: '/tab', component: TabsCmp, name: 'Tab' } ]) AppCmp { ... } Now the recommended way to handle this is case is to use `useAsDefault` like so: ``` @RouteConfig([ { path: '/tab', component: TabsCmp, name: 'Tab' } ]) AppCmp { ... } @RouteConfig([ { path: '/posts', component: PostsCmp, useAsDefault: true, name: 'Posts' }, { path: '/users', component: UsersCmp, name: 'Users' } ]) TabsCmp { ... } ``` In the above example, you can write just `['/Tab']` and the route `Users` is automatically selected as a child route. Closes #4728 Closes #4228 Closes #4170 Closes #4490 Closes #4694 Closes #5200 Closes #5475
2015-11-23 21:07:37 -05:00
{ path: '/new-child', component: 'oneCmp', name: 'NewChild'},
{ path: '/new-child-two', component: 'twoCmp', name: 'NewChildTwo'}
]
});
$rootRouter.config([
refactor(router): improve recognition and generation pipeline This is a big change. @matsko also deserves much of the credit for the implementation. Previously, `ComponentInstruction`s held all the state for async components. Now, we introduce several subclasses for `Instruction` to describe each type of navigation. BREAKING CHANGE: Redirects now use the Link DSL syntax. Before: ``` @RouteConfig([ { path: '/foo', redirectTo: '/bar' }, { path: '/bar', component: BarCmp } ]) ``` After: ``` @RouteConfig([ { path: '/foo', redirectTo: ['Bar'] }, { path: '/bar', component: BarCmp, name: 'Bar' } ]) ``` BREAKING CHANGE: This also introduces `useAsDefault` in the RouteConfig, which makes cases like lazy-loading and encapsulating large routes with sub-routes easier. Previously, you could use `redirectTo` like this to expand a URL like `/tab` to `/tab/posts`: @RouteConfig([ { path: '/tab', redirectTo: '/tab/users' } { path: '/tab', component: TabsCmp, name: 'Tab' } ]) AppCmp { ... } Now the recommended way to handle this is case is to use `useAsDefault` like so: ``` @RouteConfig([ { path: '/tab', component: TabsCmp, name: 'Tab' } ]) AppCmp { ... } @RouteConfig([ { path: '/posts', component: PostsCmp, useAsDefault: true, name: 'Posts' }, { path: '/users', component: UsersCmp, name: 'Users' } ]) TabsCmp { ... } ``` In the above example, you can write just `['/Tab']` and the route `Users` is automatically selected as a child route. Closes #4728 Closes #4228 Closes #4170 Closes #4490 Closes #4694 Closes #5200 Closes #5475
2015-11-23 21:07:37 -05:00
{ path: '/old-parent/old-child', redirectTo: ['/NewParent', 'NewChild'] },
{ path: '/old-parent/old-child-two', redirectTo: ['/NewParent', 'NewChildTwo'] },
{ path: '/new-parent/...', component: 'childRouter', name: 'NewParent' }
]);
compile('<div ng-outlet></div>');
$rootRouter.navigateByUrl('/old-parent/old-child');
$rootScope.$digest();
expect($location.path()).toBe('/new-parent/new-child');
expect(elt.text()).toBe('inner { one }');
$rootRouter.navigateByUrl('/old-parent/old-child-two');
$rootScope.$digest();
expect($location.path()).toBe('/new-parent/new-child-two');
expect(elt.text()).toBe('inner { two }');
}));
it('should navigate when the location path changes', inject(function ($location) {
$rootRouter.config([
{ path: '/one', component: 'oneCmp' }
]);
compile('<div ng-outlet></div>');
$location.path('/one');
$rootScope.$digest();
expect(elt.text()).toBe('one');
}));
it('should navigate when the location query changes', inject(function ($location) {
$rootRouter.config([
{ path: '/get/params', component: 'getParams' }
]);
compile('<div ng-outlet></div>');
$location.url('/get/params?x=y');
$rootScope.$digest();
expect(elt.text()).toBe('y');
}));
it('should expose a "navigating" property on $rootRouter', inject(function ($q) {
var defer;
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
registerDirective('pendingActivate', {
$canActivate: function () {
defer = $q.defer();
return defer.promise;
}
});
$rootRouter.config([
{ path: '/pending-activate', component: 'pendingActivate' }
]);
compile('<div ng-outlet></div>');
$rootRouter.navigateByUrl('/pending-activate');
$rootScope.$digest();
expect($rootRouter.navigating).toBe(true);
defer.resolve();
$rootScope.$digest();
expect($rootRouter.navigating).toBe(false);
}));
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
function registerDirective(name, options) {
var controller = getController(options);
function factory() {
return {
template: options.template || '',
controllerAs: name,
controller: controller
};
}
applyStaticProperties(controller, options);
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
$compileProvider.directive(name, factory);
}
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
function registerComponent(name, options) {
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
var definition = {
template: options.template || '',
controller: getController(options),
}
applyStaticProperties(definition.controller, options);
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
$compileProvider.component(name, definition);
}
function compile(template) {
elt = $compile('<div>' + template + '</div>')($rootScope);
$rootScope.$digest();
return elt;
}
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00
function getController(options) {
var controller = options.controller || function () {};
[
'$routerOnActivate', '$routerOnDeactivate',
'$routerOnReuse', '$routerCanReuse',
'$routerCanDeactivate'
].forEach(function (hookName) {
if (options[hookName]) {
controller.prototype[hookName] = options[hookName];
}
});
return controller;
}
function applyStaticProperties(target, options) {
['$canActivate', '$routeConfig'].forEach(function(property) {
if (options[property]) {
target[property] = options[property];
}
});
}
});
fix(angular1-router): add support for using the component helper In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
2016-01-31 10:35:23 -05:00