导航回 Angular 应用程序时如何使后退按钮起作用？答案

【问题标题】：How do I make the back button work when navigating back to an Angular app?导航回 Angular 应用程序时如何使后退按钮起作用？
【发布时间】：2014-01-22 02:13:53
【问题描述】：

我有一个应用程序，它在一些较新的页面上使用 AngularJS，在其他页面上使用旧的服务器端生成的模板。当一个人从 Angular 页面导航到服务器端模板页面，然后使用浏览器返回按钮返回到 Angular 页面时，负责使 Angular 页面运行的 JavaScript 都不会运行。这会使 Angular 页面处于错误状态。

我认为浏览器的 bfcache 会保留页面的状态，就像用户导航出去时一样。但是显然我不明白 bfcache 是如何工作的，它似乎除了放回肤浅的 HTML 模板代码之外什么都不做。

该应用程序不使用 $location 服务，因为我不想让 Angular 负责应用程序范围的路由（目前）：它对现有遗留代码的侵入性太大。

无论如何，如果 Angular 应用程序有一个指向外部站点的链接，问题应该是完全相同的：用户单击该链接，访问外部站点，然后单击返回按钮到一个损坏的 Angular 页面。

为了使这个案例有效，我缺少什么？

在所有 JS 执行的最开始，通过检查一些隐藏状态并发出广泛的 location.reload() 来避免严重的问题会很好，但我不介意强制控制器重新实例化。

【问题讨论】：

Angular 路由与大多数其他 MV* 框架一样，拦截浏览器导航并将其传递给路由器，然后停止通常会发生的页面导航。离开 Angular 站点会卸载内存中的代码和所有变量，因此只有在可以从处理的最后一个 url 重新创建整个应用程序状态时才能进行回击。
完全卸载 Angular 站点内存中的代码和所有变量似乎非常激烈。没有合理的解决方法吗？
您正在处理 JavaScript 和浏览器，它们将每个页面加载作为唯一的应用程序实例处理。您可以将变量存储在 cookie 或 LocalStorage 中，如果每次页面加载时它们存在于以前的访问中，则重新加载它们，但这非常麻烦。您唯一的其他选择是非常仔细地构建您的路线，以便呈现的每个角度页面都可以是无状态的。但是，您以这种方式限制了 Angular 作为单页应用程序框架的实用性。

标签： javascript angularjs browser-history

【解决方案1】：

在正确配置路由的单页应用程序 (SPA) 中，您可以使用 $routeChangeSucess 跟踪路由更改，如下所示：

在您的 MainController 中：

scope.history = [];

$scope.$on('$routeChangeSuccess', function (event, current, previous) {         
        //this is how your track of the navigation history
        $scope.history.push($location.$$path);
    });


///Your go back code function can works something similar to this
   $scope.goBack = function(){       
        var prevUrl = $scope.history.length > 1 ? $scope.history.splice(-2)[0] : "/";
        $location.path(prevUrl);
    };

【讨论】：