Question

我的应用程序有一个登录页面（ login.html ）和一个欢迎页面（ welcome.html ）。这两个页面都使用'ng-view'加载到 Main.html 中。

当用户尝试访问路径时

http://localhost:8080/MyContext/login

用户将被重定向到登录页面，在那里他可以输入他的凭据并登录。成功登录后，将设置范围变量（$ scope.user），并将应用程序重定向到welcome.html

$ scope.user =用户;

之前我在控制器的开头初始化相同的范围变量为null。 Main.html顶部有一个导航栏。如果使用“ ng-show ”无法使用“用户”，我会隐藏它。这是因为我想仅向登录用户显示此导航栏。

所以我希望它能够展示给welcome.html。那没有发生。我相信ng-view不会重新加载整个html（Main.html）页面。我该如何解决这个问题？

main.html中

<!DOCTYPE html>
<html ng-app="MainModule">
<head>
<base href="/Utility/">
<title>UTILITY</title>
<link
    href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
    rel="stylesheet">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script
    src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<script data-require="angular.js@1.6.5" data-semver="1.6.5"
    src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script data-require="angular-route@*" data-semver="1.6.2"
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<script data-require="ngstorage@*" data-semver="0.3.6"
    src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>

<script src="app.js"></script>
<script src="login/login.controller.js"></script>
<script src="login/login.service.js"></script>
<script src="welcome/welcome.controller.js"></script>
<link href="login/signin.css" rel="stylesheet" type="text/css">




</head>
<body>

    <div ng-show="user">
        <!-- nav bar container -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">UTILITY</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown"><a href="#" class="dropdown-toggle"
                            data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Drop Down 1<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Option 1</a></li>
                                <li><a href="#">Option 2</a></li>
                            </ul></li>

                        <li class="dropdown"><a href="#" class="dropdown-toggle"
                            data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Drop Down 2<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Option 1</a></li>
                                <li><a href="#">Option 2</a></li>
                            </ul></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Logout</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!--/.container-fluid -->
        </nav>
    </div>


    <div ng-view></div>

</body>
</html>

app.js

(function() {

    var mainModule = angular.module("MainModule", [ "ngRoute","ngStorage" ]);

    mainModule.config(function($routeProvider,$locationProvider) {

        $routeProvider.when("/login", {
            templateUrl : "login/Login.html",
            controller : "LoginController"
        }).when("/user/:username", {
            templateUrl : "welcome/welcome.html",
            controller: "WelcomeController"
        }).otherwise({
            redirectTo : "/login"
        });

        //$locationProvider.html5Mode(true);

    });

}());

login.controller.js

(function() {

    var loginModule = angular.module("MainModule");

    var LoginController = function($log, $scope, $sessionStorage, UserService, $location) {
        $scope.user = null;

        var userFound = function(userData) {
            $scope.user = userData;
            $scope.message = "Successful Login";

            //store the user information here for session management
            $sessionStorage.user = $scope.user;

            //window.location.replace("/user/"+$scope.user.userName);
            $location.path("/user/"+$scope.user.userName);
        };

        var onError = function(errorResponse) {
            $scope.message = "Invalid User";
        };

        $scope.submitLogin = function(username, password) {
            UserService.getUser(username, btoa(password)).then(userFound,
                    onError);
        };

    };

    loginModule.controller("LoginController", LoginController);

}());

welcome.controller.js

(function(){
    var loginModule = angular.module("MainModule");


    var WelcomeController = function($window, $scope){

        $scope.initWelcome = function(){
            $window.location.reload();
        }
    };


    loginModule.controller("WelcomeController", WelcomeController);

}());

在设置$ scope值后重新加载angularjs中的整个页面

0 个答案: