refactor(ng:view, ng:include): pass cache instance into $http

Instead of doing all the stuff in these widgets (checking cache, etc..) we can rely on $http now...

src/widgets.js

@@ -112,18 +112,6 @@ angularWidget('ng:include', function(element){
             useScope = scope.$eval(scopeExp),
             fromCache;
 
-        function updateContent(content) {
-          element.html(content);
-          if (useScope) {
-            childScope = useScope;
-          } else {
-            releaseScopes.push(childScope = scope.$new());
-          }
-          compiler.compile(element)(childScope);
-          $autoScroll();
-          scope.$eval(onloadExp);
-        }
-
         function clearContent() {
           childScope = null;
           element.html('');
@@ -133,16 +121,17 @@ angularWidget('ng:include', function(element){
           releaseScopes.pop().$destroy();
         }
         if (src) {
-          if ((fromCache = $templateCache.get(src))) {
+          $http.get(src, {cache: $templateCache}).on('success', function(response) {
-            scope.$evalAsync(function() {
+            element.html(response);
-              updateContent(fromCache);
+            if (useScope) {
-            });
+              childScope = useScope;
-          } else {
+            } else {
-            $http.get(src).on('success', function(response) {
+              releaseScopes.push(childScope = scope.$new());
-              updateContent(response);
+            }
-              $templateCache.put(src, response);
+            compiler.compile(element)(childScope);
-            }).on('error', clearContent);
+            $autoScroll();
-          }
+            scope.$eval(onloadExp);
+          }).on('error', clearContent);
         } else {
           clearContent();
         }
@@ -586,30 +575,20 @@ angularWidget('ng:view', function(element) {
         var template = $route.current && $route.current.template,
             fromCache;
 
-        function updateContent(content) {
-          element.html(content);
-          compiler.compile(element)($route.current.scope);
-        }
-
         function clearContent() {
           element.html('');
         }
 
         if (template) {
-          if ((fromCache = $templateCache.get(template))) {
+          // xhr's callback must be async, see commit history for more info
-            scope.$evalAsync(function() {
+          $http.get(template, {cache: $templateCache}).on('success', function(response) {
-              updateContent(fromCache);
+            // ignore callback if another route change occured since
-            });
+            if (newChangeCounter == changeCounter) {
-          } else {
+              element.html(response);
-            // xhr's callback must be async, see commit history for more info
+              compiler.compile(element)($route.current.scope);
-            $http.get(template).on('success', function(response) {
-              // ignore callback if another route change occured since
-              if (newChangeCounter == changeCounter)
-                updateContent(response);
-              $templateCache.put(template, response);
               $autoScroll();
-            }).on('error', clearContent);
+            }
-          }
+          }).on('error', clearContent);
         } else {
           clearContent();
         }

test/widgetsSpec.js

@@ -56,27 +56,37 @@ describe("widget", function() {
 
 
   describe('ng:include', inject(function($rootScope, $compile) {
-    it('should include on external file', inject(function($rootScope, $compile, $cacheFactory) {
+
+    function putIntoCache(url, content) {
+      return function($templateCache) {
+        $templateCache.put(url, [200, content, {}]);
+      };
+    }
+
+
+    it('should include on external file', inject(putIntoCache('myUrl', '{{name}}'),
+        function($rootScope, $compile, $browser) {
       var element = jqLite('<ng:include src="url" scope="childScope"></ng:include>');
       var element = $compile(element)($rootScope);
       $rootScope.childScope = $rootScope.$new();
       $rootScope.childScope.name = 'misko';
       $rootScope.url = 'myUrl';
-      $cacheFactory.get('templates').put('myUrl', '{{name}}');
       $rootScope.$digest();
+      $browser.defer.flush();
       expect(element.text()).toEqual('misko');
     }));
 
-    
+
-    it('should remove previously included text if a falsy value is bound to src',
+    it('should remove previously included text if a falsy value is bound to src', inject(
-        inject(function($rootScope, $compile, $cacheFactory) {
+          putIntoCache('myUrl', '{{name}}'),
+          function($rootScope, $compile, $browser) {
       var element = jqLite('<ng:include src="url" scope="childScope"></ng:include>');
       var element = $compile(element)($rootScope);
       $rootScope.childScope = $rootScope.$new();
       $rootScope.childScope.name = 'igor';
       $rootScope.url = 'myUrl';
-      $cacheFactory.get('templates').put('myUrl', '{{name}}');
       $rootScope.$digest();
+      $browser.defer.flush();
 
       expect(element.text()).toEqual('igor');
 
@@ -86,13 +96,15 @@ describe("widget", function() {
       expect(element.text()).toEqual('');
     }));
 
-    
+
-    it('should allow this for scope', inject(function($rootScope, $compile, $cacheFactory) {
+    it('should allow this for scope', inject(putIntoCache('myUrl', '{{"abc"}}'),
+          function($rootScope, $compile, $browser) {
       var element = jqLite('<ng:include src="url" scope="this"></ng:include>');
       var element = $compile(element)($rootScope);
       $rootScope.url = 'myUrl';
-      $cacheFactory.get('templates').put('myUrl', '{{"abc"}}');
       $rootScope.$digest();
+      $browser.defer.flush();
+
       // TODO(misko): because we are using scope==this, the eval gets registered
       // during the flush phase and hence does not get called.
       // I don't think passing 'this' makes sense. Does having scope on ng:include makes sense?
@@ -102,31 +114,34 @@ describe("widget", function() {
       expect(element.text()).toEqual('abc');
     }));
 
-    
+
-    it('should evaluate onload expression when a partial is loaded',
+    it('should evaluate onload expression when a partial is loaded', inject(
-        inject(function($rootScope, $compile, $cacheFactory) {
+        putIntoCache('myUrl', 'my partial'),
+        function($rootScope, $compile, $browser) {
       var element = jqLite('<ng:include src="url" onload="loaded = true"></ng:include>');
       var element = $compile(element)($rootScope);
 
       expect($rootScope.loaded).not.toBeDefined();
 
       $rootScope.url = 'myUrl';
-      $cacheFactory.get('templates').put('myUrl', 'my partial');
       $rootScope.$digest();
+      $browser.defer.flush();
+
       expect(element.text()).toEqual('my partial');
       expect($rootScope.loaded).toBe(true);
     }));
 
-    
+
-    it('should destroy old scope', inject(function($rootScope, $compile, $cacheFactory) {
+    it('should destroy old scope', inject(putIntoCache('myUrl', 'my partial'),
+          function($rootScope, $compile, $browser) {
       var element = jqLite('<ng:include src="url"></ng:include>');
       var element = $compile(element)($rootScope);
 
       expect($rootScope.$$childHead).toBeFalsy();
 
       $rootScope.url = 'myUrl';
-      $cacheFactory.get('templates').put('myUrl', 'my partial');
       $rootScope.$digest();
+      $browser.defer.flush();
       expect($rootScope.$$childHead).toBeTruthy();
 
       $rootScope.url = null;
@@ -134,7 +149,8 @@ describe("widget", function() {
       expect($rootScope.$$childHead).toBeFalsy();
     }));
 
-    it('should do xhr request and cache it', inject(function($rootScope, $httpBackend, $compile) {
+    it('should do xhr request and cache it',
+        inject(function($rootScope, $httpBackend, $compile, $browser) {
       var element = $compile('<ng:include src="url"></ng:include>')($rootScope);
       $httpBackend.expect('GET', 'myUrl').respond('my partial');
 
@@ -149,6 +165,7 @@ describe("widget", function() {
 
       $rootScope.url = 'myUrl';
       $rootScope.$digest();
+      $browser.defer.flush();
       expect(element.text()).toEqual('my partial');
       dealoc($rootScope);
     }));
@@ -165,11 +182,12 @@ describe("widget", function() {
       expect(element.text()).toBe('');
     }));
 
-    it('should be async even if served from cache', inject(function($rootScope, $compile, $cacheFactory) {
+    it('should be async even if served from cache', inject(
+          putIntoCache('myUrl', 'my partial'),
+          function($rootScope, $compile, $browser) {
       var element = $compile('<ng:include src="url"></ng:include>')($rootScope);
 
       $rootScope.url = 'myUrl';
-      $cacheFactory.get('templates').put('myUrl', 'my partial');
 
       var called = 0;
       // we want to assert only during first watch
@@ -178,6 +196,7 @@ describe("widget", function() {
       });
 
       $rootScope.$digest();
+      $browser.defer.flush();
       expect(element.text()).toBe('my partial');
     }));
   }));
@@ -574,7 +593,8 @@ describe("widget", function() {
     }));
 
     it('should initialize view template after the view controller was initialized even when ' +
-       'templates were cached', inject(function($rootScope, $compile, $location, $httpBackend, $route) {
+       'templates were cached',
+       inject(function($rootScope, $compile, $location, $httpBackend, $route, $browser) {
       //this is a test for a regression that was introduced by making the ng:view cache sync
 
       $route.when('/foo', {controller: ParentCtrl, template: 'viewPartial.html'});
@@ -605,6 +625,7 @@ describe("widget", function() {
       $rootScope.log = [];
       $location.path('/foo');
       $rootScope.$apply();
+      $browser.defer.flush();
 
       expect($rootScope.log).toEqual(['parent', 'init', 'child']);
     }));
@@ -644,9 +665,9 @@ describe("widget", function() {
     }));
 
     it('should be async even if served from cache',
-        inject(function($route, $rootScope, $location, $cacheFactory) {
+        inject(function($route, $rootScope, $location, $templateCache, $browser) {
+      $templateCache.put('myUrl1', [200, 'my partial', {}]);
       $route.when('/foo', {controller: noop, template: 'myUrl1'});
-      $cacheFactory.get('templates').put('myUrl1', 'my partial');
       $location.path('/foo');
 
       var called = 0;
@@ -656,6 +677,7 @@ describe("widget", function() {
       });
 
       $rootScope.$digest();
+      $browser.defer.flush();
       expect(element.text()).toBe('my partial');
     }));
   });