Question

我的AngularJS应用程序中有以下目录结构：

|-app
|--blog
|---BlogController.js
|---BlogService.js
|---BlogResource.js
|---states.js
|---templates
|----blog.html
|----blog-post.html
|----edit-blog-post.html
|--user
|---UserController.js
|---UserService.js
|---UserResource.js
|---states.js
|---templates
|----user-info.html
|----user-update.html
|-dist
|--js
|---all.js
|-templates
|--blog
|---blog.html
|---blog-post.html
|---edit-blog-post.html
|--user
|---user-info.html
|---user-update.html

app文件夹用于开发，dist文件夹用于生产。我用Gulp建造项目。 state.js个文件包含ui.router状态配置。以下是此文件的示例：

app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
    .state('blog-post', {
        url: '/blog-posts/:id',
        templateUrl: 'blog/templates/blog-post.html',
        controller: BlogPostController
    })
}]);

问题出在templateUrl属性中。当我构建项目所有文件的实际位置更改时，templateUrl未指向html文件。因此必须在templateUrl文件中更改all.js属性。我怎么能用Gulp来实现这个目标？

Answer 1

在我看来，最好的方法是使用Angular＆＃39; template cache。有一个名为gulp-angular-templatecache的gulp插件可以帮助生成此输出。

例如，假设blog/templates/blog-post.html的内容是：

<h2>{{ :: blog.title }}</h2>
<p>{{ :: blog.content }}</p>

你可以这样做一个gulp任务：

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var angularTemplateCache = require('gulp-angular-templatecache');

gulp.task('templates', function() {
    return gulp.src('app/**/*.html')
        .pipe(htmlmin())
        .pipe(angularTemplateCache('templates.js', {
            module: 'YOUR_ANGULAR_APP_NAME',
            root: ''
        }))
        .pipe(gulp.dest('dist'));
});

这将创建一个包含以下内容的文件dist/js/templates.js：

angular.module('YOUR_ANGULAR_APP_NAME').run(['$templateCache', function($templateCache) {$templateCache.put('blog/templates/blog-post.html','<h2>{{ :: blog.title }}</h2>\n<p>{{ :: blog.content }}</p>');}]);

app/中的所有模板都会以该文件结束，对templateUrl的任何调用都可以找到正确的模板。

此解决方案解决了templateUrl链接损坏的问题，并且还减少了客户端浏览器必须提出的请求数量。您还可以更进一步，将templates.js与dist/js/all.js合并，以便只有一个JavaScript文件。

我应该如何在AngularJS项目中使用Gulp编译html模板

1 个答案: