实施加载 AngularJS 模板的自定义方式

Question

在 AngularJS 中，您可以提供外部模板作为脚本标记或作为 Web 服务器上的 html 文件。但是我需要实现一个自定义逻辑来检索这些模板和适合的方法 none。所以我想我可以重写 AngularJS 中模板实际从服务器加载的部分。但事实证明，很难找到这方面的任何信息。我发现 $TemplateRequestProvider 用于此任务，但我不知道如何用自定义逻辑替换它。你能帮帮我吗？

Answer 1

我不完全确定您要在这里实现什么，因为实际上 $templateRequestProvider 确实可以为指向它们的给定 URL 检索模板。在幕后，当需要位于远程源中的模板时，提供程序首先运行其内部缓存，如果请求的模板不可用，它会去获取它。如果响应成功，响应 body（HTML 内容）将被存储并在内部 store/cache 中建立索引。现在在不太可能的情况下，资源服务器需要在请求中出现额外的数据集，例如 headers/cookies、强制请求参数、auth。令牌等，那么实际上，您检索这些模板的请求需要更加复杂。话虽这么说，我想你真正感兴趣的是能够在请求发送之前操纵请求，不是 re-write 那个（获取+缓存）逻辑已经由 angular.

的开发者编写

尽管如此，如果确实需要并且有自己定制的处理请求的机制，您可以在 [=51] 的配置阶段访问该提供程序=] 应用程序 life-cycle。为此，请以这种方式在您的应用程序模块上使用链式配置：

app.config(['$templateRequestProvider', function ($templateRequestProvider) {
    $templateRequestProvider.$get = ['$templateCache', '$http', '$q','$sce', ƒunction ($templateCache, $http, $q, $sce) {
        var getRemoteTemplateByUrlFn = function (tplUrl, ignoreRequestError) {
           // here be dragons
           return $http.get ... ;
        };

        return getRemoteTemplateByUrlFn;
    }];
}]). ...

现在，在进入那个阶段之前，我建议您更好地研究文档作为 $templateRequestProvider 除了将 $get 配置 object 公开给提供者的功能外，它还公开了httpOptions(...) 函数，您可以调用该函数传递包含一组 headers 等的 httpOptions object 以包含在您获取远程模板的请求中。

另外，说到模板缓存和 on-demand 获取，让我向您介绍一下 ocLazyLoad 库（如果您还没有接触过的话）。我正在利用它在需要时延迟加载页面源 only（例如，单击按钮时模态 window 模板和控制器）。其强大功能包括：

依赖项自动加载
调试器友好（无评估代码）
混合正常启动和按需加载的能力
通过服务或指令加载
使用嵌入式异步加载器或使用您自己的（requireJS，...）
加载js（angular或不加载）/css/模板文件

玩得开心！

实施加载 AngularJS 模板的自定义方式

Implement custom way of loading AngularJS templates

javascript

templates

angularjs

angular-templatecache