템플릿은 ui-view에서로드되지 않습니다.

나는 물론 angularjs에서 작업 중이며, 다음은 index.php (로그인 한 후) 및 mainApp.js (로그인 한 후 기본 응용 프로그램)입니다. 여기서 현재 세션이 유효한지 여부를 확인하기 위해 세션 저장소를 사용하고 있습니다. 또한 로그인 한 후 상위 페이지, 즉 index.php로 렌더링 된 상위 페이지가 탐색 막대와 함께 표시되지만 템플리트는 찾을 위치가 없습니다. Google 개발 도구는 템플릿이 성공적으로로드되었음을 보여 주며 (예 : 상태 200) 네트워크 탭에서 템플릿을 볼 수 있습니다. 그러나 탐색 막대에서 선택하는 것과 관계없이 템플릿이 렌더링되지 않습니다.템플릿은 ui-view에서로드되지 않습니다.

index.php를

<!-- main page --> 
<?php 
    $version = time(); 
?> 
<!DOCTYPE html> 
<html> 
<head> 

    <!-- CSS (load bootstrap and our custon css files) --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <style> 
    .navbar { 
     border-radius: 0px; 
    } 

    ul { 
     list-style-type: none; 
    } 
    </style> 

    <!-- JS (load angular, ui-router and our custom js file) --> 
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 

    <script src="js/mainApp.js"></script> 


</head> 
<!-- NAVIGATION --> 
<body> 
<div ng-app="mainApp"> 

    <nav class="navbar navbar-inverse" role="navigation"> 
     <div class="navbar-header"> 
      <a class="navbar-brand"><strong>DASHBOARD</strong></a> 
     </div> 

     <ul class="nav navbar-nav navbar-left"> 
      <li><a ui-sref="home">Home</a></li> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown">Client 
       <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a ui-sref="addClient">Add Client</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown">Service 
       <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a ui-sref="addService">Add Service</a></li> 
       </ul> 
      </li> 
      <li><a ui-sref="about">About</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a ui-sref="logout">Logout</a></li> 
     </ul> 
    </nav> 
</div> 
<!-- MAIN CONTENT --> 
<div class="container"> 
    <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT --> 
    <div ui-view></div> 

</div> 
</body> 
</html>

mainApp.js

var mainApp = angular.module('mainApp', ['ui.router']); 

mainApp.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/'); 

    $stateProvider 

     // HOME STATES AND NESTED VIEWS ======================================== 

     .state('home', { 
      url:'/', 
      templateUrl: function(){ 
       if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){ 
        return 'templates/login.html'; 
       } 
       else { 
        return 'templates/home.html'; 

       } 
      } 
     }) 

     .state('addClient', { 
      url:'/addClient', 
      templateUrl: function(){ 
       if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){ 
        return 'templates/login.html'; 
       } 
       else{ 
        return 'templates/addClient.html'; 
       } 
      } 
     }) 

     .state('addService', { 
      url:'/addService', 
      templateUrl: function(){ 
       if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){ 
        return 'templates/login.html'; 
       } 
       else{ 
        return 'templates/addService.html'; 
       } 
      } 
     }) 

     .state('about', { 
      url: '/about', 
      templateUrl: function(){ 
       if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){ 
        return 'templates/login.html'; 
       } 
       else { 
        return 'templates/about.html'; 
       } 
      } 
     }) 

     .state('logout', { 
      url: '/login', 
      templateUrl: function(){ 
       sessionStorage.clear(); 
       return 'templates/login.html'; 
      } 
     }); 

});

이 세션을 사용하는 대신 더 좋은 방법이고 또한 나에게이 문제를 해결하는 데 도움이 있다면 말씀 해주십시오. 고맙습니다.

P. 사이드 노트에서, 저는 angularjs의 초보자입니다. 로그인을 가장 효율적으로 구현하는 방법을 안내 할 수 있다면, 성능과 보안이 모두 현명합니다.

출처

2016-07-18 Karan

-1

ui-view 대신 ng-view를 사용하여 if 그게 차이를 만드는, 그것은 내 경우에 도움이됩니다.

출처

2016-07-18 11:34:25 nagrom97

모건은 다양한 파일에 관련된 변경 사항을 반영해야하므로 정신이 없습니다. – Karan

이 상황을 처리하는 한 가지 방법은 다음과 같이 인터셉터를 추가하는 것입니다.

mainApp.config(function ($httpProvider) { 
     $httpProvider.interceptors.push('loginInterceptor'); 
    }).factory('loginInterceptor', function ($q, $window,$rootScope) { 
     return { 
      'response': function(response) { 
       if(sessionStorage.username!=="karan" || sessionStorage.password!=="123456"){ 
        $rootScope.$broadcast("notLoggedIn",{statusCode : 'NOT_LOGGED_IN'}); 
       } 
       else{ 
        return response; 
       } 

      }, 
      'responseError': function(rejection) { 
       return $q.reject(rejection); 
      } 
     } 
    })

그런 다음 메시지를 처리 'notLoggedIn'이다, 당신은 모든 주 정의의 로그인 상태를 확인 결국하지 않습니다이 방법의

mainApp.run(function($state,$rootScope){ 
     $rootScope.$on("notLoggedIn",function(event,message){ 
     $state.transitionTo('login');//Define a state with template url 'templates/login.html'; 
    }); 
})

의 장점을 다음과 같이.

출처

2016-07-18 13:51:06 Mathews

아니, 작동하지 않았다. :( – Karan

왜 작동하지 않습니까? 오류가 있습니까? – Mathews

템플릿은 ui-view에서로드되지 않습니다.

답변

관련 문제