fix(): allow to be included in an asynchronously loaded template

Author: petebacondarwin

src/ngRoute/route.js

@@ -23,10 +23,40 @@ var isObject;
  * <div doc-module-components="ngRoute"></div>
  */
  /* global -ngRouteModule */
-var ngRouteModule = angular.module('ngRoute', ['ng']).
-                        provider('$route', $RouteProvider),
+var ngRouteModule = angular.module('ngRoute', ['ng'])
+                        .provider('$route', $RouteProvider)
+                        .factory('$$trackLocationChanges', ['$rootScope', $$trackLocationChanges])
+                        .run(['$$trackLocationChanges', function($$trackLocationChanges) {
+                          $$trackLocationChanges.start();
+                        }]),
+
     $routeMinErr = angular.$$minErr('ngRoute');
 
+function $$trackLocationChanges($rootScope) {
+  var removeStartHandler, removeSuccessHandler;
+  var service = {
+    start: function() {
+      removeStartHandler = $rootScope.$on('$locationChangeStart', storeStartEvent);
+      removeSuccessHandler = $rootScope.$on('$locationChangeSuccess', storeSuccessEvent);
+    },
+    stop: function() {
+      removeStartHandler();
+      removeSuccessHandler();
+    }
+  };
+
+  return service;
+
+  function storeStartEvent(e) {
+    service.startEvent = e;
+    delete service.successEvent;
+  }
+
+  function storeSuccessEvent(e) {
+    service.successEvent = e;
+  }
+}
+
 /**
  * @ngdoc provider
  * @name $routeProvider
@@ -295,7 +325,9 @@ function $RouteProvider() {
                '$injector',
                '$templateRequest',
                '$sce',
-      function($rootScope, $location, $routeParams, $q, $injector, $templateRequest, $sce) {
+               '$$trackLocationChanges',
+      function($rootScope, $location, $routeParams, $q, $injector, $templateRequest, $sce, $$trackLocationChanges) {
+
 
     /**
      * @ngdoc service
@@ -555,6 +587,12 @@ function $RouteProvider() {
           }
         };
 
+    if ($$trackLocationChanges.successEvent) {
+      prepareRoute($$trackLocationChanges.startEvent);
+      commitRoute($$trackLocationChanges.successEvent);
+    }
+    $$trackLocationChanges.stop();
+
     $rootScope.$on('$locationChangeStart', prepareRoute);
     $rootScope.$on('$locationChangeSuccess', commitRoute);
 
@@ -612,6 +650,7 @@ function $RouteProvider() {
     }
 
     function commitRoute() {
+      $route.initialized = true;
       var lastRoute = $route.current;
       var nextRoute = preparedRoute;
 

test/ngRoute/directive/ngViewSpec.js

@@ -695,6 +695,37 @@ describe('ngView', 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);
+      })
+    );
+  });
+
   describe('animations', function() {
     var body, element, $rootElement;