Question

我有几个模块需要在使用模块时加载一些模板部分。我将这些文件存储在每个模块子文件夹中名为partials的文件夹中。我的应用程序的起点是 meanjs ，我存储的部分文件位于public / modules // partials / * .html。

我已经看过几个ng-include和指令示例，但作为AngularJS的新手，我读过的每个示例都让我更加困惑的是什么是最佳实践/最适合AngularJS的方法。

Answer 1

随时存储您的部分内容。要加载它们，请使用有角度的template cache。

使用Grunt或gulp自动生成。我个人用gulp。

这是我的一个项目的工作示例。

安装nodejs和npm

npm intall gulp -g

npm install gulp-angular-templatecache

创建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']);
});

然后像这样使用它：

gulp generate - 重新生成部分

gulp watch-partials - 监视文件更改，如果部分更改，则会自动为您运行generate任务。 :)

还有一件事，别忘了在你的html文件中包含template.js

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

每次更改部分内容时都不要忘记重新生成模板缓存。

Answer 2

你应该利用$templateCache。在partials文件夹中定义如下模板：

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

然后创建一个名为例如＆＃39; app.tpls＆＃39;的模块，该模块具有所有模板模块的依赖关系。将其作为依赖项注入您的主应用程序模块，可能位于 meanjs 中，现在您可以在应用程序中随时准备好模板。您可以通过调用：

来检索它们

$templateCache.get('yourTemplate');

如何在AngularJS中使用模块时动态包含所有模板部分

2 个答案: