javascript 角度模板缓存不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25431767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Template cache not working
提问by Ben Taliadoros
I have a project using gulp and angular. I want to click a button and a pop up containing the html to show.
我有一个使用 gulp 和 angular 的项目。我想单击一个按钮和一个包含要显示的 html 的弹出窗口。
In the build.js file i have the following code:
在 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'));
});
in my app.js file i have:
在我的 app.js 文件中，我有：
.controller('PopupCtrl', function($scope, ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({
template: 'templates/popup.html'
});
};
})
I get an error on clicking the button:
单击按钮时出现错误：
GET http://mylocalhost:3000/templates/popup.html 404 (Not Found)
My templates.js file contains:
我的 templates.js 文件包含：
angular.module("templates", []).run(["$templateCache", function($templateCache) {
$templateCache.put("templates/popup.html", "my html") ...etc
Why does the template cache not recognise the call to templates/popup.html and show what is in the cache rather than looking at the 404'd URL?
为什么模板缓存无法识别对 templates/popup.html 的调用并显示缓存中的内容而不是查看 404 的 URL？
Just to say what I have tried, I manually copied the template file into the directory it was looking and it found it. This is not the solution though as I want it taken from cache.
只是说一下我的尝试，我手动将模板文件复制到它正在查找的目录中并找到了它。这不是解决方案，因为我希望它从缓存中获取。
Thanks
谢谢
回答by runTarm
You have to also specify the templatesmodule as a dependency of your module. For example:
您还必须将templates模块指定为模块的依赖项。例如：
angular.module('myApp', ['templates', 'ngDialog'])
Hope this helps.
希望这可以帮助。
回答by streetlogics
This answer is for anyone else that may have run across this issue, but they're sure they did include the dependency as the accepted answer states:
此答案适用于可能遇到此问题的任何其他人，但他们确信他们确实包含了依赖项，如已接受的答案所述：
Make sure to verify the "key" you're using matches. In my scenario, the following was happening:
确保验证您使用的“密钥”匹配。在我的场景中，发生了以下情况：
$templateCache.put('/someurl.html', 'some value');
but it was looking for 'someurl.html'. Once I updated my code to:
但它正在寻找'someurl.html'。一旦我将代码更新为：
$templateCache.put('someurl.html', 'some value');
Everything started working.
一切都开始工作了。
回答by ankur kushwaha
You is one more method by which you can even remove your dependency on $templatecache.
您是另一种方法，您甚至可以通过它来消除对 $templatecache 的依赖。
You can use this gulp plugin[https://github.com/laxa1986/gulp-angular-embed-templates]which can read your routes,directives and replace the templateUrl with the template referenced in the templateUrl.
您可以使用这个 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:
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:
hello-world-template.html:
<strong>
Hello world!
</strong>
gulpfile.js:
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 will generate the following file:
gulp-angular-embed-templates 将生成以下文件：
angular.module('test').directive('helloWorld', function () {
return {
restrict: 'E',
template:'<strong>Hello world!</strong>'
};
});
回答by Abdul Rehman Sayed
My 2 cents (coz i also banged my head on this.)
我的 2 美分（因为我也撞到了这个。）
1) Ensure that you have a dependency in your main module. (if you are creating a separate module for templates).
1) 确保您在主模块中有依赖项。（如果您正在为模板创建单独的模块）。
2) Ensure that leading \are taken care of in template urls.
2) 确保\在模板 url中处理前导。
3) Ensure that text casing used in file names matches with that used in template urls. (YES this one).
3) 确保文件名中使用的文本大小写与模板 url 中使用的文本大小写匹配。（是的这个）。
