Angular + Ionic 通过 XHR 加载所有内容答案

【问题标题】：Angular + Ionic loading all content via XHRAngular + Ionic 通过 XHR 加载所有内容
【发布时间】：2015-07-27 01:57:30
【问题描述】：

我们有一个 Angular + Ionic 应用程序，我们计划在 Cordova 上运行，但我们正试图追踪它的性能问题。

当在本地或构建的应用程序上运行时，我们在 Chrome 开发工具的“网络”选项卡中看到如下：

重复加载 CSS
XHR 请求获取 Angular UI 路由器链接到的每个模板文件，但尚未访问路由

举个例子：

还有来自 angular.js 源代码的第 3167 行（用星号表示）：

append: function(element, node) {
    var nodeType = element.nodeType;
    if (nodeType !== NODE_TYPE_ELEMENT && nodeType !== NODE_TYPE_DOCUMENT_FRAGMENT) return;

    node = new JQLite(node);

    for (var i = 0, ii = node.length; i < ii; i++) {
        var child = node[i];
        element.appendChild(child); *
    }
},

我从未见过类似的东西 - 我们已经检查了所有基础知识（重复的脚本/css 包括等），禁用 Ionic 缓存等。

我正在仔细研究，看看是什么原因造成的，但希望其他人已经看到了这一点，并可以就从哪里开始寻找提供一些建议。

更新

重复的 CSS 似乎是由于我们的引导 Angular 应用程序的 index.html 文件被错误地指向 UI 路由器配置中的状态。

所以根本问题是虚假/意外的 XHR 拉取到应用程序中的所有静态文件（角度 ui 模板、指令模板）。

【问题讨论】：

为什么你的 index.html 会被 XHR 请求重新加载？
@AndrewMcGivery - 更新的问题 - UI 路由器错误地指向 index.html 文件，并且路由器中的所有内容都通过 XHR“预加载”
没有足够的信息来诊断问题。你能在 Plunker 中复制这个问题吗？
关于在您的 html 中调用 element.append 的信息不足。您可以在 angular.js 中引发异常并找出导致此问题的原因。你的案子不会发生在我身上，永远不会。
所以你能够解决这个问题..这是因为你的 index.html 中的问题？？

标签： angularjs ionic-framework

【解决方案1】：

我处理 html 模板的方式是在编译时使用 gulp-ng-templates 或 grunt-angular-templates 将它们全部缓存（取决于您现在喜欢哪种风格的任务管理器）。

由于我们正在处理应用程序，因此内容最好是预先加载而不是延迟加载（只要您以 MB 为单位计算它们的总大小），从而节省一些带宽并改善整体用户体验。此外，它可能只是解决您的问题。

在编译时缓存模板的好处在于您的实现不需要知道它们来自哪里（服务器或缓存层），因此您不需要更改任何代码。

附：我知道我的回答不能解决您的实际问题，但它可能只能同时解决 2 个问题。

【讨论】：

【解决方案2】：

好吧，当一个状态被激活时，模板会自动插入到其父状态模板的 ui-view 中。

你应该检查你是如何定义你的状态的。和/或与我们分享您的状态定义:)

【讨论】：