honeymoose/Angular-Cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(angular1_router): rename $route service to $rootRouter

Browse Source 
The singleton service that represents the top level router was called
`$router` but this is confusing since there are actually lots of routers,
which depend upon where you are in the DOM. This is similar to the situation
with scopes.

This commit clarifies this singleton by renaming it to `$rootRouter`.

BREAKING CHANGE:

The `$router` injectable service has been renamed to `$rootRouter`
This commit is contained in:
Peter Bacon Darwin
2016-02-24 21:15:34 +00:00
committed by Pete Bacon Darwin
parent edad8e3f56
commit a1c3be21ec
11 changed files with 141 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/angular1_router/index.html
+3 -3
View File
@@ -12,9 +12,9 @@
<script src="../../dist/angular_1_router.js"></script>
<script>
angular.module('myApp', ['ngComponentRouter'])
.controller('MyCtrl', ['$router', function ($router) {
console.log($router);
$router.navigateByUrl('/')
.controller('MyCtrl', ['$rootRouter', function ($rootRouter) {
console.log($rootRouter);
$rootRouter.navigateByUrl('/')
.then(console.log.bind(console, 'resolve'), console.log.bind(console, 'reject'));
}]);
</script>
modules/angular1_router/src/module_template.js
Vendored
+1 -1
View File
@@ -4,7 +4,7 @@ angular.module('ngComponentRouter').
// Because Angular 1 has no notion of a root component, we use an object with unique identity
// to represent this. Can be overloaded with a component name
value('$routerRootComponent', new Object()).
factory('$router', ['$q', '$location', '$$directiveIntrospector', '$browser', '$rootScope', '$injector', '$routerRootComponent', routerFactory]);
factory('$rootRouter', ['$q', '$location', '$$directiveIntrospector', '$browser', '$rootScope', '$injector', '$routerRootComponent', routerFactory]);
function routerFactory($q, $location, $$directiveIntrospector, $browser, $rootScope, $injector, $routerRootComponent) {
modules/angular1_router/src/ng_outlet.ts
+9 -11
View File
@@ -61,8 +61,8 @@ class DirectiveIntrospectorProvider {
*
* The value for the `ngOutlet` attribute is optional.
*/
function ngOutletDirective($animate, $q: ng.IQService, $router) {
let rootRouter = $router;
function ngOutletDirective($animate, $q: ng.IQService, $rootRouter) {
let rootRouter = $rootRouter;
return {
restrict: 'AE',
@@ -231,8 +231,8 @@ function routerTriggerDirective($q) {
*
* ```js
* angular.module('myApp', ['ngComponentRouter'])
* .controller('AppController', ['$router', function($router) {
* $router.config({ path: '/user/:id', component: 'user' });
* .controller('AppController', ['$rootRouter', function($rootRouter) {
* $rootRouter.config({ path: '/user/:id', component: 'user' });
* this.user = { name: 'Brian', id: 123 };
* });
* ```
@@ -243,13 +243,11 @@ function routerTriggerDirective($q) {
* </div>
* ```
*/
function ngLinkDirective($router, $parse) {
let rootRouter = $router;
function ngLinkDirective($rootRouter, $parse) {
return {require: '?^^ngOutlet', restrict: 'A', link: ngLinkDirectiveLinkFn};
function ngLinkDirectiveLinkFn(scope, element, attrs, ctrl) {
let router = (ctrl && ctrl.$$router) || rootRouter;
let router = (ctrl && ctrl.$$router) || $rootRouter;
if (!router) {
return;
}
@@ -277,7 +275,7 @@ function ngLinkDirective($router, $parse) {
return;
}
$router.navigateByInstruction(instruction);
$rootRouter.navigateByInstruction(instruction);
event.preventDefault();
});
}
@@ -291,9 +289,9 @@ function dashCase(str: string): string {
* A module for adding new a routing system Angular 1.
*/
angular.module('ngComponentRouter', [])
.directive('ngOutlet', ['$animate', '$q', '$router', ngOutletDirective])
.directive('ngOutlet', ['$animate', '$q', '$rootRouter', ngOutletDirective])
.directive('ngOutlet', ['$compile', ngOutletFillContentDirective])
.directive('ngLink', ['$router', '$parse', ngLinkDirective])
.directive('ngLink', ['$rootRouter', '$parse', ngLinkDirective])
.directive('$router', ['$q', routerTriggerDirective]);
/*
modules/angular1_router/src/ng_route_shim.js
Vendored
+7 -7
View File
@@ -24,12 +24,12 @@
.directive('a', anchorLinkDirective)
// Connects the legacy $routeProvider config shim to Component Router's config.
.run(['$route', '$router', function ($route, $router) {
.run(['$route', '$rootRouter', function ($route, $rootRouter) {
$route.$$subscribe(function (routeDefinition) {
if (!angular.isArray(routeDefinition)) {
routeDefinition = [routeDefinition];
}
$router.config(routeDefinition);
$rootRouter.config(routeDefinition);
});
}]);
@@ -241,12 +241,12 @@
}
function $routeParamsFactory($router, $rootScope) {
function $routeParamsFactory($rootRouter, $rootScope) {
// the identity of this object cannot change
var paramsObj = {};
$rootScope.$on('$routeChangeSuccess', function () {
var newParams = $router._currentInstruction && $router._currentInstruction.component.params;
var newParams = $rootRouter._currentInstruction && $rootRouter._currentInstruction.component.params;
angular.forEach(paramsObj, function (val, name) {
delete paramsObj[name];
@@ -262,7 +262,7 @@
/**
* Allows normal anchor links to kick off routing.
*/
function anchorLinkDirective($router) {
function anchorLinkDirective($rootRouter) {
return {
restrict: 'E',
link: function (scope, element) {
@@ -281,8 +281,8 @@
}
var href = element.attr(hrefAttrName);
if (href && $router.recognize(href)) {
$router.navigateByUrl(href);
if (href && $rootRouter.recognize(href)) {
$rootRouter.navigateByUrl(href);
event.preventDefault();
}
});
modules/angular1_router/test/integration/animation_spec.js
Vendored
+6 -6
View File
@@ -5,7 +5,7 @@ describe('ngOutlet animations', function () {
$animate,
$compile,
$rootScope,
$router,
$rootRouter,
$compileProvider;
beforeEach(function () {
@@ -17,11 +17,11 @@ describe('ngOutlet animations', function () {
$compileProvider = _$compileProvider_;
});
inject(function (_$animate_, _$compile_, _$rootScope_, _$router_) {
inject(function (_$animate_, _$compile_, _$rootScope_, _$rootRouter_) {
$animate = _$animate_;
$compile = _$compile_;
$rootScope = _$rootScope_;
$router = _$router_;
$rootRouter = _$rootRouter_;
});
registerComponent('userCmp', {
@@ -41,11 +41,11 @@ describe('ngOutlet animations', function () {
compile('<div ng-outlet></div>');
$router.config([
$rootRouter.config([
{ path: '/user/:name', component: 'userCmp' }
]);
$router.navigateByUrl('/user/brian');
$rootRouter.navigateByUrl('/user/brian');
$rootScope.$digest();
expect(elt.text()).toBe('hello brian');
@@ -54,7 +54,7 @@ describe('ngOutlet animations', function () {
expect(item.event).toBe('enter');
// navigate to pete
$router.navigateByUrl('/user/pete');
$rootRouter.navigateByUrl('/user/pete');
$rootScope.$digest();
expect(elt.text()).toBe('hello pete');
modules/angular1_router/test/integration/lifecycle_hook_spec.js
Vendored
+46 -46
View File
File diff suppressed because it is too large Load Diff
modules/angular1_router/test/integration/navigation_spec.js
Vendored
+35 -35
View File
@@ -5,7 +5,7 @@ describe('navigation', function () {
var elt,
$compile,
$rootScope,
$router,
$rootRouter,
$compileProvider;
beforeEach(function () {
@@ -15,10 +15,10 @@ describe('navigation', function () {
$compileProvider = _$compileProvider_;
});
inject(function (_$compile_, _$rootScope_, _$router_) {
inject(function (_$compile_, _$rootScope_, _$rootRouter_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$router = _$router_;
$rootRouter = _$rootRouter_;
});
registerDirective('userCmp', {
@@ -52,11 +52,11 @@ describe('navigation', function () {
it('should work in a simple case', function () {
compile('<ng-outlet></ng-outlet>');
$router.config([
$rootRouter.config([
{ path: '/', component: 'oneCmp' }
]);
$router.navigateByUrl('/');
$rootRouter.navigateByUrl('/');
$rootScope.$digest();
expect(elt.text()).toBe('one');
@@ -66,11 +66,11 @@ describe('navigation', function () {
it('should work with components created by the `mod.component()` helper', function () {
compile('<ng-outlet></ng-outlet>');
$router.config([
$rootRouter.config([
{ path: '/', component: 'threeCmp' }
]);
$router.navigateByUrl('/');
$rootRouter.navigateByUrl('/');
$rootScope.$digest();
expect(elt.text()).toBe('three');
@@ -78,16 +78,16 @@ describe('navigation', function () {
it('should navigate between components with different parameters', function () {
$router.config([
$rootRouter.config([
{ path: '/user/:name', component: 'userCmp' }
]);
compile('<ng-outlet></ng-outlet>');
$router.navigateByUrl('/user/brian');
$rootRouter.navigateByUrl('/user/brian');
$rootScope.$digest();
expect(elt.text()).toBe('hello brian');
$router.navigateByUrl('/user/igor');
$rootRouter.navigateByUrl('/user/igor');
$rootScope.$digest();
expect(elt.text()).toBe('hello igor');
});
@@ -106,17 +106,17 @@ describe('navigation', function () {
controller: ParentController
});
$router.config([
$rootRouter.config([
{ path: '/parent/...', component: 'parentCmp' }
]);
compile('<ng-outlet></ng-outlet>');
$router.navigateByUrl('/parent/user/brian');
$rootRouter.navigateByUrl('/parent/user/brian');
$rootScope.$digest();
expect(instanceCount).toBe(1);
expect(elt.text()).toBe('parent { hello brian }');
$router.navigateByUrl('/parent/user/igor');
$rootRouter.navigateByUrl('/parent/user/igor');
$rootScope.$digest();
expect(instanceCount).toBe(1);
expect(elt.text()).toBe('parent { hello igor }');
@@ -131,12 +131,12 @@ describe('navigation', function () {
]
});
$router.config([
$rootRouter.config([
{ path: '/a/...', component: 'childCmp' }
]);
compile('<div>outer { <div ng-outlet></div> }</div>');
$router.navigateByUrl('/a/b');
$rootRouter.navigateByUrl('/a/b');
$rootScope.$digest();
expect(elt.text()).toBe('outer { inner { one } }');
@@ -150,12 +150,12 @@ describe('navigation', function () {
]
});
$router.config([
$rootRouter.config([
{ path: '/...', component: 'childCmp' }
]);
compile('<div>outer { <div ng-outlet></div> }</div>');
$router.navigateByUrl('/b');
$rootRouter.navigateByUrl('/b');
$rootScope.$digest();
expect(elt.text()).toBe('outer { inner { one } }');
@@ -171,26 +171,26 @@ describe('navigation', function () {
{ path: '/end', component: 'oneCmp' }
]});
$router.config([
$rootRouter.config([
{ path: '/recur', component: 'recurCmp' },
{ path: '/', component: 'oneCmp' }
]);
compile('<div>root { <div ng-outlet></div> }</div>');
$router.navigateByUrl('/recur/recur/end');
$rootRouter.navigateByUrl('/recur/recur/end');
$rootScope.$digest();
expect(elt.text()).toBe('root { one }');
});
it('should change location path', inject(function ($location) {
$router.config([
$rootRouter.config([
{ path: '/user', component: 'userCmp' }
]);
compile('<div ng-outlet></div>');
$router.navigateByUrl('/user');
$rootRouter.navigateByUrl('/user');
$rootScope.$digest();
expect($location.path()).toBe('/user');
@@ -198,13 +198,13 @@ describe('navigation', function () {
it('should pass through query terms to the location', inject(function ($location) {
$router.config([
$rootRouter.config([
{ path: '/user', component: 'userCmp' }
]);
compile('<div ng-outlet></div>');
$router.navigateByUrl('/user?x=y');
$rootRouter.navigateByUrl('/user?x=y');
$rootScope.$digest();
expect($location.path()).toBe('/user');
@@ -215,12 +215,12 @@ describe('navigation', function () {
it('should change location to the canonical route', inject(function ($location) {
compile('<div ng-outlet></div>');
$router.config([
$rootRouter.config([
{ path: '/', redirectTo: ['/User'] },
{ path: '/user', component: 'userCmp', name: 'User' }
]);
$router.navigateByUrl('/');
$rootRouter.navigateByUrl('/');
$rootScope.$digest();
expect($location.path()).toBe('/user');
@@ -236,7 +236,7 @@ describe('navigation', function () {
]
});
$router.config([
$rootRouter.config([
{ path: '/old-parent/old-child', redirectTo: ['/NewParent', 'NewChild'] },
{ path: '/old-parent/old-child-two', redirectTo: ['/NewParent', 'NewChildTwo'] },
{ path: '/new-parent/...', component: 'childRouter', name: 'NewParent' }
@@ -244,13 +244,13 @@ describe('navigation', function () {
compile('<div ng-outlet></div>');
$router.navigateByUrl('/old-parent/old-child');
$rootRouter.navigateByUrl('/old-parent/old-child');
$rootScope.$digest();
expect($location.path()).toBe('/new-parent/new-child');
expect(elt.text()).toBe('inner { one }');
$router.navigateByUrl('/old-parent/old-child-two');
$rootRouter.navigateByUrl('/old-parent/old-child-two');
$rootScope.$digest();
expect($location.path()).toBe('/new-parent/new-child-two');
@@ -259,7 +259,7 @@ describe('navigation', function () {
it('should navigate when the location path changes', inject(function ($location) {
$router.config([
$rootRouter.config([
{ path: '/one', component: 'oneCmp' }
]);
compile('<div ng-outlet></div>');
@@ -272,7 +272,7 @@ describe('navigation', function () {
it('should navigate when the location query changes', inject(function ($location) {
$router.config([
$rootRouter.config([
{ path: '/get/params', component: 'getParams' }
]);
compile('<div ng-outlet></div>');
@@ -284,7 +284,7 @@ describe('navigation', function () {
}));
it('should expose a "navigating" property on $router', inject(function ($q) {
it('should expose a "navigating" property on $rootRouter', inject(function ($q) {
var defer;
registerDirective('pendingActivate', {
$canActivate: function () {
@@ -292,17 +292,17 @@ describe('navigation', function () {
return defer.promise;
}
});
$router.config([
$rootRouter.config([
{ path: '/pending-activate', component: 'pendingActivate' }
]);
compile('<div ng-outlet></div>');
$router.navigateByUrl('/pending-activate');
$rootRouter.navigateByUrl('/pending-activate');
$rootScope.$digest();
expect($router.navigating).toBe(true);
expect($rootRouter.navigating).toBe(true);
defer.resolve();
$rootScope.$digest();
expect($router.navigating).toBe(false);
expect($rootRouter.navigating).toBe(false);
}));
function registerDirective(name, options) {
modules/angular1_router/test/integration/router_spec.js
Vendored
+3 -3
View File
@@ -5,7 +5,7 @@ describe('router', function () {
var elt,
$compile,
$rootScope,
$router,
$rootRouter,
$compileProvider;
beforeEach(function () {
@@ -18,10 +18,10 @@ describe('router', function () {
$compileProvider = _$compileProvider_;
});
inject(function (_$compile_, _$rootScope_, _$router_) {
inject(function (_$compile_, _$rootScope_, _$rootRouter_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$router = _$router_;
$rootRouter = _$rootRouter_;
});
});
modules/angular1_router/test/integration/shim_spec.js
Vendored
+12 -12
View File
@@ -5,7 +5,7 @@ describe('ngRoute shim', function () {
var elt,
$compile,
$rootScope,
$router,
$rootRouter,
$compileProvider,
$routeProvider;
@@ -18,10 +18,10 @@ describe('ngRoute shim', function () {
$routeProvider = _$routeProvider_;
});
inject(function (_$compile_, _$rootScope_, _$router_) {
inject(function (_$compile_, _$rootScope_, _$rootRouter_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$router = _$router_;
$rootRouter = _$rootRouter_;
});
});
@@ -36,7 +36,7 @@ describe('ngRoute shim', function () {
compile('<ng-outlet></ng-outlet>');
$router.navigateByUrl('/');
$rootRouter.navigateByUrl('/');
$rootScope.$digest();
expect(elt.text()).toBe('one');
@@ -55,7 +55,7 @@ describe('ngRoute shim', function () {
compile('root {<ng-outlet></ng-outlet>}');
$router.navigateByUrl('/');
$rootRouter.navigateByUrl('/');
$rootScope.$digest();
expect(elt.text()).toBe('root {one}');
}));
@@ -76,7 +76,7 @@ describe('ngRoute shim', function () {
compile('<ng-outlet></ng-outlet>');
$router.navigateByUrl('/');
$rootRouter.navigateByUrl('/');
$rootScope.$digest();
expect(elt.text()).toBe('value: 42');
@@ -94,11 +94,11 @@ describe('ngRoute shim', function () {
compile('<ng-outlet></ng-outlet>');
$router.navigateByUrl('/user/brian');
$rootRouter.navigateByUrl('/user/brian');
$rootScope.$digest();
expect(elt.text()).toBe('hello brian');
$router.navigateByUrl('/user/igor');
$rootRouter.navigateByUrl('/user/igor');
$rootScope.$digest();
expect(elt.text()).toBe('hello igor');
});
@@ -115,7 +115,7 @@ describe('ngRoute shim', function () {
compile('<ng-outlet></ng-outlet>');
$router.navigateByUrl('/home/foo/bar/123');
$rootRouter.navigateByUrl('/home/foo/bar/123');
$rootScope.$digest();
expect(elt.text()).toBe('rest: foo/bar/123');
});
@@ -129,7 +129,7 @@ describe('ngRoute shim', function () {
compile('root {<ng-outlet></ng-outlet>}');
$router.navigateByUrl('/home/test');
$rootRouter.navigateByUrl('/home/test');
$rootScope.$digest();
expect(elt.text()).toBe('root {}');
expect(console.warn)
@@ -150,7 +150,7 @@ describe('ngRoute shim', function () {
compile('root {<ng-outlet></ng-outlet>}');
$router.navigateByUrl('/');
$rootRouter.navigateByUrl('/');
$rootScope.$digest();
expect(elt.text()).toBe('root {welcome home!}');
expect($location.path()).toBe('/home');
@@ -169,7 +169,7 @@ describe('ngRoute shim', function () {
compile('root {<ng-outlet></ng-outlet>}');
$router.navigateByUrl('/somewhere');
$rootRouter.navigateByUrl('/somewhere');
$rootScope.$digest();
expect(elt.text()).toBe('root {welcome home!}');
expect($location.path()).toBe('/home');
modules/angular1_router/test/ng_link_spec.js
Vendored
+15 -15
View File
@@ -5,7 +5,7 @@ describe('ngLink', function () {
var elt,
$compile,
$rootScope,
$router,
$rootRouter,
$compileProvider;
beforeEach(function () {
@@ -15,10 +15,10 @@ describe('ngLink', function () {
$compileProvider = _$compileProvider_;
});
inject(function (_$compile_, _$rootScope_, _$router_) {
inject(function (_$compile_, _$rootScope_, _$rootRouter_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$router = _$router_;
$rootRouter = _$rootRouter_;
});
registerComponent('userCmp', '<div>hello {{userCmp.$routeParams.name}}</div>', function () {});
@@ -28,26 +28,26 @@ describe('ngLink', function () {
it('should allow linking from the parent to the child', function () {
$router.config([
$rootRouter.config([
{ path: '/a', component: 'oneCmp' },
{ path: '/b', component: 'twoCmp', name: 'Two' }
]);
compile('<a ng-link="[\'/Two\']">link</a> | outer { <div ng-outlet></div> }');
$router.navigateByUrl('/a');
$rootRouter.navigateByUrl('/a');
$rootScope.$digest();
expect(elt.find('a').attr('href')).toBe('./b');
});
it('should allow linking from the child and the parent', function () {
$router.config([
$rootRouter.config([
{ path: '/a', component: 'oneCmp' },
{ path: '/b', component: 'twoCmp', name: 'Two' }
]);
compile('outer { <div ng-outlet></div> }');
$router.navigateByUrl('/b');
$rootRouter.navigateByUrl('/b');
$rootScope.$digest();
expect(elt.find('a').attr('href')).toBe('./b');
@@ -57,13 +57,13 @@ describe('ngLink', function () {
it('should allow params in routerLink directive', function () {
registerComponent('twoLinkCmp', '<div><a ng-link="[\'/Two\', {param: \'lol\'}]">{{twoLinkCmp.number}}</a></div>', function () {this.number = 'two'});
$router.config([
$rootRouter.config([
{ path: '/a', component: 'twoLinkCmp' },
{ path: '/b/:param', component: 'twoCmp', name: 'Two' }
]);
compile('<div ng-outlet></div>');
$router.navigateByUrl('/a');
$rootRouter.navigateByUrl('/a');
$rootScope.$digest();
expect(elt.find('a').attr('href')).toBe('./b/lol');
@@ -72,13 +72,13 @@ describe('ngLink', function () {
it('should update the href of links with bound params', function () {
registerComponent('twoLinkCmp', '<div><a ng-link="[\'/Two\', {param: twoLinkCmp.number}]">{{twoLinkCmp.number}}</a></div>', function () {this.number = 'param'});
$router.config([
$rootRouter.config([
{ path: '/a', component: 'twoLinkCmp' },
{ path: '/b/:param', component: 'twoCmp', name: 'Two' }
]);
compile('<div ng-outlet></div>');
$router.navigateByUrl('/a');
$rootRouter.navigateByUrl('/a');
$rootScope.$digest();
expect(elt.find('a').attr('href')).toBe('./b/param');
@@ -86,7 +86,7 @@ describe('ngLink', function () {
it('should navigate on left-mouse click when a link url matches a route', function () {
$router.config([
$rootRouter.config([
{ path: '/', component: 'oneCmp' },
{ path: '/two', component: 'twoCmp', name: 'Two'}
]);
@@ -104,8 +104,8 @@ describe('ngLink', function () {
});
it('should not navigate on non-left mouse click when a link url matches a route', inject(function ($router) {
$router.config([
it('should not navigate on non-left mouse click when a link url matches a route', inject(function ($rootRouter) {
$rootRouter.config([
{ path: '/', component: 'oneCmp' },
{ path: '/two', component: 'twoCmp', name: 'Two'}
]);
@@ -122,7 +122,7 @@ describe('ngLink', function () {
// See https://github.com/angular/router/issues/206
it('should not navigate a link without an href', function () {
$router.config([
$rootRouter.config([
{ path: '/', component: 'oneCmp' },
{ path: '/two', component: 'twoCmp', name: 'Two'}
]);
modules/angular1_router/test/util.es5.js
+4 -4
View File
@@ -22,7 +22,7 @@ function provideHelpers(fn, preInject) {
var elt,
$compile,
$rootScope,
$router,
$rootRouter,
$templateCache,
$controllerProvider;
@@ -32,10 +32,10 @@ function provideHelpers(fn, preInject) {
$controllerProvider = _$controllerProvider_;
});
inject(function(_$compile_, _$rootScope_, _$router_, _$templateCache_) {
inject(function(_$compile_, _$rootScope_, _$rootRouter_, _$templateCache_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$router = _$router_;
$rootRouter = _$rootRouter_;
$templateCache = _$templateCache_;
});
@@ -72,7 +72,7 @@ function provideHelpers(fn, preInject) {
fn({
registerComponent: registerComponent,
$router: $router,
$rootRouter: $rootRouter,
put: put,
compile: compile
})