fix(angular1_router): rename $route
service to $rootRouter
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:

committed by
Pete Bacon Darwin

parent
edad8e3f56
commit
a1c3be21ec
@ -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) {
|
||||
|
||||
|
@ -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]);
|
||||
|
||||
/*
|
||||
|
14
modules/angular1_router/src/ng_route_shim.js
vendored
14
modules/angular1_router/src/ng_route_shim.js
vendored
@ -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();
|
||||
}
|
||||
});
|
||||
|
Reference in New Issue
Block a user