user786 user786 - 6 months ago 27
AngularJS Question

minifying js file containing routing

I am minifying an angular project through gulp.This project contains index.html,css,libraries,app.js(Angular module containing routing layer+controllers) and views.

I could easily minify+concat all js files,libraries and css files into one bundle file.HTML files were also easily minified but the problem is i have routing in my app.js which render templateUrl like

.state('dashboard.home', {
url: '/home',
templateUrl: 'app/views/dashboard/home.html'
})


Now,beacause of this routing i cannot minify+concat all html files into one.because each route renders one view with its file name while there will be only one file named bundle.html.

Here,I need a guideline about how to handle this situation.

Thanks Regards

Answer

I use the gulp-ng-template for this:

gulpfile.js:

var ngTemplate = require('gulp-ng-template');

....

gulp.task('templates', function () {
  return gulp.src(['view1.html', 'view2.html'])
  .pipe(ngTemplate({filePath: 'js/tpl.js'}))
  .pipe(gulp.dest('test'));
});

ngTemplate combines your views and puts them into the single file js/tpl.js that will look like this:

 angular.module('ngTemplates').run(['$templateCache', function($templateCache) {
   $templateCache.put('view1.html', '<div class="test">A</div>\n');
   $templateCache.put('view2.html', '<div class="test">\n <span>B</span>\n</div>\n');
 }]);

Now all you need is to include this file into your index.html. Your views will be available to the angular compiler at their original paths. You don't need to include your original html views into project any more.

You can add this file js/tpl.js to your index.html manually or by using ng-html-replace.