どのように私は私のAngularJSアプリケーションでディレクトリ構造を以下しているAngularJSプロジェクト

Question

でがぶ飲みしてHTMLテンプレートをコンパイルする必要があります。

|-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フォルダがdevelompmentのためである、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

これを行う最も良い方法は、私の意見では、角度のtemplate cacheを使用することです。この出力を生成するのに役立つgulp-angular-templatecacheというgulpプラグインがあります。

はたとえば、あなたblog/templates/blog-post.htmlの内容は言う：

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

あなたはこのような一気タスクを持つことができます。このコンテンツにファイルdist/js/templates.jsを作成します

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

：

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リンクの問題を解決し、クライアントのブラウザが要求するリクエスト数を減らします。そのステップをさらに進めてとdist/js/all.jsを組み合わせると、1つのJavaScriptファイルしか作成できません。