javascript - react - Plantilla de caché angular no funciona

react js

Question

Tengo un proyecto usando gulp y angular. Quiero hacer clic en un botón y una ventana emergente que contiene el html para mostrar.

En el archivo build.js tengo el siguiente código:

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

en mi archivo app.js tengo:

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

Me sale un error al hacer clic en el botón:

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

Mi archivo templates.js contiene:

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

¿Por qué la memoria caché de la plantilla no reconoce la llamada a templates / popup.html y muestra lo que hay en la memoria caché en lugar de mirar la URL 404''d?

Solo para decir lo que he intentado, copié manualmente el archivo de plantilla en el directorio que estaba buscando y lo encontró. Sin embargo, esta no es la solución, ya que quiero que se extraiga del caché.

Gracias

Answer 1

Esta respuesta es para cualquier otra persona que se haya topado con este problema, pero están seguros de que incluyeron la dependencia como indica la respuesta aceptada:

Asegúrate de verificar la "clave" que estás utilizando. En mi escenario, sucedía lo siguiente:

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

pero estaba buscando ''someurl.html'' . Una vez que actualicé mi código a:

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

Todo empezó a funcionar.

Answer 2

Mis 2 centavos (porque yo también me golpeé la cabeza con esto)

1) Asegúrese de tener una dependencia en su módulo principal. (Si está creando un módulo separado para plantillas).

2) Asegúrate de que los líderes estén atendidos en las URL de la plantilla.

3) Asegúrese de que la cubierta de texto que se usa en los nombres de los archivos coincida con la utilizada en las direcciones URL de la plantilla. ( SI este ).

Answer 3

También debe especificar el módulo de templates como una dependencia de su módulo. Por ejemplo:

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

Espero que esto ayude.

Answer 4

Usted es un método más mediante el cual puede incluso eliminar su dependencia de $ templatecache.

Puede usar este complemento truculento [ https://github.com/laxa1986/gulp-angular-embed-templates] que puede leer sus rutas, directivas y reemplazar el templateUrl con la plantilla referenciada en el templateUrl.

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

hola-mundo-directiva.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 generará el siguiente archivo:

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