Currently, I am utilizing gulp (html2js)
to compile all of my html into Angular's $templateCache
and then using browserify
to include the desired files.
However, being new to angular
, it seems odd to me that even when I utilize $templateCache
, Angular still attempts to make an ajax call for the templates.
//views.min.js - This appears to be exported correctly
!function(e){try{e=angular.module("Views")}catch(t){e=angular.module("Views",[])}e.run(["$templateCache",function(e){e.put("sliderHome.html",'<div class="slider royalSlider rsDefault"><div ng-repeat="item in sliderItems"><h1>{{item.title}}</h1><p>{{item.text}}</p><img ng-src="/img/news/{{item.number}}.jpg"></div></div>')}])}(),function(e){try{e=angular.module("Views")}catch(t){e=angular.module("Views",[])}e.run(["$templateCache",function(e){e.put("results/resultsGrid.html","<div>Results List as is the best</div>")}])}();
The file above is included using browserify
and is visible at the bottom of the file where expected.
app.js - Angular
app.directive('sliderDirect', function($timeout, $templateCache) {
return {
restrict: 'E',
templateUrl: $templateCache.get('sliderHome.html')
....
}
});
Error Report
GET http://localhost:3001/%3Cdiv%20class=%22slider%20royalSlider%20rsDefault%22…0ng-src=%22/img/news/%7B%7Bitem.number%7D%7D.jpg%22%3E%3C/div%3E%3C/div%3E 404 (Not Found)
Therefore, I am puzzled as to why I can't effectively use $templateCache
without triggering an unnecessary ajax call.