CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-includemeanjs
Finglish
Finglish

Reputation: 9956

How to dynamically include all template partials when using a module in AngularJS

I have several modules that require some template partials to be loaded whenever the module is used. I am storing these files in a folder called partials inside each module subfolder. My starting point for my app is meanjs, and I am storing partials file are in public/modules//partials/*.html.

I have seen several ng-include and directive examples, but being new to AngularJS each sample I read confuses me further as to what is best practice / most AngularJS appropriate way to do this.

Upvotes: 0

Views: 2865

Answers (2)

boyomarinov
boyomarinov

Reputation: 615

You should take advantage of $templateCache. In your partials folder define the templates like this:

angular.module('yourTemplateModule', []).run('$templateCache', function ($templateCache) {
   $templateCache.put('yourTemplate', '<div>...some HTML here...</div>');
}

Then create a module, named for example 'app.tpls', which has as dependencies all your template modules. Inject it as dependency to your main app module, probably located in meanjs and now you have your templates ready whenever you need them in your application. You retrieve them by calling:

$templateCache.get('yourTemplate');

Upvotes: 1

qwetty
qwetty

Reputation: 1268

Store your partials whenever you wants. To load them all use angular template cache.

Use Grunt or gulp to generate automatically. Personally I use gulp.

Here is my working example of one of my project.

install nodejs and 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 it like this:

gulp generate - to regenerate partials

gulp watch-partials - watch file changes, if partials are changed it automatically run generate task for you. :)

One more thing, dont forget to include template.js in your html file

<script src="public/js/template.js"></script>

Every time you change your partial dont forget to regenerate your template cache.

Upvotes: 4

Related Questions