当页面从应用程序中的任何地方重新加载时，它会转到 angularjs 中的初始页面？答案

【问题标题】：When page is reloaded from anywhere in application its goes to initial page in angularjs?当页面从应用程序中的任何地方重新加载时，它会转到 angularjs 中的初始页面？
【发布时间】：2015-07-08 04:33:21
【问题描述】：

在 webapp 中，使用路由。
使用 ng-include 包含包含标题详细信息和登录页面的初始页面，因为登录页面是单独的 html 页面，并且它具有 ng-view 标签。
当用户点击注册时，登录页面具有注册超链接，然后登录页面显式隐藏在控制器中，当注册提交时，其重定向到新页面，登录页面也相同，这已通过角度路由完成。
但是，每当刷新或重新加载任何页面后，它都会转到我的初始页面，即具有登录详细信息的 index.html。
现在，在页面刷新时不希望出现这种情况，除非并且直到没有任何 url 更改，否则它应该在同一页面上。

index.html

<body ng-app="docpointApp" ng-controller="mainCtrl">
    <div id="wrap">
        <nav role="navigation" class="navbar navbar-inverse navbar-default navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            </div>
        </nav>
        <div ng-include="'/doc-demo/parts/login.html'">
        </div>
    </div>
</body>

login.html

<div id="loginUser" ng-controller="appController">
    <div class="container-fluid">
        <div ng-show="showPage" >
            <form class="form-horizontal" name="loginForm">

                <div class="form-group">
                    <div class="">
                        <a class="btn btn-default" ng-click="loginUser()">Login</a>
                    </div>
                </div>
                <!--- Some login details--->
                <div class="form-group">
                    <div class="">
                            <a href="#/view-register" ng-click="showRegister()">REGISTER}</a>
                    </div>
                </div>                
            </form>            
        </div>
        <div ng-view></div>
    </div>
</div>

查看注册.html

<div id="registerUser" ng-controller="appController">
    <div class="panel-body" >
        <form class="form-horizontal css-form" name="registerForm">
            <div class="form-group">
             <!-- Some registration details---->
                <div class="">
                    <a class="btn btn-default" ng-click="registerUser()">register</a>
                </div>
            </div>
        </form>
    </div>
</div>

其他一些文件

<!--menubar.html,home.html,createRequest.html,pendingRequest.html etc
-->

docpointapp.js(Javascript 文件)

var docpointApp = angular.module('docpointApp', ['ngRoute', 'ngResource']);

docpointApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
                when('/view-register', {
                    templateUrl: '/doc-demo/parts/view-register.html',
                    controller: 'appController'
                }).
                when('/view-docmain', {
                    templateUrl: '/doc-demo/parts/docmain.html',
                    controller: 'appController'
                }).
                when('/login-user', {
                    templateUrl: '/doc-demo/parts/login.html',
                    controller: 'appController'
                }).
                when('/create_request', {
                    templateUrl: '/doc-demo/parts/createRequest.html',
                    controller: 'appController'
                }).
                when('/pending_upload_requests', {
                    templateUrl: '/doc-demo/parts/pendingRequest.html',
                    controller: 'appController'
                }).
                when('/index', {
                    templateUrl: '/doc-demo/parts/home.html',
                    controller: 'appController'
                }).
                when('/available_request', {
                    templateUrl: '/doc-demo/parts/pendingRequest.html',
                    controller: 'appController'
                }).
                when('/assigned_request', {
                    templateUrl: '/doc-demo/parts/pendingRequest.html',
                    controller: 'appController'
                }).
                when('/processed_request', {
                    templateUrl: '/doc-demo/parts/pendingRequest.html',
                    controller: 'appController'
                }).
                otherwise({redirectTo: '/home'});
    }]);

docpointApp.factory('loginSvc', [function () {
        var loginProperties = {
            isLoggedIn: false
        };
        return loginProperties;

    }]);
docpointApp.controller('appController', ['$scope', '$rootScope', '$http', '$location', 'loginSvc', function ($scope, $rootScope, $http, $location, loginSvc) {
        $scope.user = {

            'id': '',
            'userName': '',
            'password': '',
            'firstName': '',
            'lastName': '',
            'type': ''
        };

        $scope.logout = function () {
            loginSvc.isLoggedIn = false;
            $scope.isLoggedIn = loginSvc.isLoggedIn;
        };

        $scope.loginUser = function () {
            loginSvc.isLoggedIn = true;
            $scope.isLoggedIn = loginSvc.isLoggedIn;
            var res = $http({
                method: 'POST',
                dataType: 'json',
                url: '/doc-demo/actions/user-login',
                data: $scope.user
            });
            res.success(function (data, status, headers, config) {
                loginSvc.isLoggedIn = true;
                $scope.isLoggedIn = loginSvc.isLoggedIn;
                $scope.user = data;
                if ($scope.user.type === "ROLE_PROOF_READER") {
                    $scope.showProofReader = true;
                    $scope.showOfficer = false;
                } else {
                    $scope.showOfficer = true;
                    $scope.showProofReader = false;
                }
                if ($scope.user.loginStatus === "loggedIn") {
                    $scope.showPage = false;
                    $location.path("/index");
                }
            });
            res.error(function (data, status, headers, config) {
                alert("failure message: " + JSON.stringify({data: data}));
            });
        };

        $scope.showPage = true;


        $scope.showRegister = function () {
            $scope.showPage = !$scope.showPage;
        };


        $scope.registerUser = function () {
            var res = $http({
                method: 'POST',
                dataType: 'json',
                url: '/doc-demo/actions/user-register',
                data: $scope.user
            });
            res.success(function (data, status, headers, config) {
                $scope.user = data;
                if ($scope.user.type === "proofreader") {
                    $rootScope.showProofReader = true;
                    $rootScope.showOfficer = false;
                } else {
                    $rootScope.showOfficer = true;
                    $rootScope.showProofReader = false;
                }
                $location.path("/index");// page redirection after register sucess
            });
            res.error(function (data, status, headers, config) {
                alert("failure message: " + JSON.stringify({data: data}));
            });
        };
        $scope.search_pending_request = function () {
        //some details
        };  
    }]);

【问题讨论】：

你的 url 样式怎么样？它有一个 #
你能给我们看一些代码吗？
这就是 SPA 的工作方式。单页应用程序不会自行运行，它们会在您加载的页面中运行。如果您刷新页面，您将重新启动应用程序。一些路由框架允许您“跳转”到应用程序的中间以达到一个独特的状态，但您仍然需要在客户端保存一些数据，或者能够从服务器加载该应用程序状态的数据。跨度>
@Explore-X 是的，它有一个“#”。
@Claies：如果想实现同样的目标怎么办？

标签： javascript html angularjs angularjs-routing

【解决方案1】：

不确定您是否还在寻找答案，但可以通过使用$cookies 和$httpProvider.interceptors.push 的组合来实现页面刷新。基本上，您可以捕获 cookie 中的所有路由，并且在所有控制器中，您可以从 cookie 中获取最后一个路由页面信息，并使用$localtion 进行相应的重定向。

【讨论】：