注意:我使用的是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教程中的示例运行正常,您可以在此处获取:
git clone https://github.com/angular/angular-phonecat.git
要本地化问题,我首先尝试使用以下配置运行您的应用:
$routeProvider
.when('/',{
template: '
如果它正常工作,那么你在StartCtrl控制器中有一些可疑的东西.如果仍然无法正常工作,请尝试以下方法:
$routeProvider
.when('/',{
template: '