【发布时间】：2017-07-27 07:18:26
【问题描述】：
注意：我使用的是 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 应用程序页面上，无法返回到/any-page。
我认为这与 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"),
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-view 所在的索引部分：
<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>
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",
"ROUTES",
"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);
})();
【问题讨论】：
-
你用什么路由到外部 url 的？
-
您有更多详细信息吗？我创建了一个简单的测试，一切正常。路由是如何配置的？这个不工作的演示将有助于理解在这种情况下发生了什么
-
谢谢@Brian，我已经添加了我的路由配置，如果你还需要什么，请告诉我。如果可能的话，你能把你的简单测试添加到某个地方让我看看吗？它可能有助于了解我的问题的原因。
标签： javascript angularjs