Javascript 预取$templateCache

我的angularjs应用程序基本上分4步加载：

• 主HTML
• 所有脚本和CSS文件

• $templateCache

  ，我们称之为

  template.html

• 图像

我想，在加载起始页时，我应该绕过

$templateCache

。但是现在，我想尽快开始抓取

template.html

，也就是说，在加载脚本的同时

我的代码中可能相关的部分如下所示

<script src='//ajax.googleapis.com/.../angular.min.js'></script>
<script src='/my.js'></script>
<link href='/my.css' media='all' rel='stylesheet'/>

及

---

第一个被取消，第二个来得太晚而无法生效。

由于HTML不能很快获取，所以整个过程完全没有意义

根据runTarm的建议，我最终生成了Javascript。所需要的只是

.factory('$templateCache', function($cacheFactory, $http, $injector) {
    var cache = $cacheFactory('templates');
    cache.put("MY_PAGE_1", "ESCAPED_TEXT_1");
    cache.put("MY_PAGE_2", "ESCAPED_TEXT_2");
    ...
    return {
        get: function(url) {
            var fromCache = cache.get(url);
            return fromCache ? fromCache : $http.get(url);
        }
    };
}

---

在转义文本中，必须遵守1024字符串文字长度限制，并转义换行符和双引号。仅此而已。

一个选项是将html转换为javascript，直接将模板添加到

$templateCache

中。如果您正在使用Grunt，或者希望使用Grunt，请参阅，此任务将为您进行转换。@runTarm我实际上是手动完成的。我想创建

template.js

应该不会比创建

template.html

难，我只是不知道它应该是什么样子。看看那个grunt插件，有一个生成输出的示例，你可以从那里开始。

<iframe class=invisible src="template.html"></iframe>

.factory('$templateCache', function($cacheFactory, $http, $injector) {
    var cache = $cacheFactory('templates');
    cache.put("MY_PAGE_1", "ESCAPED_TEXT_1");
    cache.put("MY_PAGE_2", "ESCAPED_TEXT_2");
    ...
    return {
        get: function(url) {
            var fromCache = cache.get(url);
            return fromCache ? fromCache : $http.get(url);
        }
    };
}