Note. I am using AngularJS v1.6.0
I have implemented the standalone AngularJS application on another existing website, it exists on one page on the website, and any Angular code does not work on the rest of the website.
For example, a regular page on a site could be:
http://example.com/any-page
Then the user can click the link and it will transfer them to the page using Angular JS running on it:
http://example.com/angularjs-app
When landing at this URL, it loads the AngularJS application and adds #!/ To the URL as expected. It does not contain any elements from the rest of the site, such as the title, so for the user it looks like a completely different section. However, he also breaks the back button. Unable to go back to go to http://example.com/any-page . Each time you click back, it again loads the surface view of the AngularJS application - in fact, the user is stuck on the AngularJS application page and cannot return to /any-page .
I think this is due to the routing of AngularJS, because it seems to update the #!/ Url part when clicked and just reloads the initial view of the application. But I could be wrong.
Please note that the feedback button works fine in the AngularJS application when visiting various routes. For example, if I navigate between different routes / views in the application, for example #!/login or #!/view-details , I can always return through these views using the "Back" button. But when he reaches this initial form, he ceases to work.
Does anyone know about this?
Note. I looked at other Stack Overflow entries, but they all seemed to be written using the back button, which doesn’t work at all, and not this problem, when the back button works to navigate between the routes in the application, but not return to The original page is not AngularJS on the site.
Routing configuration
(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); })();
Part of the index where ng-view lives:
<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); })();