0
1つの問題があります。 Angular.jsを使用してログインした後、ダッシュボードページに入ることはできません。私は以下のコードを説明しています。Angular.js UI-routerを使用してダッシュボードページに入ることができません
の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>
上記のページには、私のログインpage.Whenのユーザーは、このページが来ている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を使用していますここにいくつかのmenu.Soが含まれているダッシュボードページに入る必要があるユーザーをログインした後。
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'
})
})
は、マイダッシュボードページは以下のとおりです。ここで成功したURLは、このlocalhost/admin/#/dashboardのように来ているが、ダッシュボードページはまだインデックスページが表示されて来ていませんログインした後
<!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>
。ここで私は成功したログイン後ダッシュボードページが来る必要があります私はui-viewの中に部分的なHTMLファイルをレンダリングする必要があります。私を助けてください。
です。 –
@ TheMechanicあなたは**使用する**がありませんが、あなたがそれを行うのを妨げるものは何もありません。 $ locationサービスを使用することができます。私は同意します.Ui-routerを使うときは '$ state'を使うのが望ましいですが、$ locationを使うのには何も問題ありません。ここのユーザーは$ locationサービスを使用していたので、私はそれを私の回答に含めました。 –
しかし、良い習慣ではありません –