[英]How to redirect a page to another using AngularJS in ExpressJS
This is the login page 这是登录页面
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!--<script src="controllers/logincontroller"></script> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>Login Page</title>
</head>
<body>
<div class="container" ng-controller="loginctrl">
<h1>Login Page</h1>
<label>UserName</label><input class="form-control" ng-model="user.name"><br><br>
<label>Password</label><input class="form-control" ng-model="user.password"><br><br>
<button class="btn btn-primary" ng-click="login()" >Login</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="controllers/logincontroller.js"></script>
<script src="angularjs/angular.js"></script>
<script src="angular-route/angular-route.js"></script>
</body>
</html>
This is Controller page
var myapp = angular.module('myApp', ['ngRoute']);
myapp.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when('/', {
controller: 'loginctrl',
templateUrl: 'login.html'
})
.when('/addusers', {
controller: 'addusersctrl',
templateUrl: 'addusers.html'
})
.otherwise({
redirectTo: '/'
});
}]);
myapp.controller('loginctrl',['$scope', '$route', '$routeParams', '$location',function($scope,$http,$location){
console.log("im a controller");
$scope.login = function() {
//console.log($scope.user);
// $http.post('/login',$scope.user).success(function(response){
// console.log(response);
// });
$http({
method: 'post',
url: '/login',
data: $scope.user
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
console.log(response.data);
//$window.location.href = 'addusers.html';
$location.path("/addusers");
}, function errorCallback(response) {
console.log(response.data);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
}]);
myapp.controller('addusersctrl',['$scope','$http',function($scope,$http){
console.log("im a controller");
$scope.login = function() {
//console.log($scope.user);
// $http.post('/login',$scope.user).success(function(response){
// console.log(response);
// });
$http({
method: 'post',
url: '/login',
data: $scope.user
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
console.log(response.data);
//$window.location.href = 'addusers.html';
}, function errorCallback(response) {
console.log(response.data);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
}]);
Whenever I am trying to run this code I am getting 每当我尝试运行此代码时,我都会得到
Angular.js error angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/ $injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.1%2Fangular.min.js%3A21%3A332)
Angular.js错误angular.js:38未捕获的错误:[$ injector:modulerr] http://errors.angularjs.org/1.6.1/ $ injector / modulerr?p0 = myApp&p1 = Error%3A%2…ogleapis.com %2Fajax%2Flibs%2Fangularjs%2F1.6.1%2Fangular.min.js%3A21%3A332)
You have a problem in dependency injection (first controller): 您在依赖项注入 (第一个控制器)中遇到问题:
myapp.controller('loginctrl', ['$scope', '$route', '$routeParams', '$location',
function($scope, $http, $location) {
You didn't inject the same things. 您没有注入相同的东西。 Change it to:
更改为:
myapp.controller('loginctrl', ['$scope', '$route', '$http', '$routeParams', '$location',
function($scope, $route, $http, $routeParams, $location) {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.