Ben Taliadoros Ben Taliadoros - 3 months ago 122x
AngularJS Question

Angular Template cache not working

I have a project using gulp and angular. I want to click a button and a pop up containing the html to show.

In the build.js file i have the following code:

gulp.task('templates', function() {
gulp.src(['!./apps/' + app + '/index.html', './apps/' + app + '/**/*.html'])
.pipe(plugins.angularTemplatecache('templates.js', {
standalone: true,
module: 'templates'
.pipe(gulp.dest(buildDir + '/js'));

in my app.js file i have:

.controller('PopupCtrl', function($scope, ngDialog) {
$scope.clickToOpen = function () {{
template: 'templates/popup.html'

I get an error on clicking the button:

GET http://mylocalhost:3000/templates/popup.html 404 (Not Found)

My templates.js file contains:

angular.module("templates", []).run(["$templateCache", function($templateCache) {
$templateCache.put("templates/popup.html", "my html") ...etc

Why does the template cache not recognise the call to templates/popup.html and show what is in the cache rather than looking at the 404'd URL?

Just to say what I have tried, I manually copied the template file into the directory it was looking and it found it. This is not the solution though as I want it taken from cache.



You have to also specify the templates module as a dependency of your module. For example:

angular.module('myApp', ['templates', 'ngDialog'])

Hope this helps.