Angular Js导航问题
Posted
技术标签:
【中文标题】Angular Js导航问题【英文标题】：Angular Js navigation issue 【发布时间】：2014-09-02 22:19:07 【问题描述】：我正在尝试实现简单的登录功能并获得
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" /></a></li>
<li><a href="upload.html"><img src="images/upload.png" /></a></li>
<li><a href="download.html"><img src="images/list.png" /></a></li>
</ul>
<img src="images/logo.png" class="dialogicalogo" />
</div>
<!-- END HEADER -->
<!-- CONTENT -->
<div id="login" data-ng-controller="LoginController">
<div id="content_header">
<img src="images/login.png" />
<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>
【问题讨论】：
一个问题，你在使用 angular-ui-router 吗？ 不...但刚才我把 ut 放在我的代码中..它正在抛出 javascript 异常 更新了我的代码..它正在抛出 javascript 异常 还有一件事，是否必须包含 标签才能使其工作？我没有将它包含在我的 HTML 中 是的，这是强制性的...否则视图将显示在哪里？？ 【参考方案1】：几件事。在您的控制器中，您应用了 scope.apply ，这是无关紧要的，不应该在那里使用。其次，如果未应用 scope.apply，您的 location.path 将起作用 更新：$routeParams 依赖应该包含在 $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;
]);
【讨论】：
你需要提供一个 routeProvider 来指定你的控制器和你的路由 url /home 的模板。看看这里docs.angularjs.org/api/ngRoute/provider/$routeProvider 看看 angular-ui-router 以及 github.com/angular-ui/ui-router （我个人的选择，如果应用你可以通过 $state.go('home') 路由到该州并完成。跨度> @user1653773：看到你的紧迫性，得到了一个教程 plunker，它将真正帮助你想象 Angular 是如何工作的：plnkr.co/edit/UkHDqFD8P7tTEqSaCOcc?p=preview希望它对你有帮助 将尝试同时查看上面提供的链接，希望对您有所帮助 好的，谢谢 :)...我正在研究它..如果可能的话，试着找出一些时间来帮助我【参考方案2】：您可以使用$cookieStore or $cookie 存储登录信息，因此您需要将用户身份验证令牌放入cookie 中。
请查看上面的链接以获取有关如何存储 cookie 的示例。
【讨论】：
你不需要$apply，只需使用$location.path("/home"); 你想看看我的代码吗？我在 Angular JS 中非常陌生..可能是我犯了一些愚蠢的错误。我真的需要一些帮助来实施它。如果您同意，我们可以从团队查看器进行连接。 我也试过了...... $routeprovider 本身正在制造问题，它引发了一些 javascript 异常......我在我的 HTML 中导入了 angular-route.js，除了我必须做任何其他事情来使它工作？ 你能设置一个最好的 plunker 吗:) 其实是保密代码..我不能上传到任何地方:(以上是关于Angular Js导航问题的主要内容，如果未能解决你的问题，请参考以下文章