2017-10-09 7 views
0

J'ai utilisé des graines angulaires avec un satellite. J'ai commencé l'application avec la commande: npm installer et exécuter le projet sur le navigateur en tapant: http://localhost:8080/app/#/auth, mais je vois que le navigateur affiche [view1] [view2] Angular application de semences: v0.1. J'ai utilisé les codes suivants dans app.js:Pourquoi l'application Angular seed montrant l'application Angular seed: 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'); 
}]); 

J'ai utilisé les codes ci-dessous pour auth.js dans les "view_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); 
      }) 
     }); 
    } 
}]); 

Le fichier de vue (auth.html) sous view_auth est ci-dessous:

<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> 

`

Mon index.html ressemble:

<!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>

Mais après l'exécution du projet, la vue apparaît comme comme: enter image description here

J'ai besoin pour afficher l'écran comme: https://i0.wp.com/baljeetsingh.in/wp-content/uploads/2015/11/2015-11-13_22-24-06.png?ssl=1

Toute aide appréciée.

Répondre

0

Enfin, j'ai résolu ce problème. Je l'ai remplacé les codes <div ng-view></div> dans index.html

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