如何使用 AngularJs 将一页导航到另一页

Question

如何从一页导航到另一页。假设我有一个登录页面，在单击提交按钮时输入用户名和密码后，它需要验证，如果用户名和密码都正确，则需要返回主页。首页内容需要显示。我在这里发布代码。在浏览器中 url 正在更改，但内容没有更改。

index.html

<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
</head>

<body >
    <div id='content' ng-controller='LoginController'>
        <div class="container">
            <form class="form-signin" role="form" ng-submit="login()">
                <h3 class="form-signin-heading">Login Form</h3>
                <span><b>Username :</b>&nbsp; <input type="username"
                    class="form-control" ng-model="user.name" required> </span> </br>
                </br> <span><b>Password :</b>&nbsp;&nbsp; <input type="password"
                    class="form-control" ng-model="user.password" required> </span> 
                <br><br>                
                <button class="btn btn-lg btn-primary btn-block" type="submit">
                    <b>Sign in</b>
                </button>
            </form>
        </div>
        <!-- /container -->
    </div>
    <script src='test.js' type="text/javascript"></script>
</body>
</html>

home.html

Hello I am  from Home page

test.js

var applog = angular.module('myApp',['ngRoute']);

applog.config([ '$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {   
        $routeProvider.when('/home', {
            templateUrl : 'home.html',
            controller : 'HomeController'
        }).otherwise({
            redirectTo : 'index.html'
        });
        //$locationProvider.html5Mode(true); //Remove the '#' from URL.
    } 
]);

applog.controller("LoginController", function($scope, $location) {
    $scope.login = function() {
        var username = $scope.user.name;
        var password = $scope.user.password;
        if (username == "admin" && password == "admin") {
            $location.path("/home" );
        } else {
            alert('invalid username and password');
        }
    };
});

applog.controller("HomeController", function($scope, $location) {

});

Answer 1

Index.html

<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
</head>

<body >
    <div ng-view></div>
    <script src='test.js' type="text/javascript"></script>
</body>
</html>

test.js

var applog = angular.module('myApp',['ngRoute']);

applog.config([ '$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.when('/home', {
            templateUrl : 'home.html',
            controller : 'HomeController'
        })
        $routeProvider.when('/', {
            templateUrl : 'login.html',
            controller : 'LoginController'
        }).otherwise({
            redirectTo : 'index.html'
        });
        //$locationProvider.html5Mode(true); //Remove the '#' from URL.
    }
]);

applog.controller("LoginController", function($scope, $location) {
    $scope.login = function() {
        var username = $scope.user.name;
        var password = $scope.user.password;
        if (username == "admin" && password == "admin") {
            $location.path("/home" );
        } else {
            alert('invalid username and password');
        }
    };
});

applog.controller("HomeController", function($scope, $location) {

});

login.html

<div id='content' ng-controller='LoginController'>
    <div class="container">
        <form class="form-signin" role="form" ng-submit="login()">
            <h3 class="form-signin-heading">Login Form</h3>
            <span><b>Username :</b>&nbsp; <input type="username"
                class="form-control" ng-model="user.name" required> </span> </br>
            </br> <span><b>Password :</b>&nbsp;&nbsp; <input type="password"
                class="form-control" ng-model="user.password" required> </span>
            <br><br>
            <button class="btn btn-lg btn-primary btn-block" type="submit">
                <b>Sign in</b>
            </button>
        </form>
    </div>
    <!-- /container -->
</div>

Answer 2

正如@dfsq 所说，您需要一个 ng-view 来放置您的新视图。当然，如果您将 ng-view 添加到索引中，您将看到索引和主页的内容。这里的解决方案是创建两个部分视图，一个用于登录身份验证，另一个用于家庭。索引文件应仅包含 ng-view 和您希望在整个应用程序中保持不变的那些元素（菜单、页脚...）

这是我所说的代码： index.html

<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
 <script src='test.js' type="text/javascript"></script>
</head>

<body >
    <div ng-view></div>
    <script src='test.js' type="text/javascript"></script>
</body>
</html>

您的新路由配置

applog.config([ '$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.when('/home', {
            templateUrl : 'home.html',
            controller : 'HomeController'
        })
        $routeProvider.when('/', {
            templateUrl : 'auth.html',
            controller : 'LoginController'
        }).otherwise({
            redirectTo : 'index.html'
        });
        //$locationProvider.html5Mode(true); //Remove the '#' from URL.
    }
]);

并将您的登录代码放入 auth.html 文件

<div id='content' ng-controller='LoginController'>
        <div class="container">
            <form class="form-signin" role="form" ng-submit="login()">
                <h3 class="form-signin-heading">Login Form</h3>
                <span><b>Username :</b>&nbsp; <input type="username"
                    class="form-control" ng-model="user.name" required> </span> </br>
                </br> <span><b>Password :</b>&nbsp;&nbsp; <input type="password"
                    class="form-control" ng-model="user.password" required> </span> 
                <br><br>                
                <button class="btn btn-lg btn-primary btn-block" type="submit">
                    <b>Sign in</b>
                </button>
            </form>
        </div>
        <!-- /container -->
    </div>

请记住，如果您将 test.js 脚本放在索引中，它将出现在整个应用程序中。

希望对您有所帮助

如何使用 AngularJs 将一页导航到另一页

How to navigate one page to another page using AngularJs

angularjs

angularjs-routing