Ben Taliadoros Ben Taliadoros - 4 months ago 259
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 () {
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

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

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

Hope this helps.

Comments