fix(ngRoute): allow ngView to be included in an asynchronously load…

…ed template

During it's linking phase, `ngView` relies on the info provided in `$route.current` for
instantiating the initial view. `$route.current` is set in the callback of a listener to
`$locationChangeSuccess`, which is registered during the instantiation of the `$route` service.

Thus, it is crucial that the `$route` service is instantiated before the initial
`$locationChangeSuccess` is fired. Since `ngView` declares `$route` as a dependency, the service is
instantiated in time if `ngView` is present during the initial load of the page.

Yet, in cases where `ngView` is included in a template that is loaded asynchronously (e.g. in
another directive's template), the directive factory might not be called soon enough for `$route`
to be instantiated before the initial `$locationChangeSuccess` event is fired.

This commit fixes it, by always instantiating `$route` up front, during the initialization phase.

Fixes #1213
Fixes #6812

Closes #14088

src/ngRoute/route.js

@@ -17,7 +17,11 @@
  */
  /* global -ngRouteModule */
 var ngRouteModule = angular.module('ngRoute', ['ng']).
-                        provider('$route', $RouteProvider),
+                        provider('$route', $RouteProvider).
+                        // Ensure `$route` will be instantiated in time to capture the initial
+                        // `$locationChangeSuccess` event. This is necessary in case `ngView` is
+                        // included in an asynchronously loaded template.
+                        run(['$route', angular.noop]),
     $routeMinErr = angular.$$minErr('ngRoute');
 
 /**

test/ngRoute/directive/ngViewSpec.js

@@ -1027,3 +1027,34 @@ describe('ngView animations', function() {
     ));
   });
 });
+
+describe('ngView in async template', function() {
+  beforeEach(module('ngRoute'));
+  beforeEach(module(function($compileProvider, $provide, $routeProvider) {
+    $compileProvider.directive('asyncView', function() {
+      return {templateUrl: 'async-view.html'};
+    });
+
+    $provide.decorator('$templateRequest', function($timeout) {
+      return function() {
+        return $timeout(angular.identity, 500, false, '<ng-view></ng-view>');
+      };
+    });
+
+    $routeProvider.when('/', {template: 'Hello, world !'});
+  }));
+
+
+  it('should work correctly upon initial page load',
+    // Injecting `$location` here is necessary, so that it gets instantiated early
+    inject(function($compile, $location, $rootScope, $timeout) {
+      var elem = $compile('<async-view></async-view>')($rootScope);
+      $rootScope.$digest();
+      $timeout.flush(500);
+
+      expect(elem.text()).toBe('Hello, world !');
+
+      dealoc(elem);
+    })
+  );
+});

test/ngRoute/routeSpec.js

@@ -23,6 +23,21 @@ describe('$route', function() {
     dealoc(element);
   });
 
+  it('should be loaded upon initial load (even if `ngView` is loaded async)', function() {
+    module(function($routeProvider) {
+      $routeProvider.when('/', {template: 'Hello, world !'});
+    });
+
+    inject(function($location, $rootScope) {
+      $location.path('/');
+      $rootScope.$digest();
+    });
+
+    inject(function($route) {
+      expect($route.current).toBeDefined();
+    });
+  });
+
   it('should allow cancellation via $locationChangeStart via $routeChangeStart', function() {
     module(function($routeProvider) {
       $routeProvider.when('/Edit', {