Angular Template cache not working

Question

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 () {       ngDialog.open({          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.

Thanks

Answer 1

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

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

Hope this helps.