Javascript AngularJS应用程序在另一个网站中用于单页应用程序时会断开后退按钮

注意：我使用的是AngularJSV1.6.0

我已经在另一个现有网站上实现了一个独立的AngularJS应用程序，它存在于该网站的一个页面上，而该网站的其余部分没有运行任何Angular代码

例如，站点上的常规页面可以位于：

http://example.com/any-page

然后，用户可以单击一个链接，并将他们带到运行Angular JS的页面：

http://example.com/angularjs-app

登陆此URL时，它将加载AngularJS应用程序并附加

#/添加到URL。它不包含站点其他部分的任何元素，例如标题，因此对于用户来说，它看起来像是一个完全不同的部分。然而，它也打破了后退按钮。无法按back返回到
http://example.com/any-page
。每次按back键时，它只会再次加载AngularJS应用程序的登录视图-实际上用户被卡在AngularJS应用程序页面上，无法返回到
/任何页面

我认为这与AngularJS路由有关，因为它似乎刷新了
#/
请注意，在AngularJS应用程序中，当访问各种路线时，“后退”按钮可以正常工作。例如，如果我在应用程序中的各种路线/视图之间导航，例如
#/登录
或
#/查看详细信息
，我始终可以通过“后退”按钮返回这些视图。但当它到达初始视图时，它停止工作

有人知道怎么解决这个问题吗

注意：我已经看过了关于这个的各种其他堆栈溢出帖子，但是它们似乎都关注后退按钮根本不起作用，而不是后退按钮用于在应用程序内的路线之间导航，但不能返回到站点上的原始非AngularJS页面

路由配置

(function () {
    "use strict";

    var routes = {
        error: "/error",
        forgottenPassword: "/forgotten-password",
        home: "/home",
        login: "/login",
        orders: "/orders",
        paymentDetails: "/payment-details",
        personalDetails: "/personal-details",
        subscriptions: "/subscriptions",
        updatePassword: "/update-password",
        accountVerification: "/account-verification",
        register: '/register',
        profile: '/profile',
        accountConfirm: '/account-confirm',
        deleteAccount: '/delete-account'
    };

    var configFunc = function (
        $routeProvider,
        $locationProvider,
        CONFIG,
        ROUTES) {

        var resolve = {
            isLoggedIn: [
                "$q", "ERRORS", "core.services.sessionsService", function ($q, ERRORS, sessionsService) {
                    return sessionsService.isLoggedIn().then(function (isLoggedIn) {
                        if (isLoggedIn) {
                            return isLoggedIn;
                        }

                        return $q.reject({ error: ERRORS.route.requiresAuth });
                    });
                }
            ]
        };

        var getTemplateUrl = function(page) {
            return CONFIG.rootPagesUrl + page;
        };

        $routeProvider
            .when("/", {
                controller: "StartCtrl",
                template: ""
            })
            .when(ROUTES.login, {
                templateUrl: getTemplateUrl("login.html"),
                pageName: "Login"
            })
            .when(ROUTES.forgottenPassword, {
                templateUrl: getTemplateUrl("forgotten-password.html"),
                pageName: "Forgotten Password"
            })
            .when(ROUTES.home, {
                templateUrl: getTemplateUrl("home.html"),
                resolve: resolve
            })
            .when(ROUTES.personalDetails, {
                templateUrl: getTemplateUrl("personal-details.html"),
                resolve: resolve
            })
            .when(ROUTES.paymentDetails, {
                templateUrl: getTemplateUrl("payment-details.html"),
                resolve: resolve
            })
            .when(ROUTES.orders, {
                templateUrl: getTemplateUrl("orders.html"),
                resolve: resolve
            })
            .when(ROUTES.subscriptions, {
                templateUrl: getTemplateUrl("subscriptions.html"),
                resolve: resolve
            })
            .when(ROUTES.updatePassword, {
                templateUrl: getTemplateUrl("update-password.html"),
                pageName: "Update Password"
            })
            .when(ROUTES.accountVerification, {
                templateUrl: getTemplateUrl("account-verification.html"),
                pageName: "Account Verification"
            })
            .when(ROUTES.error, {
                templateUrl: getTemplateUrl("error.html"),
                pageName: "Error"
            })
            .when(ROUTES.register, {
                templateUrl: getTemplateUrl("register.html"),
                pageName: "Register"
            })
            .when(ROUTES.profile, {
                templateUrl: getTemplateUrl("profile.html"),
                resolve: resolve,
                pageName: "Profile"
            })
            .when(ROUTES.accountConfirm, {
                templateUrl: getTemplateUrl("accountConfirm.html"),
                pageName: "Registration Complete"
            })
            .when(ROUTES.deleteAccount, {
                templateUrl: getTemplateUrl("deleteAccount.html"),
                resolve: resolve,
                pageName: "Delete Account"
            })
            .otherwise({
                templateUrl: getTemplateUrl("login.html"),
                pageName: "Login"
            });
    };

    var config = [
        "$routeProvider",
        "$locationProvider",
        "CONFIG",
        "ROUTES",
        configFunc
    ];

    var module = angular.module("app");
    module.constant("ROUTES", routes);
    module.config(config);
})();

ng视图所在索引部分：

<body ng-app="app" ng-strict-di>

    <div>
        <div id="container" class="mpp-app">
            <div class="mpp-page" id="mpp-page">
                <div class="page-wrapper">
                    <div class="ui-module-container">
                        <div brand></div>
                    </div>
                    <div ng-view></div>
                </div>
            </div>
             <div class="ui-module-container">
                 <div footer></div>
             </div>
         </div>
    </div>

    <div id="spinner" class="hidden"><div class="icon"></div></div>

您可以禁用
#的前置通过启用。我不能100%确定这是否与您的问题兼容，但这样，打开Angular应用程序看起来像一个历史事件，而不是两个。
这不是AngularJS路由器的问题（尽管可能是特定版本的错误，因此请在问题中添加有关版本的信息）。但很可能在路由器事件处理程序或
StartCtrl
中有重定向

AngularJS教程中的示例运行良好，您可以在此处获得：

git clone https://github.com/angular/angular-phonecat.git

要本地化此问题，我将首先尝试使用以下配置运行您的应用程序：

$routeProvider
        .when('/', {
            template: '<div>Hello</div>'
        })
        .when(ROUTES.login, {
            templateUrl: getTemplateUrl("login.html"),
            pageName: "Login"
        })
        .when(ROUTES.forgottenPassword, {
            templateUrl: getTemplateUrl("forgotten-password.html"),
            pageName: "Forgotten Password"
        })
        .when(ROUTES.home, {
            templateUrl: getTemplateUrl("home.html"),
            resolve: resolve
        })
        .when(ROUTES.personalDetails, {
            templateUrl: getTemplateUrl("personal-details.html"),
            resolve: resolve
        })
        .when(ROUTES.paymentDetails, {
            templateUrl: getTemplateUrl("payment-details.html"),
            resolve: resolve
        })
        .when(ROUTES.orders, {
            templateUrl: getTemplateUrl("orders.html"),
            resolve: resolve
        })
        .when(ROUTES.subscriptions, {
            templateUrl: getTemplateUrl("subscriptions.html"),
            resolve: resolve
        })
        .when(ROUTES.updatePassword, {
            templateUrl: getTemplateUrl("update-password.html"),
            pageName: "Update Password"
        })
        .when(ROUTES.accountVerification, {
            templateUrl: getTemplateUrl("account-verification.html"),
            pageName: "Account Verification"
        })
        .when(ROUTES.error, {
            templateUrl: getTemplateUrl("error.html"),
            pageName: "Error"
        })
        .when(ROUTES.register, {
            templateUrl: getTemplateUrl("register.html"),
            pageName: "Register"
        })
        .when(ROUTES.profile, {
            templateUrl: getTemplateUrl("profile.html"),
            resolve: resolve,
            pageName: "Profile"
        })
        .when(ROUTES.accountConfirm, {
            templateUrl: getTemplateUrl("accountConfirm.html"),
            pageName: "Registration Complete"
        })
        .when(ROUTES.deleteAccount, {
            templateUrl: getTemplateUrl("deleteAccount.html"),
            resolve: resolve,
            pageName: "Delete Account"
        })
        .otherwise({
            templateUrl: getTemplateUrl("login.html"),
            pageName: "Login"
        });

