2017-10-09 10 views
0

나는 모서리 모양의 인공위성을 사용했습니다. npm을 설치하고 브라우저에서 프로젝트를 실행하여 http://localhost:8080/app/#/auth을 입력하면 브라우저가 표시됩니다. [view1] [view2] Angular seed app : v0.1. 나는 app.js에 다음 코드를 사용했다 : 나는 "view_auth"내 auth.js을 위해 아래의 코드를 사용했다이유 Angular seed app에 Angular seed app이 표시되는 이유 : v0.1

'use strict'; 
angular.module('myApp', [ 
'ui.router', 
'myApp.view2', 
'myApp.auth', 
'myApp.version', 
'satellizer' 
]). 
config(['$stateProvider', '$urlRouterProvider', '$authProvider', 
function($stateProvider, $urlRouterProvider, $authProvider) { 
$authProvider.loginUrl = 'http://localhost:8000/adminlogin/showLogin'; 
$urlRouterProvider.otherwise('/auth'); 
}]); 

:

'use strict'; 
angular.module('myApp.auth', []) 
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, 
$urlRouterProvider) { 
$stateProvider 
.state('auth', { 
url: '/auth', 
views: { 
    'jokesContent': { 
    templateUrl: "view_auth/auth.html", 
    controller: 'AuthCtrl as auth' 
    } 
} 
}) 
}]) 
.controller('AuthCtrl', ['$auth', '$state', '$http', '$rootScope', function($auth, $state, $http, $rootScope) {` 

    var vm = this; 

    vm.loginError = false; 
    vm.loginErrorText; 

    vm.login = function() { 

     var credentials = { 
      email: vm.email, 
      password: vm.password 
     } 

     $auth.login(credentials).then(function() { 
      $http.get('http://localhost:8000/api/v1/authenticate/user').success(function(response){ 
       var user = JSON.stringify(response.user); 
       localStorage.setItem('user', user); 
       $rootScope.currentUser = response.user;     
       $state.go('jokes'); 
      }) 
      .error(function(){ 
       vm.loginError = true; 
       vm.loginErrorText = error.data.error; 
       console.log(vm.loginErrorText); 
      }) 
     }); 
    } 
}]); 

뷰 파일 (auth.html) 아래보기 _auth은 다음과 같습니다.

그러나 프로젝트를 실행 한 후

<!DOCTYPE html> 
 
<!--[if lt IE 7]>  <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
 
<!--[if IE 7]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]--> 
 
<!--[if IE 8]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]--> 
 
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]--> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>My AngularJS App</title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"> 
 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"> 
 
    <link rel="stylesheet" href="app.css"> 
 
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script> 
 
</head> 
 
<body> 
 
    <ul class="menu"> 
 
    <li><a href="#!/view1">view1</a></li> 
 
    <li><a href="#!/view2">view2</a></li> 
 
    </ul> 
 

 
    <!--[if lt IE 7]> 
 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
 
    <![endif]--> 
 

 
    <div ng-view></div> 
 

 
    <div>Angular seed app: v<span app-version></span></div> 
 

 
    <!-- In production use: 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
 
    --> 
 
    <script src="bower_components/angular/angular.js"></script> 
 
    <script src="bower_components/angular-route/angular-route.js"></script> 
 
    <script src="app.js"></script> 
 
    <script src="view1/view1.js"></script> 
 
    <script src="view2/view2.js"></script> 
 
    <script src="components/version/version.js"></script> 
 
    <script src="components/version/version-directive.js"></script> 
 
    <script src="components/version/interpolate-filter.js"></script> 
 
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
 
    <script src="view_auth/auth.js"></script> 
 
    <!--<script src="view_jokes/jokes.js"></script>--> 
 
    <script src="bower_components/satellizer/dist/satellizer.js"></script> 
 
</body> 
 
</html>
은보기가 아니라 같이 나타납니다 :
<div class="container"> 
<div class="row"> 
    <div class="col-md-4 col-md-offset-4"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> <strong class="">Login</strong> 

      </div> 
      <div class="panel-body"> 
       <form class="form-horizontal" role="form"> 
        <div class="form-group"> 
         <label for="inputEmail3" class="col-sm-3 control-label">Email</label> 
         <div class="col-sm-9"> 
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email" required="" ng-model="auth.email"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputPassword3" class="col-sm-3 control-label">Password</label> 
         <div class="col-sm-9"> 
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password" required="" ng-model="auth.password"> 
         </div> 
        </div> 
        <div class="form-group last"> 
         <div class="col-sm-offset-3 col-sm-9"> 
          <button type="submit" class="btn btn-success btn-sm" ng-click="auth.login()">Sign in</button> 
          <button type="reset" class="btn btn-default btn-sm">Reset</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

`

내 index.html을 같이 보인다 enter image description here

내가 필요 같은 화면을 표시하려면 : https://i0.wp.com/baljeetsingh.in/wp-content/uploads/2015/11/2015-11-13_22-24-06.png?ssl=1

도움을 주시면 감사하겠습니다.

답변

0

마지막으로이 문제를 해결했습니다. 나는

<div ui-view="jokesContent"></div>

로 된 index.html에 코드를 <div ng-view></div> 교체