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:
Peter Bacon Darwin
2016-02-17 07:47:49 +00:00
committed by Pete Bacon Darwin
parent edad8e3f56
commit a1c3be21ec
11 changed files with 141 additions and 143 deletions

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) {

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]);
/*

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();
}
});