我正在尝试实现简单的登录功能并获取
http://errors.angularjs.org/1.2.6/ $ rootScope / inprog?P0 =%24digest
异常。这是什么意思?一旦得到成功的回复,我怎样才能导航到主页
我试过了:
$location.path('/home')
$location.path('/home').apply()
$scope.$apply();
等等。
如何在整个会话期间创建会话或维护用户详细信息。 这是我的loginApp模块代码。
angular.module('loginApp', [])
.config([
'$httpProvider','$routeProvider', '$locationProvider',
function ($httpProvider, $routeProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$routeProvider.when('/login', {
templateUrl: '/login.html',
controller: LoginController
});
$routeProvider.when('/home', {
templateUrl: '/home.html',
controller: LoginController
});
$routeProvider.otherwise({ redirectTo: '/login' });
$locationProvider.html5Mode(true);
}
])
.factory('Auth',['$http',
function($http){
return {
login: function(inputs) {
return $http.post('API_URL', inputs);
}
}
}])
.controller('LoginController',['$scope', '$http', 'Auth', '$location', function($scope, $http, Auth, $location) {
$scope.loginUser = function() {
Auth.login({
email: $scope.login.email,
Password: $scope.login.password,
APIkey: 'API_KEY'
}).success(function(data) {
if (data.error) {
$scope.login.msg = "Please your username and password";
} else {
// $rootScope.user = user;
$scope.$apply(function() { $location.path("/home"); });
$scope.login.msg = "You are logged in successfully.";
}
}).error(function(data) {
$scope.login.msg = "Error in Response.";
});
},
$scope.logout = function() {
// user is logged out
// $rootScope.user = null;
}
}]);
我的HTML代码login.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" data-ng-app="loginApp"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en" data-ng-app="loginApp"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" data-ng-app="loginApp"> <![endif]-->
<!--[if gt IE 8]> <html lang="en" data-ng-app="loginApp"> <![endif]-->
<!--[if !IE]><!--><html data-ng-app="loginApp"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<!--[if lte IE 8]>
<script src="JSON/json2.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="stylesheets/style.css">
<!-- Bootstrap styles -->
<link rel="stylesheet" href="widget/stylesheets/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="wrap">
<!-- HEADER -->
<div id="header">
<ul>
<li><a href="home.html"><img src="images/home.png" alt="home"/></a></li>
<li><a href="upload.html"><img src="images/upload.png" alt="job_posting"/></a></li>
<li><a href="download.html"><img src="images/list.png" alt="download"/></a></li>
</ul>
<img src="images/logo.png" class="dialogicalogo" alt="Dialogica"/>
</div>
<!-- END HEADER -->
<!-- CONTENT -->
<div id="login" data-ng-controller="LoginController">
<div id="content_header">
<img src="images/login.png" alt="job_posting"/>
<h1>User Login</h1>
</div>
<form>
<p>{{ login.msg }}</p>
<div>
<label for="email">Email Address</label>
<input type="email" id="email" value="email" data-ng-model="login.email" onblur="if(this.value=='') this.value='email';" onfocus="if(this.value=='email') this.value='';" />
</div>
<div>
<label for="password">Password</label><a href="help.html" class="help">[Forgot?]</a>
<input type="password" id="password" value="Password" data-ng-model="login.password" onblur="if(this.value=='') this.value='Password';" onfocus="if(this.value=='Password') this.value='';" />
</div>
</form>
<a href="#" data-ng-click="loginUser()" class="button blue center">Log in</a>
<!-- END CONTENT -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="widget/js/angular.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-cookies.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js" type="text/javascript"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="widget/js/jquery.ui.widget.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- The main application script -->
<script src="widget/js/services/auth.js"></script>
<script src="widget/js/app.js"></script>
<script src="widget/js/jquery.placeholder.js"></script>
<script>
$(function() {
// Invoke the plugin
$('input, textarea').placeholder();
});
</script>
</body>
</html>
答案 0 :(得分:0)
一些事情。在你的控制器中你已经应用了scope.apply这是无关紧要的,不应该在那里使用。如果未应用scope.apply,那么您的location.path将起作用 更新:$ locationParams依赖项应该包含在$ location依赖项
之前.controller('LoginController',['$scope', '$http', 'Auth', '$routeParams','$location',function($scope, $http, Auth,$routeParams, $location) {
$scope.loginUser = function() {
Auth.login({
email: $scope.login.email,
Password: $scope.login.password,
APIkey: 'API_KEY'
}).success(function(data) {
if (data.error) {
$scope.login.msg = "Please your username and password";
} else {
// $rootScope.user = user;
// No Apply method required
//$scope.$apply(function() {
$location.path("/home");
$scope.login.msg = "You are logged in successfully.";
}
}).error(function(data) {
$scope.login.msg = "Error in Response.";
});
},
$scope.logout = function() {
// user is logged out
// $rootScope.user = null;
}
}]);
答案 1 :(得分:-1)
您可以使用$cookieStore or $cookie存储登录信息,因此在成功时您需要将用户身份验证令牌放入cookie中。
请查看以上链接,了解有关如何存储Cookie的示例。