Angularjs ngRoute 不工作

Question

我有一个索引页面（登录），其中存在寄存器 link，因此在重定向时我正在尝试加载控制器，但它没有加载，控制台中也没有错误。

我的主页正在加载 URL : http://localhost:8081/WebServices/ 单击resgiter后，我试图将其重定向到：http://localhost:8081/WebServices/#/regsiter

不胜感激。

我的 index.html 页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login Page</title>

<script type="text/javascript" src= "/WebServices/js/angular.min.js"></script>
<script type="text/javascript" src= "/WebServices/js/angular-resource.min.js"></script>
<script type="text/javascript" src= "/WebServices/js/angular-route.min.js"></script>
<script type="text/javascript" src= "/WebServices/js/friendsCtrl.js"></script>
<script type="text/javascript" src= "/WebServices/js/friendsService.js"></script>
<script type="text/javascript" src= "/WebServices/js/loginCtrl.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> 
</head>

<body>
   <div ng-app="loginApp">

      <div class="col-md-3">

    <h2>Login</h2>
    <form name="loginform" role="loginform" ng-submit="login()">

        <div class="form-group" ng-class="{ 'has-error':loginform.username.$dirty && loginform.username.$error.required }" >
            <label for="username">Username</label>
            <input type="text" name="username" class="form-control" ng-model="user.username" required />
            <span ng-show="loginform.username.$dirty && loginform.username.$error.required " class="help-block">Username is required</span> 
        </div>

        <div class="form-group" ng-class="{ 'has-error':loginform.username.$dirty && loginform.username.$error.required }">
            <label for="Password">Password</label>
            <input type="password" name="password" class="form-control" ng-model="user.password" required />
            <span ng-show="loginform.password.$dirty && loginform.password.$error.required " class="help-block">Password is required</span>
        </div>

        <div class="form-actions">
            <button type ="submit" class="btn btn-primary" ng-disabled="loginform.$invalid">Login</button>
            <a href="#/regsiter" class="btn btn-link">Resgiter</a>
        </div>


    </form>
</div>

</div> 
</body>
</html>

loginCtrl.js 文件

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

loginApp.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/' , { 
            templateUrl:'index.html',
            controller: 'loginCtrl'
        })
        .when('/regsiter' , { 
            templateUrl:'registration_ang.html',
            controller: 'loginCtrl'
        })
        .otherwise({
            redirectTo:'/'
        });

}]);


loginApp.controller('loginCtrl',['$scope',function($scope){
    console.log("controller loaded");
    alert("controller loaded");
    $scope.login=function(){
        console.log("inside loginCtrl : login function");
        alert("checking login.");
    };
}

]
);

Answer 1

您错过了在页面上添加 ng-view 指令，这样会在 ng-view 指令元素内加载在 $routeProvider 上配置的模板和控制器。

<div ng-view></div>

Angularjs ngRoute 不工作

Angularjs ngRoute is not working

javascript

routing

angularjs

angular-routing

ngroute