Не удается зайти на страницу панели инструментов с помощью UI-роутера Angular.js

0

У меня есть одна проблема. Я не могу войти на страницу панели мониторинга после входа в систему, используя 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 &nbsp;|&nbsp;</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>&nbsp;</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 но страница на панели мониторинга не показывается, пока отображается индексная страница. Здесь мне нужно после успешного входа в систему на странице панели мониторинга, и я буду отображать частичный html файл внутри ui-view Пожалуйста, помогите мне.

Теги:
angular-ui-router

2 ответа

0

в то время как вы используете угловой ui-router, тогда вы должны использовать

$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="";
  }
})
Поделиться
-2

URL-адрес вашего состояния в stateProvider - это /dash not dashboard. В этом случае dashboard это ваше имя штата. Вы хотите сообщить службе определения $location чтобы доставить вас до

$location.path('dash')

Вы также захотите изменить $urlRouterProvider.otherwise чтобы указать на /dash так как метод urlRouterProvider.otherwise принимает URL-адрес в качестве параметра

$urlRouterProvider.otherwise('/dash');

Поделиться
  • 0
    Когда вы используете Angular-ui-router, вы должны использовать $ state.go ('your_state_name');
  • 0
    @TheMechanic Вы не должны использовать, но ничто не мешает вам сделать это. Вы можете использовать сервис $ location. Я согласен, использование $state предпочтительнее при использовании ui-router, но нет ничего плохого в использовании $ location. Поскольку пользователь здесь использовал службу $ location, я включил это в свой ответ.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню