javascript – 当用于其他网站中的单个页面应用程序时,AngularJS应用程序会中断后退按钮

前端之家收集整理的这篇文章主要介绍了javascript – 当用于其他网站中的单个页面应用程序时,AngularJS应用程序会中断后退按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

注意:我使用的是AngularJS v1.6.0

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

例如,网站上的常规页面可能位于:

http://example.com/any-page

然后用户可以单击一个链接,然后将它们带到运行Angular JS的页面

http://example.com/angularjs-app

登陆此URL时,它会加载AngularJS应用程序并按预期将#!/附加到URL.它不包含来自网站其余部分的任何元素,例如标题,因此对于用户来说,它看起来像一个完全不同的部分.然而它也打破了后退按钮.回到http://example.com/any-page是不可能的.每次按下时,它只会再次加载AngularJS应用程序的着陆视图 – 实际上用户会卡在AngularJS应用程序页面上,无法返回到/任何页面.

我认为这与AngularJS路由有关,因为当你按下它时它似乎刷新了URL的#!/部分,只是在应用程序上重新加载初始视图.但我可能是错的.

请注意,在访问各种路线时,后退按钮在AngularJS应用程序中正常工作.例如,如果我在应用程序中的各种路径/视图之间导航,例如#!/ login或#!/ view-details,我总是可以通过后退按钮返回这些视图.但是当它达到初始视图时,它就会停止工作.

有没有人知道这方面的方法

注意:我已经查看了其他各种Stack Overflow帖子,但是它们似乎都被隐藏了后退按钮根本不工作,而不是这个问题,后退按钮用于在应用程序内的路线之间导航,但不回来到网站上原来的非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"),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-view存在的索引部分:

StartCtrl

(function () {
    "use strict";

    var func = function (
        $rootScope,$scope,$location,ROUTES,APP_EVENTS,CORE_EVENTS,SessionModel,sessionsService,configurationAggregator) {

        var broadcast = function(event,args) {
            $rootScope.$broadcast(event,args);
        };

        var redirectToLogin = function() {
            broadcast(APP_EVENTS.navigation.login);
        };

        // check if user is signed in and has a valid session
        var verifySession = function() {
            sessionsService.verify().then(function() {
                // if user is logged in navigate to profile
                // otherwise navigate to login
                configurationAggregator.getConfiguration().then(function () {
                    broadcast(APP_EVENTS.auth.login.success);
                    //broad cast(APP_EVENTS.navigation.home);
                    broadcast(APP_EVENTS.navigation.uktvProfile);
                },redirectToLogin);
            },redirectToLogin);
        };

        // init
        var sessionId = $location.search().guid;

        if (angular.isDefined(sessionId) && sessionId !== null) {
            broadcast(CORE_EVENTS.session.changed,{ sessionId: sessionId });
            verifySession();
        } else {
            verifySession();
        }
    };

    var controller = [
        "$rootScope","$scope","$location","EVENTS","mpp.core.EVENTS","mpp.core.SessionModel","mpp.core.services.sessionsService","mpp.core.aggregators.configurationAggregator",func
    ];

    var module = angular.module("app");
    module.controller("StartCtrl",controller);
})();
最佳答案
这不是AngularJS路由器的问题(尽管可能是特定版本的错误,因此请在问题中添加有关版本的信息).但很可能你在路由器事件处理程序或StartCtrl中有重定向.

AngularJS教程中的示例运行正常,您可以在此处获取

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

要本地化问题,我首先尝试使用以下配置运行您的应用:

$routeProvider
        .when('/',{
            template: '

如果它正常工作,那么你在StartCtrl控制器中有一些可疑的东西.如果仍然无法正常工作,请尝试以下方法

$routeProvider
        .when('/',{
            template: '

如果工作正常,那么寻找$routeChangeErrorhandlers.如果没有则可能是任何路由器事件处理程序.以下是ngRoute的事件列表:$routeChangeStart,$routeChangeError,$routeUpdate,$routeChangeSuccess

编辑:

由于您不希望用户在单击返回时返回/路由,您可以将其从历史记录中删除.当您将用户从/ route重定向时,只需在$location服务上调用replace method即可.例如. $location.path( ‘/登录’).REPLACE().

猜你在找的JavaScript相关文章