Javascript AngularJS模板缓存_Javascript_Angularjs_Gulp

Javascript AngularJS模板缓存

javascript angularjs gulp

Javascript AngularJS模板缓存,javascript,angularjs,gulp,Javascript,Angularjs,Gulp,我正在尝试使用gulpangulartemplatecache生成templatecache，并将其与angular脚本合并到一个JS文件中吞咽任务： gulp.task('generatetemplatecache', function () { return gulp.src(['dev/app/**/*.tpl.html']) .pipe(minifyHTML({quotes: true})) .pipe(templateCache({ module:'templ

我正在尝试使用

gulpangulartemplatecache

生成templatecache，并将其与angular脚本合并到一个JS文件中

吞咽任务：

gulp.task('generatetemplatecache', function () {
    return gulp.src(['dev/app/**/*.tpl.html'])
    .pipe(minifyHTML({quotes: true}))
    .pipe(templateCache({ module:'templateCache', standalone:true }))
    .pipe(gulp.dest('public/app'));
});

这就是输出的基本情况：

var app = angular.module("app",['templateCache']);
angular.module("templateCache", []).run(["$templateCache", function($templateCache) {$templateCache.put("test.tpl.html","<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>My Title</title></head><body></body></html>");
$templateCache.put("layout/popover.tpl.html","<h3 class=\"popover-title\">Click</h3><div class=\"popover-content\"><table style=\"width:600px\" class=\"table\"><tr ng-repeat=\"customer in customers\"><td>{{customer.name}}</td><td>{{customer.street}}</td></tr></table>ss</div>");

var-app=angular.module（“app”，['templateCache']）；
运行（[“$templateCache”，函数（$templateCache）{$templateCache.put（“test.tpl.html”，“我的标题”）；
$templateCache.put（“layout/popover.tpl.html”，“单击{{customer.name}}{{{customer.street}}}ss”）；

但问题是，我发现它不是从templatecache加载的。每当angular需要模板时，它仍然会抓取原始模板html文件。如果该html文件不可用，那么它将无法显示它

为什么它不起作用？我做错了什么？模板缓存中的url是相对于

index.html

或域的根的？

要检查的一件事是确保创建模板文件时路径正确

例如，在我的应用程序中，我所有的源代码都是这样组织的：

modules
   |---user
      |---user-controller.js
      |---user-service.js
      |---user.html

   |---navigation
      |---navigation-controller.js
      |---header.html
      |---footer.html

因此，在我的路由器或

templateUrl

属性的任何指令中，我引用了我的HTML文件，如：

modules/user/user.html

也就是说，在我创建templateCache文件的Gulpfile中，我指定了“modules”的根，这样每个文件在templateCache中都有一个与此路径相同的密钥。例如：

gulp.task('templates', function () {
    gulp.src('./app/modules/**/*.html')
        .pipe(angularTemplatecache('templates.js', {
            standalone: true,
            root: "modules"
        }))
        .pipe(gulp.dest('./app/templates'));
});

如果所有其他配置问题都正确（即，您正确加载了templates.js文件，并且将其作为模块依赖项包含在应用程序中），那么这个路径问题可能就是您加载它们时遇到问题的原因

您还可以使用另一个gulp，它可以读取您的路线、指令，并用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>

gulp angular嵌入模板将生成以下文件：

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

angular.module（'test'）。指令（'helloWorld'，函数（）{
返回{
限制：'E'，
模板：“你好，世界！”
};
});

你说它抓取原始文件是什么意思？这意味着你更改了HTML文件，但仍能在浏览器中看到旧的更改？@sma我的意思是，它仍然需要原始文件。如果我拿走模板HTML文件，它将无法加载。你能发布创建模板文件时使用的gulp任务吗？@sma我已经发布了生成模板缓存的gulp任务。所以这应该是创建一个名为templates.js的新文件，对吗？我假设您正在以某种方式加载此文件，然后将其作为依赖项添加到主模块中？

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