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

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

然后创建一个模块，例如命名为“app.tpls”，它具有所有模板模块的依赖项。将它作为依赖注入到您的主应用程序模块中，可能位于 meanjs 中，现在您可以在应用程序中随时准备好模板。您可以通过调用来检索它们：

$templateCache.get('yourTemplate');