0
kann ich nicht in Dashboard-Seite eingeben Ich habe ein Problem. Ich kann die Dashboard-Seite nach der Anmeldung nicht öffnen, während Angular.js verwendet wird. Ich erkläre meinen Code unten.Mit 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>
Die obige Seite ist mein Login page.When Benutzer localhost/admin/ geben wird diese Seite kommt. Die Controller-Datei ist unten angegeben.
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="";
}
})
Nach einer erfolgreich verlaufenen Benutzer anmelden sollten in die Dashboard-Seite bekommen, die hier einige menu.So enthält i ui.router bin mit dem Teilansicht zu machen.
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'
})
})
ist mein Dashboardseite unten.
<!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>
Hier nach erfolgreich die URL anmelden kommt wie diese localhost/admin/#/dashboard aber die Dashboard-Seite kommt nicht noch die Index-Seite angezeigt wird. Hier muss ich nach erfolgreichem Login die Dashboard Seite kommen und dort werde ich partielle HTML Datei innerhalb ui-view rendern. Bitte helft mir.
Während Sie Angular-ui-Router Sie haben state.go $ verwenden ('your_state_name'); –
@TheMechanic Sie müssen ** nicht ** verwenden, aber nichts hindert Sie daran. Sie können den $ location-Dienst verwenden. Ich stimme zu, die Verwendung von '$ state' ist vorzuziehen, wenn man den UI-Router benutzt, aber es ist nichts falsch daran, $ location zu verwenden. Da der Benutzer den $ location-Dienst verwendet hat, habe ich diesen in meine Antwort aufgenommen. –
Aber keine gute Praxis –