How to dynamically include all template partials when using a module in AngularJS -
i have several modules require template partials loaded whenever module used. storing these files in folder called partials inside each module subfolder. starting point app meanjs, , storing partials file in public/modules//partials/*.html.
i have seen several ng-include , directive examples, being new angularjs each sample read confuses me further best practice / angularjs appropriate way this.
store partials whenever wants. load them use angular template cache.
use grunt or gulp generate automatically. use gulp.
here working example of 1 of project.
install nodejs , npm
npm intall gulp -g
npm install gulp-angular-templatecache
create gulpfile.js
var templatecache = require('gulp-angular-templatecache'), watch = require('gulp-watch'); gulp.task('generate', function () { gulp.src('public/*/partials/*.html') .pipe(templatecache('templates.js', {module: 'yourmodulename', standalone: false})) .pipe(gulp.dest('public/js')); }); gulp.task('watch-partials', function () { gulp.watch('public/*/partials/*.html', ['generate']); });
then use this:
gulp generate
- regenerate partials
gulp watch-partials
- watch file changes, if partials changed automatically run generate
task you. :)
one more thing, dont forget include template.js in html file
<script src="public/js/template.js"></script>
every time change partial dont forget regenerate template cache.
Comments
Post a Comment