$routeProvider
。当（“/”{
模板：“你好”
})
.when（ROUTES.login{
templateUrl:getTemplateUrl（“login.html”），
pageName:“登录”
})
.when（ROUTES.forgotten）密码{
templateUrl:getTemplateUrl（“忘记密码.html”），
pageName:“忘记密码”
})
.何时（回家）{
templateUrl:getTemplateUrl（“home.html”），
决心：决心
})
.何时（路线、个人详细信息、{
templateUrl:getTemplateUrl（“personal details.html”），
决心：决心
})
.何时（路线.付款详情）{
templateUrl:getTemplateUrl（“payment details.html”），
决心：决心
})
.何时（路线、订单、{
templateUrl:getTemplateUrl（“orders.html”），
决心：决心
})
.when（路由、订阅、{
templateUrl:getTemplateUrl（“subscriptions.html”），
决心：决心
})
.when（ROUTES.updatePassword{
templateUrl:getTemplateUrl（“updatepassword.html”），
pageName:“更新密码”
})
.何时（路由、帐户验证、{
templateUrl:getTemplateUrl（“account verification.html”），
pageName:“帐户验证”
})
.when（ROUTES.error{
templateUrl:getTemplateUrl（“error.html”），
页面名称：“错误”
})
.何时（何时）注册{
templateUrl:getTemplateUrl（“register.html”），
页面名称：“注册”
})
.when（ROUTES.profile{
templateUrl:getTemplateUrl（“profile.html”），
决心:决心,，
页面名称：“个人资料”
})
.何时（路线）确认{
templateUrl:getTemplateUrl（“accountConfirm.html”），
pageName:“注册完成”
})
.when（ROUTES.delete）帐户{
templateUrl:getTemplateUrl（“deleteCount.html”），
决心:决心,，
pageName:“删除帐户”
})
.否则({
templateUrl:getTemplateUrl（“login.html”），
pageName:“登录”
});

如果它工作正常，那么StartCtrl控制器中会出现一些可疑的情况。如果仍然无法正常工作，请尝试以下操作：

$routeProvider
        .when('/', {
            template: '<div>Hello</div>'
        })
        .otherwise('/');

$routeProvider
。当（“/”{
模板：“你好”
})
。否则（“/”）；

如果工作正常，则查找
$routeChangeError
处理程序。如果不是，则可能是任何路由器事件处理程序。以下是ngRoute的事件列表：
$routeChangeStart
，
$routeChangeError
，
$routeUpdate
，
$routeChangeSuccess

编辑：

<body ng-app="app" ng-strict-di>

    <div>
        <div id="container" class="mpp-app">
            <div class="mpp-page" id="mpp-page">
                <div class="page-wrapper">
                    <div class="ui-module-container">
                        <div brand></div>
                    </div>
                    <div ng-view></div>
                </div>
            </div>
             <div class="ui-module-container">
                 <div footer></div>
             </div>
         </div>
    </div>

    <div id="spinner" class="hidden"><div class="icon"></div></div>

由于您不希望用户在单击“返回”时返回到
/
路线，因此您可以将其从历史记录中删除。当您将用户从
/
路线重定向时，只需调用
$location
服务。例如，
$location.path（'/login'）.replace（）
 您使用什么路由到exte