Skip to content

Commit 7d83959

Browse files
vamsivarikutibtford
vamsivarikuti
authored and
btford
committed
refactor(router): rename "as" to "name" in RouteConfig
BREAKING CHANGE: This is a rename to make routing concepts easier to understand. Before: ``` @RouteConfig([ { path: '/', component: MyCmp, as: 'Home' } ]) ``` After: ``` @RouteConfig([ { path: '/', component: MyCmp, name: 'Home' } ]) ``` Closes angular#4622 Closes angular#4896
1 parent cc37d0a commit 7d83959

18 files changed

Lines changed: 158 additions & 110 deletions

File tree

‎modules/angular1_router/test/integration/lifecycle_hook_spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ describe('Navigation lifecycle', function () {
205205

206206
$router.config([
207207
{ path: '/on-reuse/:number/...', component: 'reuseCmp' },
208-
{ path: '/two', component: 'twoCmp', as: 'Two'}
208+
{ path: '/two', component: 'twoCmp', name: 'Two'}
209209
]);
210210
compile('outer { <div ng-outlet></div> }');
211211

@@ -247,7 +247,7 @@ describe('Navigation lifecycle', function () {
247247

248248
$router.config([
249249
{ path: '/never-reuse/:number/...', component: 'reuseCmp' },
250-
{ path: '/two', component: 'twoCmp', as: 'Two'}
250+
{ path: '/two', component: 'twoCmp', name: 'Two'}
251251
]);
252252
compile('outer { <div ng-outlet></div> }');
253253

‎modules/angular1_router/test/ng_link_spec.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ describe('ngLink', function () {
3030
it('should allow linking from the parent to the child', function () {
3131
$router.config([
3232
{ path: '/a', component: 'oneCmp' },
33-
{ path: '/b', component: 'twoCmp', as: 'Two' }
33+
{ path: '/b', component: 'twoCmp', name: 'Two' }
3434
]);
3535
compile('<a ng-link="[\'/Two\']">link</a> | outer { <div ng-outlet></div> }');
3636

@@ -43,7 +43,7 @@ describe('ngLink', function () {
4343
it('should allow linking from the child and the parent', function () {
4444
$router.config([
4545
{ path: '/a', component: 'oneCmp' },
46-
{ path: '/b', component: 'twoCmp', as: 'Two' }
46+
{ path: '/b', component: 'twoCmp', name: 'Two' }
4747
]);
4848
compile('outer { <div ng-outlet></div> }');
4949

@@ -59,7 +59,7 @@ describe('ngLink', function () {
5959

6060
$router.config([
6161
{ path: '/a', component: 'twoLinkCmp' },
62-
{ path: '/b/:param', component: 'twoCmp', as: 'Two' }
62+
{ path: '/b/:param', component: 'twoCmp', name: 'Two' }
6363
]);
6464
compile('<div ng-outlet></div>');
6565

@@ -74,7 +74,7 @@ describe('ngLink', function () {
7474
registerComponent('twoLinkCmp', '<div><a ng-link="[\'/Two\', {param: twoLinkCmp.number}]">{{twoLinkCmp.number}}</a></div>', function () {this.number = 'param'});
7575
$router.config([
7676
{ path: '/a', component: 'twoLinkCmp' },
77-
{ path: '/b/:param', component: 'twoCmp', as: 'Two' }
77+
{ path: '/b/:param', component: 'twoCmp', name: 'Two' }
7878
]);
7979
compile('<div ng-outlet></div>');
8080

@@ -88,7 +88,7 @@ describe('ngLink', function () {
8888
it('should navigate on left-mouse click when a link url matches a route', function () {
8989
$router.config([
9090
{ path: '/', component: 'oneCmp' },
91-
{ path: '/two', component: 'twoCmp', as: 'Two'}
91+
{ path: '/two', component: 'twoCmp', name: 'Two'}
9292
]);
9393

9494
compile('<a ng-link="[\'/Two\']">link</a> | <div ng-outlet></div>');
@@ -107,7 +107,7 @@ describe('ngLink', function () {
107107
it('should not navigate on non-left mouse click when a link url matches a route', inject(function ($router) {
108108
$router.config([
109109
{ path: '/', component: 'oneCmp' },
110-
{ path: '/two', component: 'twoCmp', as: 'Two'}
110+
{ path: '/two', component: 'twoCmp', name: 'Two'}
111111
]);
112112

113113
compile('<a ng-link="[\'/Two\']">link</a> | <div ng-outlet></div>');
@@ -124,7 +124,7 @@ describe('ngLink', function () {
124124
it('should not navigate a link without an href', function () {
125125
$router.config([
126126
{ path: '/', component: 'oneCmp' },
127-
{ path: '/two', component: 'twoCmp', as: 'Two'}
127+
{ path: '/two', component: 'twoCmp', name: 'Two'}
128128
]);
129129
expect(function () {
130130
compile('<a>link</a>');

‎modules/angular2/examples/router/ts/can_activate/can_activate_example.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ class HomeCmp {
4343
directives: [ROUTER_DIRECTIVES]
4444
})
4545
@RouteConfig([
46-
{path: '/user-settings/:id', component: ControlPanelCmp, as: 'ControlPanelCmp'},
47-
{path: '/', component: HomeCmp, as: 'HomeCmp'}
46+
{path: '/user-settings/:id', component: ControlPanelCmp, name: 'ControlPanelCmp'},
47+
{path: '/', component: HomeCmp, name: 'HomeCmp'}
4848
])
4949
class AppCmp {
5050
}

‎modules/angular2/examples/router/ts/can_deactivate/can_deactivate_example.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ class NoteIndexCmp {
5353
directives: [ROUTER_DIRECTIVES]
5454
})
5555
@RouteConfig([
56-
{path: '/note/:id', component: NoteCmp, as: 'NoteCmp'},
57-
{path: '/', component: NoteIndexCmp, as: 'NoteIndexCmp'}
56+
{path: '/note/:id', component: NoteCmp, name: 'NoteCmp'},
57+
{path: '/', component: NoteIndexCmp, name: 'NoteIndexCmp'}
5858
])
5959
class AppCmp {
6060
}

‎modules/angular2/examples/router/ts/on_activate/on_activate_example.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ class MyCmp implements OnActivate {
3333
directives: [ROUTER_DIRECTIVES]
3434
})
3535
@RouteConfig([
36-
{path: '/', component: MyCmp, as: 'HomeCmp'},
37-
{path: '/:param', component: MyCmp, as: 'ParamCmp'}
36+
{path: '/', component: MyCmp, name: 'HomeCmp'},
37+
{path: '/:param', component: MyCmp, name: 'ParamCmp'}
3838
])
3939
class AppCmp {
4040
}

‎modules/angular2/examples/router/ts/on_deactivate/on_deactivate_example.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ class MyCmp implements OnDeactivate {
4646
directives: [ROUTER_DIRECTIVES, NgFor]
4747
})
4848
@RouteConfig([
49-
{path: '/', component: MyCmp, as: 'HomeCmp'},
50-
{path: '/:param', component: MyCmp, as: 'ParamCmp'}
49+
{path: '/', component: MyCmp, name: 'HomeCmp'},
50+
{path: '/:param', component: MyCmp, name: 'ParamCmp'}
5151
])
5252
class AppCmp {
5353
constructor(public logService: LogService) {}

‎modules/angular2/examples/router/ts/reuse/reuse_example.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ class MyCmp implements CanReuse,
4444
directives: [ROUTER_DIRECTIVES]
4545
})
4646
@RouteConfig([
47-
{path: '/', component: MyCmp, as: 'HomeCmp'},
48-
{path: '/:name', component: MyCmp, as: 'HomeCmp'}
47+
{path: '/', component: MyCmp, name: 'HomeCmp'},
48+
{path: '/:name', component: MyCmp, name: 'HomeCmp'}
4949
])
5050
class AppCmp {
5151
}

‎modules/angular2/src/router/route_config_impl.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {CONST, Type} from 'angular2/src/core/facade/lang';
1+
import {CONST, Type, isPresent} from 'angular2/src/core/facade/lang';
22
import {RouteDefinition} from './route_definition';
33
export {RouteDefinition} from './route_definition';
44

@@ -18,7 +18,7 @@ export class RouteConfig {
1818
* It has the following properties:
1919
* - `path` is a string that uses the route matcher DSL.
2020
* - `component` a component type.
21-
* - `as` is an optional `CamelCase` string representing the name of the route.
21+
* - `name` is an optional `CamelCase` string representing the name of the route.
2222
* - `data` is an optional property of any type representing arbitrary route metadata for the given
2323
* route. It is injectable via {@link RouteData}.
2424
*
@@ -27,7 +27,7 @@ export class RouteConfig {
2727
* import {RouteConfig} from 'angular2/router';
2828
*
2929
* @RouteConfig([
30-
* {path: '/home', component: HomeCmp, as: 'HomeCmp' }
30+
* {path: '/home', component: HomeCmp, name: 'HomeCmp' }
3131
* ])
3232
* class MyApp {}
3333
* ```
@@ -37,15 +37,15 @@ export class Route implements RouteDefinition {
3737
data: {[key: string]: any};
3838
path: string;
3939
component: Type;
40-
as: string;
40+
name: string;
4141
// added next two properties to work around https://github.com/Microsoft/TypeScript/issues/4107
4242
loader: Function;
4343
redirectTo: string;
44-
constructor({path, component, as,
45-
data}: {path: string, component: Type, as?: string, data?: {[key: string]: any}}) {
44+
constructor({path, component, name,
45+
data}: {path: string, component: Type, name?: string, data?: {[key: string]: any}}) {
4646
this.path = path;
4747
this.component = component;
48-
this.as = as;
48+
this.name = name;
4949
this.loader = null;
5050
this.redirectTo = null;
5151
this.data = data;
@@ -58,7 +58,7 @@ export class Route implements RouteDefinition {
5858
* It takes an object with the following properties:
5959
* - `path` is a string that uses the route matcher DSL.
6060
* - `component` a component type.
61-
* - `as` is an optional `CamelCase` string representing the name of the route.
61+
* - `name` is an optional `CamelCase` string representing the name of the route.
6262
* - `data` is an optional property of any type representing arbitrary route metadata for the given
6363
* route. It is injectable via {@link RouteData}.
6464
*
@@ -77,14 +77,14 @@ export class AuxRoute implements RouteDefinition {
7777
data: {[key: string]: any} = null;
7878
path: string;
7979
component: Type;
80-
as: string;
80+
name: string;
8181
// added next two properties to work around https://github.com/Microsoft/TypeScript/issues/4107
8282
loader: Function = null;
8383
redirectTo: string = null;
84-
constructor({path, component, as}: {path: string, component: Type, as?: string}) {
84+
constructor({path, component, name}: {path: string, component: Type, name?: string}) {
8585
this.path = path;
8686
this.component = component;
87-
this.as = as;
87+
this.name = name;
8888
}
8989
}
9090

@@ -95,7 +95,7 @@ export class AuxRoute implements RouteDefinition {
9595
* It has the following properties:
9696
* - `path` is a string that uses the route matcher DSL.
9797
* - `loader` is a function that returns a promise that resolves to a component.
98-
* - `as` is an optional `CamelCase` string representing the name of the route.
98+
* - `name` is an optional `CamelCase` string representing the name of the route.
9999
* - `data` is an optional property of any type representing arbitrary route metadata for the given
100100
* route. It is injectable via {@link RouteData}.
101101
*
@@ -104,7 +104,7 @@ export class AuxRoute implements RouteDefinition {
104104
* import {RouteConfig} from 'angular2/router';
105105
*
106106
* @RouteConfig([
107-
* {path: '/home', loader: () => Promise.resolve(MyLoadedCmp), as: 'MyLoadedCmp'}
107+
* {path: '/home', loader: () => Promise.resolve(MyLoadedCmp), name: 'MyLoadedCmp'}
108108
* ])
109109
* class MyApp {}
110110
* ```
@@ -114,12 +114,12 @@ export class AsyncRoute implements RouteDefinition {
114114
data: {[key: string]: any};
115115
path: string;
116116
loader: Function;
117-
as: string;
118-
constructor({path, loader, as,
119-
data}: {path: string, loader: Function, as?: string, data?: {[key: string]: any}}) {
117+
name: string;
118+
constructor({path, loader, name, data}:
119+
{path: string, loader: Function, name?: string, data?: {[key: string]: any}}) {
120120
this.path = path;
121121
this.loader = loader;
122-
this.as = as;
122+
this.name = name;
123123
this.data = data;
124124
}
125125
}
@@ -147,7 +147,7 @@ export class AsyncRoute implements RouteDefinition {
147147
export class Redirect implements RouteDefinition {
148148
path: string;
149149
redirectTo: string;
150-
as: string = null;
150+
name: string = null;
151151
// added next property to work around https://github.com/Microsoft/TypeScript/issues/4107
152152
loader: Function = null;
153153
data: any = null;

‎modules/angular2/src/router/route_config_nomalizer.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,14 @@ export function normalizeRouteConfig(config: RouteDefinition): RouteDefinition {
1717
throw new BaseException(
1818
`Route config should contain exactly one "component", "loader", or "redirectTo" property.`);
1919
}
20+
if (config.as && config.name) {
21+
throw new BaseException(`Route config should contain exactly one "as" or "name" property.`);
22+
}
23+
if (config.as) {
24+
config.name = config.as;
25+
}
2026
if (config.loader) {
21-
return new AsyncRoute({path: config.path, loader: config.loader, as: config.as});
27+
return new AsyncRoute({path: config.path, loader: config.loader, name: config.name});
2228
}
2329
if (config.component) {
2430
if (typeof config.component == 'object') {
@@ -27,11 +33,11 @@ export function normalizeRouteConfig(config: RouteDefinition): RouteDefinition {
2733
return new Route({
2834
path: config.path,
2935
component:<Type>componentDefinitionObject.constructor,
30-
as: config.as
36+
name: config.name
3137
});
3238
} else if (componentDefinitionObject.type == 'loader') {
3339
return new AsyncRoute(
34-
{path: config.path, loader: componentDefinitionObject.loader, as: config.as});
40+
{path: config.path, loader: componentDefinitionObject.loader, name: config.name});
3541
} else {
3642
throw new BaseException(
3743
`Invalid component type "${componentDefinitionObject.type}". Valid types are "constructor" and "loader".`);
@@ -40,7 +46,7 @@ export function normalizeRouteConfig(config: RouteDefinition): RouteDefinition {
4046
return new Route(<{
4147
path: string;
4248
component: Type;
43-
as?: string
49+
name?: string;
4450
}>config);
4551
}
4652

‎modules/angular2/src/router/route_definition.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ library angular2.src.router.route_definition;
22

33
abstract class RouteDefinition {
44
final String path;
5-
final String as;
6-
const RouteDefinition({this.path, this.as});
5+
final String name;
6+
const RouteDefinition({this.path, this.name});
77
}

0 commit comments

Comments
 (0)