无法使用Angular.js UI路由器进入仪表板页面
Can not enter into dashboard page using Angular.js UI-router
使用Angular.js登录后无法进入仪表板页面。我在下面提供了我的代码。
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ABSadmin">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABSClasses | Admin Panel</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,700,800' rel='stylesheet' type='text/css'>
<script src="js/angularjs.js"></script>
<script src="js/angularuirouter.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/route.js"></script>
</head>
<body style="background:url(images/533240312.jpg)" ng-controller="loginController">
<div>
<div class="logbg">
<span ng-show="validateMessage" style="color:#C0F">{{message}}</span>
<h3>Login to Admin Panel</h3>
<form name="frmlogin" id="frmlogin" class="login-form">
<div class="input-box input-left">
<label for="username">User Name:</label><br>
<input type="text" id="username" name="username" class="required-entry input-text" ng-model="u_name" ng-keypress="clearField();">
</div>
<div class="input-box input-right">
<label for="login">Password:</label><br>
<input type="password" id="pwd" name="pwd" class="required-entry input-text" ng-model="u_password" ng-keypress="clearField();">
</div>
<input type="button" value="Login" name="login" id="login" class="log" ng-click="adminLogin();" />
</form>
</div>
</div>
<script src="controller/loginController.js"></script>
</body>
</html>
上面的页面是我的登录页面。当用户键入localhost/admin/时，此页面即将出现。控制器文件如下所示。
var login=angular.module('ABSadmin',[]);
login.controller('loginController',function($scope,$http,$location){
//console.log('hii');
$scope.adminLogin=function(){
if($scope.u_name==null || $scope.u_name==''){
$scope.validateMessage=true;
$scope.message="Please add user name";
}else if($scope.u_password==null || $scope.u_password==''){
$scope.validateMessage=true;
$scope.message="Please add Password";
}else{
$location.path('dashboard');
}
}
$scope.clearField=function(){
$scope.validateMessage=false;
$scope.message="";
}
})
成功登录后，用户应该进入包含一些菜单的仪表板页面。所以这里我使用ui.router来渲染局部视图。
route.js:
var Dahboard=angular.module('dasboard',['ui.router']);
Dahboard.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
Dahboard.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise('dashboard');
$stateProvider
.state('dashboard', {
url: '/dash',
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
})
})
我的仪表板页面如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="dasboard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABSClasses | Admin Panel</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script src="/js/angularjs.js"></script>
<script src="/js/angularuirouter.js"></script>
<script src="/js/route.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<img src="../images/absclasses-logo-black.png" alt="" />
<div style="color:#FFF; font-size:20px; vertical-align:middle; float:left; margin-top:21px;font-weight:bold; ">Admin Panel</div>
<div class="header-right-pan" >
<ul>
<li>
<a href="#">Logged in as Admin | </a>
</li>
<li>
<a href="logout.php"><span class="logout" style="color:#fcce77;text-decoration: underline;" >Log Out</span></a>
</li>
</ul>
</div>
</div>
<nav>
<ul style="width:100%;">
<li><a href=""></a>
<ul>
<li>
<a href="javascript:void(0)" style="width:110px;"></a>
<ul class="submenu">
<li><a href="" style="display: block; margin-top: 0px; padding: 4px 15px; width:160px;"> Page</a></li>
<li><a href="" style="display: block; margin-top: 0px; padding: 4px 15px; width:160px;"> Syllabus</a></li>
<li><a href="" style="display: block; margin-top: 0px; padding: 4px 15px; width:160px;">Exam Info</a></li>
</ul>
</li>
<li><a href=""></a></li>
</ul>
</li>
</ul>
</nav>
<div ui-view>
<div class="dashbord-body">
<div>
<h5> </h5>
</div>
<div style="height: 300px; margin: 100px auto; text-align: center;color: #0071b1; font-size: 36px;">Welcome To Admin Panel </div>
</div>
</div>
<div class="dashbord-body-footer">
<p class="" style="margin-top: 10px; text-align:center;">
<img src="images/varien_logo.png" width="19" height="18" alt="" />
Copyright © 2015 OdiTek Solutions. <a target="_blank" href="http://www.oditeksolutions.com" > www.oditeksolutions.com</a>
</p>
</div>
<script src="js/default.js"></script>
<script src="controller/dashboardController.js"></script>
</body>
</html>
在成功登录后，url会像localhost/admin/#/dashboard一样出现，但仪表板页面不会出现，索引页面仍在显示。这里我需要在成功登录后，仪表板页面应该来了，在那里我将在ui-view中呈现部分html文件。
当你使用angular ui路由器时，你必须使用
$state.go('your_state_name');
而不是$location.path('dashboard');
这是你的片段
var login=angular.module('ABSadmin',[]);
login.controller('loginController',function($scope,$http,$location, $state){
$scope.adminLogin=function(){
if($scope.u_name==null || $scope.u_name==''){
$scope.validateMessage=true;
$scope.message="Please add user name";
}else if($scope.u_password==null || $scope.u_password==''){
$scope.validateMessage=true;
$scope.message="Please add Password";
}else{
$state.go('dashboard');
}
}
$scope.clearField=function(){
$scope.validateMessage=false;
$scope.message="";
}
})
stateProvider中您所在州的url是/dash，而不是dashboard。在这种情况下，dashboard是您的州名称。你会想告诉$location服务带你去
$location.path('dash')
您还需要将$urlRouterProvider.otherwise更改为指向/dash，因为urlRouterProvider.otherwise方法将url作为参数
$urlRouterProvider.otherwise('/dash');
相关文章：
- 使用外部数据创建仪表板(谷歌电子表格）-JavaScript
- Javascript库创建类似heroku仪表板的应用程序
- crm 2011使用javascript在仪表板上隐藏和显示子网格
- Mscrm 2011仪表板通过JavaScript或插件增加行数
- 谷歌图表可视化仪表板数据源问题
- 如何在谷歌仪表板表中为 TR 分配值
- 如何将面板添加到仪表板的特定列中
- 有角度的材料和仪表板
- 仪表板中的小部件和设置需要一个可维护的Javascript回发模式
- AngularJS在初始化仪表板控制器之前使用$htttp获取仪表板设置
- 谷歌图表:如何使用新材料图表的仪表板
- AngularJS仪表板和身份验证
- Ajax 请求仪表板页面上的浏览器崩溃
- 自定义 Umbraco 仪表板中的 JQuery UI Datepicker 和 Angular JS
- 谷歌可视化图表/仪表板无法完全绘制
- 在我的仪表板中，用户可以查看自己的分析
- 使用 PHP、JSON 和 google.visualization.DataTable 创建 google 仪表板图表
- 虚线仪表板链接小部件
- 仪表板中可编辑的图片和文本
- 无法使用Angular.js UI路由器进入仪表板页面
