Compile all angular templates to one js file

Question

I am trying to compile all angulara templates into a single js file. Something like what ember does with ember-cli.

So I successfully managed to minify and concat all the javascript files. I have just 2 files now vendor.js and application.js and whole lot of template files which I want to cram into templates.js.

How do I go about it? If some one could give step by step explanation, please. Any links would be appreciated too. Surprisingly there is no information about this anywhere.

I am using mimosa as build tool, it seemed to me the easiest. Here is my mimosa config:

exports.config = {
  modules: [
  "copy",
  "stylus",
  "minify-css",
  "minify-js",
  "combine",
  "htmlclean",
  "html-templates"
  ],
  watch: {
    sourceDir: "app",
    compiledDir: "public",
    javascriptDir: "js",
    exclude: [/[/\\](\.|~)[^/\\]+$/]
  },
  vendor: {
    javascripts: "vendor/js"
  },
  stylus: {
    sourceMap: false
  },
  combine: {
    folders: [
    {
      folder:"vendor/js",
      output:"vendor.js",
      order: [
      "angular.js"
      ]
    },
    {
      folder:"js",
      output:"main.js",
      order: [
      "application/main.js"
      ]
    }
    ]
  },
  htmlclean: {
    extensions:["html"]
  },
  htmlTemplates: {
    extensions: ["tpl"]
  },
  template: {
    outputFileName: "templates"
  }
}

It does generate templates.js file without any errors. But when I link it, angular spits a bunch of errors.

Once compiled, how do I actually call those templates from ng-include and from the route provider? I assume that it is the same as I would call a script template using the id which in my case is derived from template original file name, right? Maybe I am missing some important steps.

The build tool is not important here although desirable. If some one could show how to do it manually without a build tool I would figure out the rest.

Thanks.

Mark Hughes · Accepted Answer · 2015-06-09T08:54:53.163

5

I'm using Gulp as my build tool, and in that, there's a plugin gulp-angular-templatecache which pre-compiles and registers all templates for your module in the angular $templateCache - no changes are required to any of the calling code to use these. EDIT: The Angular documentation for $templateCache explains how the templateCache works.

It might be worth reading through the documentation for gulp-angular-templatecache to see how that pre-populates the $templateCache to see if you can crib something that would work with your build process.

Here's my gulp task that does the job:

var templateCache = require('gulp-angular-templatecache');

gulp.task('buildjstemplates', function () {
  return gulp.src(['public/javascripts/app/**/*.html'])
  .pipe(templateCache({module: 'app'}))
  .pipe(gulp.dest('public/javascripts/app/'));
});

edited Jun 09 '15 at 08:54

answered Jun 08 '15 at 16:43

Mark Hughes

7,264
1
33
37

Thank you. I will go through the docs. I might get something out of it. I know you said no changes are required. But I don't get this. If you compile all the templates into one file, you cannot use template URL to call it as usual. So how do you call them from the route provider and ng-include?? – r.sendecky Jun 09 '15 at 00:51
Angular knows about the $templateCache and uses it internally when rendering so it only has to load the actual URL of the HTML once - all this plugin does is produce a .js file which pre-populates that $templateCache with your templates so hooks in to Angular's existing structure and ensures Angular always hits the cache and never needs to load the template "manually". – Mark Hughes Jun 09 '15 at 08:52
I've just added a [link to the Angular templateCache docs](https://docs.angularjs.org/api/ng/service/$templateCache) to this answer, which might help explain @r.sendecky – Mark Hughes Jun 09 '15 at 08:55

Compile all angular templates to one js file

1 Answers1