gpt4 book ai didi

javascript - Angularjs ngRoute 不工作

转载 作者:行者123 更新时间:2023-12-03 07:46:59 25 4
gpt4 key购买 nike

我有一个索引页面(登录),其中存在注册链接,因此在重定向时我尝试加载 Controller ,但它没有加载,控制台中也没有错误。

我的主页正在加载 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.");
};
}

]
);

最佳答案

您错过了在页面上添加 ng-view 指令,以便加载在 ng-view< 内的 $routeProvider 上配置的模板和 Controller 指令元素。

<div ng-view></div>

关于javascript - Angularjs ngRoute 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35163219/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com