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

Почему кеш шаблона не распознает вызов шаблонов /popup.html и показывает, что находится в кеше, а не смотрит на 404-й URL?

Просто, чтобы сказать, что я попробовал, я вручную скопировал файл шаблона в каталог, который он искал, и нашел его. Это не решение, хотя я хочу, чтобы оно было взято из кеша.

Спасибо

Ответ 1

Вы также должны указать модуль templates в качестве зависимости от вашего модуля. Например:

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

Надеюсь, что это поможет.

Ответ 2

Этот ответ предназначен для всех, кто, возможно, столкнулся с этой проблемой, но они уверены, что они включили зависимость в качестве принятых состояний ответа:

Обязательно проверьте "ключ", в котором вы используете совпадения. В моем сценарии произошло следующее:

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

но он искал 'someurl.html'. Как только я обновил свой код до:

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

Все началось.

Ответ 3

Вы еще один метод, с помощью которого вы даже можете удалить свою зависимость от $templatecache.

Вы можете использовать этот плагин gulp [https://github.com/laxa1986/gulp-angular-embed-templates], который может читать ваши маршруты, директивы и заменять templateUrl шаблоном, на который делается ссылка в templateUrl.

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

привет-мир-directive.js:

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

привет-мир-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>'
    };
});

Ответ 4

Мои 2 цента (и я тоже ударил головой об этом.)

1) Убедитесь, что у вас есть зависимость в основном модуле. (если вы создаете отдельный модуль для шаблонов).

2) Убедитесь, что в \ учитываются шаблонные URL-адреса.

3) Убедитесь, что текстовая обложка, используемая в именах файлов, совпадает с используемой в шаблонных URL-адресах. (ДА этот).