2017-01-17 14 views
0

私はAngularJSを初めて使用しています。<ui-view>デフォルトのテンプレートが表示されません

私はmavenとSpring MVC + AngularJSを使用しています。 AngularJSの前はSpringフォームを使用していましたので、SpringフォームからAngularJSに移行しています。

私が直面している問題は、私は例の後にui-routerを使用することを試していますが、私の場合、作成したテンプレートはデフォルトのテンプレートとして全く表示されません。

だから私はここに

angular.module('electronicaDonPepe', ['ui.router']) 

    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){ 

     $urlRouterProvider.otherwise('/'); 

     $stateProvider 
      .state('login',{ 
       url: '/', 
       templateUrl: 'http://localhost:8585/electronicaDonPepe/resources/templates/login.html', 
       controller: 'LoginController' 
      }); 
    }]); 

私のモジュールを持ってその後、私のコントローラ:私はエラーを持たないよ

<!DOCTYPE html"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 

<!-- Jquery --> 
<script src="http://localhost:8585/electronicaDonPepe/resources/js/jquery-3.1.1.min.js"></script> 

<!-- AngularJS --> 
<script type="text/javascript" 
    src="http://localhost:8585/electronicaDonPepe/resources/js/angular.min.js"></script> 


<!-- Complementos JS para Bootstrap --> 
<script 
    src="http://localhost:8585/electronicaDonPepe/resources/js/bootstrap.min.js"></script> 

<!-- Bootstrap CSS --> 
<link rel="stylesheet" 
    href="http://localhost:8585/electronicaDonPepe/resources/css/bootstrap.min.css"> 

<!-- Mis CSS --> 
<link rel="stylesheet" 
    href="http://localhost:8585/electronicaDonPepe/resources/css/edp.css"> 

<!-- Complementos para AngularJS --> 
<script type="text/javascript" 
    src="http://localhost:8585/electronicaDonPepe/resources/js/angular-ui-router.js"> 

</script> 

<title>Electronica Don Pepe</title> 
</head> 
<body ng-app="electronicaDonPepe"> 
    <div class="container text-center"> 
     <h1>ELECTRONICA</h1> 
     <br> 
     <h2>DON PEPE</h2> 
     <br> 
     <hr> 
     <br> 

    </div> 

    <ui-view></ui-view> 

    <div class="container text-center"> 
     <a href='http://localhost:8585/electronicaDonPepe/about.html'>Acerca 
      de</a> 
    </div> 

</body> 

<!-- Mis archivos AngularJS --> 
<script type="text/javascript" 
    src="http://localhost:8585/electronicaDonPepe/resources/js/app.js"></script> 

<script type="text/javascript" 
    src="http://localhost:8585/electronicaDonPepe/resources/js/LoginController.js"></script> 

</html> 

angular.module('electronicaDonPepe', []) 
    .controller('LoginController', ['$scope', '$http', '$state', '$stateParams', 
     function($scope, $http, $state, $stateParams) { 
      $state.go('login'); 

      $scope.save = function(){ 
       var param = { 
         dni: $scope.usuario.dni, 
         contrasenia: $scope.usuario.contrasenia 
       }; 

       $http.post("http://localhost:8585/electronicaDonPepe/login/check", param).then(function(){ 
        $state.go('login'); 
       }); 
      }; 
    }]); 

その後、私は私の単純なHTMLコードを持っていますまったく。 AngularJS batarangをダウンロードしましたが、何もデバッグできません。

<div class="container"> 

    <form class="form-signin"> 
     <label for="inputEmail" class="sr-only">Usuario</label> 
     <input ng-model="usuario.dni" type="text" id="inputText" class="form-control" placeholder="Usuario" required="required" autofocus="autofocus"> 


     <label for="inputPassword" class="sr-only">Contraseña</label> 
     <input ng-model="usuario.contrasenia" type="password" id="inputPassword" class="form-control" placeholder="Contraseña" required="required"> 

     <div class="checkbox"> 
      <label> <input type="checkbox" value="remember-me"> 
       Recordar usuario 
      </label> 
     </div> 
     <button ng-click="login()" class="btn btn-lg btn-primary btn-block" type="submit">Iniciar Sesión</button> 
    </form> 
</div> 

私が欠けているコードで何かがあると思う:

私はほとんど忘れてしまった

、ここではテンプレートです。任意のアイデア/助けを感謝します。前もって感謝します。

答えて

1
angular.module('electronicaDonPepe', []) 

これは、すでに定義済みのモジュールを再定義します。したがって、あなたのモジュールはもはやui-routerに依存せず、この行が実行された後ではもはや状態定義を含んでいません。

がすでに定義されたモジュールへの参照を取得するには、構文は

angular.module('electronicaDonPepe') 

。注:私もそれは非常に奇妙見つけることのコントローラである、あなたのコントローラーでやっている最初のもの、ログイン状態は、ルータにログイン状態に行くように指示することです。コントローラーがインスタンス化されている場合は、がすでにのログイン状態になっています。

また、どこでもハードコードすると、自分のマシン以外の場所からアプリケーションにアクセスすることが非常に困難になります。

+0

あなたはいつものとおりです。私は自分自身を説明する必要はありませんが、私はしたいと思うので、私はルータにログインするように指示します。私はそれを強制的に動作させようとしていました。私は自分のコードを表示する前にその部分を削除することを認識していませんでした。ハードコーディングされたhttpについては、これは高度なプログラミングIIと呼ばれる大学の課題のプロジェクトです。 AngularJSの使用を選択した場合、私の教師はスクリプトレットの使用を避けるように私に尋ねました。その前に私は<%= request.getContextPath()%>を使うことができましたが、別のオプションは表示されません。あなたが私にお勧めできるものがありますか? –

関連する問題