Question

我是棱角分明的新手。我开发了一个登录应用程序。我创建了一个登录表单，其中有登录按钮。单击我想要的登录按钮导航到home.html页面我已经使用了$ location.path（'/ home'），但它被附加在现有网址但没有显示出来。可以有人帮助我用这个

Index.js：在这个ihave定义的路由中使用routeconfig。

     var myapp = angular                 
           .module("mainModule", ['ngRoute'])
                .config(function ($routeProvider, $locationProvider) {
                    $routeProvider

                        .when("/login", {
                        templateUrl: "Templates/login.html",
                        controller: "LoginController",
                        controllerAs: "loginctrl",
                        caseInsensitiveMatch: true
                        })

                      .when("/Home", {
                          templateUrl: "Templates/Home.html",
                          controller: "HomeController",
                          controllerAs: "Homectrl",
                          caseInsensitiveMatch: true
                      })
                })
                .controller("LoginController", function ($scope, $location) {
                    $scope.username = "";
                    $scope.password = "";
                    $scope.Login = function () {
                        if ($scope.username == "a" || $scope.password == "a") {
                            alert("SuccessFully Logged in")
                             $location.path("/Home");

                        }
                        //alert('Hello'+$scope.username+""+$scope.password);
                    }
                    })
            .controller("HomeController", function ($scope) {


            })

的login.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="mainModule">
<head>
    <title></title>
    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/angular-route.js"></script>
    <script src="../index.js"></script>

</head>
<body>
    <div ng-controller="LoginController">
        <table>
            <tbody>
                <tr>
                    <th>UserName:</th>
                    <th><input type="text" value="" ng-model="username" /></th>
                </tr>
                <tr>
                    <th>Password:</th>
                    <th><input type="password" value="" ng-model="password" /></th>
                </tr>
                <tr>
                    <th><button name="Submit" ng-click="Login()"> Submit</button>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

home.html的

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml ng-app=" mainmodule">
<head>
    <title></title>
    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/angular-route.js"></script>
    <script src="../index.js"></script>
</head>
<body ng-controller="HomeController">
    hi
</body>
</html>

生成的网址为：http://localhost:40613/Templates/Login.html#/Home 所以，Home.html的路线是按照上面而不是http://localhost:40613/Templates/Home.html生成的，请帮我解决这个问题

Answer 1

一些问题：

包括otherwise以配置路由
部分不应包含<!doctype html>定义
包括<div ng-view>
要查看正确的网址，请检查 html5mode

以下是工作代码：http://jsbin.com/zemofiyicu/edit?html,output

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.js"></script>

    <script>

var myapp = angular                 
           .module("mainModule", ['ngRoute'])
                .config(function ($routeProvider) {
                    $routeProvider

                      .when("/login", {
                        templateUrl: "login.html",
                        controller: "LoginController"
                        })

                      .when("/home", {
                          templateUrl: "home.html",
                          controller: "HomeController"
                      })
                      .otherwise({ redirectTo: '/login' });
                })
            .controller("LoginController", function ($scope, $location) {
                    $scope.username = "";
                    $scope.password = "";
                    $scope.Login = function () {
                        if ($scope.username == "a" || $scope.password == "a") {
                            alert("SuccessFully Logged in")
                             $location.path("home");

                        }
                    }
                    })
            .controller("HomeController", function ($scope) {

                $scope.message = "It works";

            })  

    </script>
</head>
<body ng-app="mainModule">

    <a href="#/home">home</a>
    <a href="#/login">login</a>

    <div ng-view></div>

    <script type="text/ng-template" id="home.html" >
        <h1>Home</h1>
        <h2>{{ message }}</h2>
    </script>   

    <script type="text/ng-template" id="login.html" >
        <table>
            <tbody>
                <tr>
                    <th>UserName:</th>
                    <th><input type="text" value="" ng-model="username" /></th>
                </tr>
                <tr>
                    <th>Password:</th>
                    <th><input type="password" value="" ng-model="password" /></th>
                </tr>
                <tr>
                    <th><button name="Submit" ng-click="Login()"> Submit</button>
                </tr>
            </tbody>
        </table>

    </script>
</body>
</html>

从控制器导航到角度js中的其他页面

1 个答案: