CODEWITHSUNDEEP
javascriptangularjsgulp
user1995781
user1995781

Reputation: 19453

AngularJS TemplateCache

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?

Upvotes: 1

Views: 1427

Answers (2)

ankur kushwaha
ankur kushwaha

Reputation: 478

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

Upvotes: 0

sma
sma

Reputation: 9597

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)

Upvotes: 2

Related Questions