Processing html partials using gulp in Angular project

Question

-client/
     index.html
     node_modules/
       ..
       ..
     js/
       -controllers/   
       -directives/
       -services/
         app.js
     partials/
         someHTML.html
         anotherHTML.html
     build/
        -app.js
        -custom.css
        ...

-server
   server.js

All my partial html templates which are used by Angular directives, controllers etc reside in the build folder. I use gulp to build the project, which does all the usual tasks like clean the destination folder, compile stylus and place it in build folder, move bootstrap.css to build folder, browserify the .js files and mvoe to build folder. So far so good.. but how does one deal with the html templates that in the partials folder ?

Are these simply to be copied over to build folder ?

As per @JimL suggestion .. i am using browserify currently where my main app.js looks like this

/*jshint globalstrict: true*/
'use strict';

require('es5-shim');
require('es5-sham');
require('jquery');
require('angular');

var app = angular.module('app', [require('angular-ui-router')]);

require('./controllers');
require('./directives');
require('./services');

Now, how does template cache fit in the above equation ? the template.js file is created and placed in the build folder.. this is not available to browserify yet.

I suggest you use template cache to concat all html files into a single js file. Easier to load (could even be included in your app.min.js file), and good for users that get only 1 template request instead of one for each partial :) — JimL
right now my directives/controllers use a path such as '../partials/someTemplate.html' .. how will this change once I include template cache? — runtimeZero
apart from the "folder up" it wont change :) you reference the cached files the same way — JimL
@JimL I have edited my question above. I was able to include template cache and compile and get template.js.. not sure how to include that in the project. — runtimeZero
In the gulp task pass the option standalone:true to templateCache. Include the template js file before your app then inject the template module (like ui-router) — JimL

postrational postrational · Accepted Answer · 2014-12-21T22:38:47

You should try using a tool such as Gulp Angular Templatecache, which will bundle templates directly in your application using the $templateCache service.

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

gulp.task('html', function () {
    gulp.src('templates/**/*.html')
        .pipe(templateCache())
        .pipe(gulp.dest('public'));
});

https://www.npmjs.com/package/gulp-angular-templatecache

Processing html partials using gulp in Angular project

1 Answers