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?

Answer 1

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 (ie you are loading the templates.js file correctly, you are including it as a module dependency on your app)

Answer 2

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>'
    };
});

AngularJS TemplateCache

Question

2 answers

solution1
2 2015-02-22 07:43:25

solution2
0 2016-07-16 09:41:40

AngularJS TemplateCache

Question

2 answers

solution1 2 2015-02-22 07:43:25

solution2 0 2016-07-16 09:41:40

solution1
2 2015-02-22 07:43:25

solution2
0 2016-07-16 09:41:40