web-dev-qa-db-ja.com

Angularテンプレートキャッシュが機能しない

Gulpとangularを使用するプロジェクトがあります。表示するHTMLを含むボタンとポップアップをクリックしたいのですが。

Build.jsファイルには、次のコードがあります。

gulp.task('templates', function() {
  gulp.src(['!./apps/' + app + '/index.html', './apps/' + app + '/**/*.html'])
    .pipe(plugins.angularTemplatecache('templates.js', {
      standalone: true,
      module: 'templates'
    }))
    .pipe(gulp.dest(buildDir + '/js'));
});

私のapp.jsファイルに私が持っています：

.controller('PopupCtrl', function($scope, ngDialog) {
  $scope.clickToOpen = function () {
      ngDialog.open({ 
        template: 'templates/popup.html'
      });
  };
})

ボタンをクリックするとエラーが発生します。

GET http://mylocalhost:3000/templates/popup.html 404 (Not Found)

私のtemplates.jsファイルには以下が含まれます：

angular.module("templates", []).run(["$templateCache", function($templateCache) {
$templateCache.put("templates/popup.html", "my html") ...etc

テンプレートキャッシュが、templates/popup.htmlへの呼び出しを認識せず、404のURLを確認するのではなく、キャッシュの内容を表示しないのはなぜですか？

私が試したことを言うために、テンプレートファイルを探していたディレクトリに手動でコピーし、それを見つけました。キャッシュから取得したいので、これは解決策ではありません。

ありがとう

javascriptangularjscachinggulp
21
Ben Taliadoros

モジュールの依存関係としてtemplatesモジュールも指定する必要があります。例えば：

angular.module('myApp', ['templates', 'ngDialog'])

お役に立てれば。

26
runTarm

この回答は、この問題に遭遇した可能性のある他のすべての人を対象としていますが、受け入れられた回答に記載されているように、依存関係が含まれているはずです。

使用している「キー」が一致していることを確認してください。私のシナリオでは、次のことが起こっていました。

$templateCache.put('/someurl.html', 'some value');

しかし'someurl.html'を探していました。コードを次のように更新したら：

$templateCache.put('someurl.html', 'some value');

すべてが機能し始めました。

15
streetlogics

$ templatecacheへの依存関係を削除できるもう1つの方法です。

このgulpプラグインを使用できます[ https://github.com/laxa1986/gulp-angular-embed-templates] これは、ルート、ディレクティブを読み取り、templateUrlをtemplateUrlで参照されているテンプレートに置き換えることができます。

src
+-hello-world
  |-hello-world-directive.js
  +-hello-world-template.html

hello-world-directive.js：

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        // relative path to template
        templateUrl: 'hello-world-template.html'
    };
});

hello-world-template.html：

<strong>
    Hello world!
</strong>

gulpfile.js：

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('js:build', function () {
    gulp.src('src/scripts/**/*.js')
        .pipe(embedTemplates())
        .pipe(gulp.dest('./dist'));
});

gulp-angular-embed-templatesは次のファイルを生成します：

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        template:'<strong>Hello world!</strong>'
    };
});
1
ankur kushwaha

私の2セント（これも頭をたたきました。）

1）メインモジュールに依存関係があることを確認します。 （テンプレート用に別のモジュールを作成する場合）。

2）\はテンプレートURLで処理されます。

3）ファイル名で使用されているテキストの大文字と小文字が、テンプレートのURLで使用されているものと一致することを確認します。 （はい、これ）。

0
Abdul Rehman Sayed