angularjs - 在 Angular 项目中使用 gulp 处理 html 部分

Question

-client/
     index.html
     node_modules/
       ..
       ..
     js/
       -controllers/   
       -directives/
       -services/
         app.js
     partials/
         someHTML.html
         anotherHTML.html
     build/
        -app.js
        -custom.css
        ...

-server
   server.js

Angular 指令、 Controller 等使用的所有部分 html 模板都位于构建文件夹中。我使用 gulp 构建项目，它执行所有常见任务，如清理目标文件夹、编译手写笔并将其放入构建文件夹、将 bootstrap.css 移动到构建文件夹、浏览 .js 文件和 mvoe 到构建文件夹。到目前为止一切顺利..但是如何处理 partials 文件夹中的 html 模板？

这些只是简单地复制到构建文件夹吗？

根据@JimL 的建议 .. 我目前正在使用 browserify，我的主要 app.js 看起来像这样

/*jshint globalstrict: true*/
'use strict';

require('es5-shim');
require('es5-sham');
require('jquery');
require('angular');

var app = angular.module('app', [require('angular-ui-router')]);

require('./controllers');
require('./directives');
require('./services');

现在，模板缓存如何符合上述等式？ template.js 文件被创建并放置在 build 文件夹中。这还不能用于 browserify。

Answer 1

您应该尝试使用 Gulp Angular Templatecache 等工具，它会使用 $templateCache 服务将模板直接捆绑到您的应用程序中。

var templateCache = require('gulp-angular-templatecache');

gulp.task('html', function () {
    gulp.src('templates/**/*.html')
        .pipe(templateCache())
        .pipe(gulp.dest('public'));
});

https://www.npmjs.com/package/gulp-angular-templatecache