Angularjs一些路由加载缓慢答案

【问题标题】：Angularjs some routes slow to loadAngularjs一些路由加载缓慢
【发布时间】：2014-03-17 14:56:37
【问题描述】：

我遇到了一个非常奇怪的情况，我似乎无法弄清楚。这是我的路线：

$routeProvider.when(/application1/:type, {
          templateUrl: "application1/index.html"
        })
.when(/application1/:type/:folder, {
          templateUrl: "application1/index.html"
        })
.when(/application2, {
          templateUrl: "application2/index.html"
        })
.when(/application3, {
          templateUrl: "application3/index.html"
        });

由于某种原因，当我在 application2 和 application3 上使用 $location.path 时，它工作正常并且在我调用它时会立即更新。但是，每当我切换到 application1 上的任何内容时，大约需要 3-5 秒，然后开始加载。当我在 application1 上刷新页面时，它会立即工作，所以我认为它不是与之关联的代码。某些路线的行为怎么会如此不同？

更新：我在我的应用程序上运行了一个分析器：在 application1 中加载路由时，运行 $apply 和/或 $digest 似乎需要 5 秒以上。我有什么方法可以加快这个过程？

【问题讨论】：

如果您将整个控制器注释为“application1”，它仍然很慢吗？我的直觉是，这是您的控制器中的某些东西，一个 ng-repeat 或视图中运行非常缓慢的其他东西。这可能不是路由问题。
我在加载的第一个控制器的第一行添加了一个断点。直到延迟结束后，这条线才会被击中。我还检查了 routeSuccessful 事件并立即触发。在 routeSuccessful 事件触发和第一个加载的控制器的第一行之间存在大量延迟。
这只是模型在 $apply 和 $digest 上过于庞大的问题。本质上，我在更改路线之前清除了模型，这大大提高了速度。
你是怎么做到的？我遇到了类似的问题，可以从相同的解决方案中受益。

标签： angularjs routing route-provider

【解决方案1】：

我遇到了同样的问题，路由在启动时有效，但在执行特定路由时变得很慢。因为它在开始时就起作用了，所以我认为$route.reload(); 可能会成功。

$route.reload();
$location.path("application1/");

这个修复对我有用。不过不要问我详细的解释。

【讨论】：

欢迎来到Stack Overflow！ “不要问我详细的解释”违背了这个网站的整个基础。这正是我们来到这里的原因：详细解释。因此，请编辑此答案以包含一个。
@user155407 我想这个人是在说他不知道详细的解释。我也没有，记录在案。

【解决方案2】：

我刚遇到这个问题。事实证明，这是因为我调用 $location.url 的函数是从 jQuery ".on" （实际上是 jQLite）调用的。如果您从$digest 循环之外的某些东西中调用，我已经忘记了AngularJS 如何使用您需要调用$applyAsync（或$apply）来执行“AngularJS 的东西”。也许如果不是因为我的超时计时器，它根本就不会起作用（我认为当它开始时就是新视图最终被处理的时候）。

在我的情况下，解决方法是改变它（这是 CoffeeScript，但在纯 JavaScript 中的处理方式相同）：

element.on 'hidden.bs.modal', () ->
    stuffIncludingLocationUrlCall()

到这里：

element.on 'hidden.bs.modal', () ->
    scope.$applyAsync ->
        stuffIncludingLocationUrlCall()

现在，$location.url 的视图变化发生得非常快。

编辑：这是一个 Javascript 和 jQuery 版本，供遇到此问题的人使用，就像我一样...

$(element).on("click", function() {

    // any processing or other logic you need goes here

    $scope.apply(function() {
        $location.path("new/path");
    });
});

【讨论】：