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