AngularJS TemplateCache

Question

I am trying to generate templatecache using gulp-angular-templatecache and combine it with Angular script into one JS file.

gulp task:

gulp.task('generatetemplatecache', function () {
    return gulp.src(['dev/app/**/*.tpl.html'])
    .pipe(minifyHTML({quotes: true}))
    .pipe(templateCache({ module:'templateCache', standalone:true }))
    .pipe(gulp.dest('public/app'));
});

This is basically how output looks like:

var app = angular.module("app",['templateCache']);
angular.module("templateCache", []).run(["$templateCache", function($templateCache) {$templateCache.put("test.tpl.html","<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>My Title</title></head><body></body></html>");
$templateCache.put("layout/popover.tpl.html","<h3 class=\"popover-title\">Click</h3><div class=\"popover-content\"><table style=\"width:600px\" class=\"table\"><tr ng-repeat=\"customer in customers\"><td>{{customer.name}}</td><td>{{customer.street}}</td></tr></table>ss</div>");

But the problem is, I found that it does not load from templatecache. Everytime when angular need the template, it still grab the original template html file. If that html file is not available, then it will have trouble displaying it.

Why is it doesn't work? Any part I am doing wrong? The url in the template cache is relative to the index.html or to the root of domain?

What do you mean when you say its grabbing the original file? Meaning that you change the HTML file and you still see old changes in the browser? — sma
– sma, Commented Feb 22, 2015 at 6:59
@sma I mean it still need the original file to be in place. If I take away the template html file, it will have trouble loading it. — user1995781
– user1995781, Commented Feb 22, 2015 at 7:02
Can you post the gulp task you use to create the template file? — sma
– sma, Commented Feb 22, 2015 at 7:17
@sma I have posted my gulp task for generate the template cache. — user1995781
– user1995781, Commented Feb 22, 2015 at 7:24
So this should be creating a new file called templates.js, correct? I'm assuming you are loading this file somehow and then adding it as a dependency to your main module? — sma
– sma, Commented Feb 22, 2015 at 7:32

sma · Accepted Answer · 2015-02-22 07:43:25Z

One thing to check is to make sure the pathing is correct when you create your template file.

For example, in my application, all of my source code is organized this way:

modules
   |---user
      |---user-controller.js
      |---user-service.js
      |---user.html

   |---navigation
      |---navigation-controller.js
      |---header.html
      |---footer.html

So, in my router or in any directives for templateUrl properties, I reference my HTML files like:

modules/user/user.html

So, that being said, in my Gulpfile when I create my templateCache file, I specify a root of 'modules' so that each of the files are given a key in the templateCache equal to this path. Such as:

gulp.task('templates', function () {
    gulp.src('./app/modules/**/*.html')
        .pipe(angularTemplatecache('templates.js', {
            standalone: true,
            root: "modules"
        }))
        .pipe(gulp.dest('./app/templates'));
});

This pathing issue may be why you're having trouble loading them if all other config issues are correct (i.e. you are loading the templates.js file correctly, you are including it as a module dependency on your app)

ankur kushwaha · Accepted Answer · 2016-07-16 09:41:40Z

You can also use another gulp plugin which can read your routes,directives and replace the templateUrl with the template referenced in the templateUrl.

src
+-hello-world
  |-hello-world-directive.js
  +-hello-world-template.html

hello-world-directive.js:

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        // relative path to template
        templateUrl: 'hello-world-template.html'
    };
});

hello-world-template.html:

<strong>
    Hello world!
</strong>

gulpfile.js:

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('js:build', function () {
    gulp.src('src/scripts/**/*.js')
        .pipe(embedTemplates())
        .pipe(gulp.dest('./dist'));
});

gulp-angular-embed-templates will generate the following file:

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        template:'<strong>Hello world!</strong>'
    };
});

Collectives™ on Stack Overflow

AngularJS TemplateCache

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related