<ui-view>没有显示默认模板

时间:2017-01-17 23:08:37

标签: angularjs maven angular-ui-router

我是AngularJS的新手。

我正在使用maven和Spring MVC + AngularJS。在AngularJS之前,我曾经使用Spring表单,所以我现在从Spring表单迁移到AngularJS。

我面临的问题是我试图使用ui-router跟随一个例子但在我的情况下,我创建的模板根本不显示为默认模板。 / p>

所以我的模块在这里

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'
            });
    }]);

然后我的控制器:

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代码:

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

我完全没有错误。我下载了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 个答案:

答案 0 :(得分:1)

$data['response']['avatar']

这将重新定义您之前已定义的模块。因此,您的模块不再依赖于ui-router,并且在执行此行之后不再包含任何状态定义。

要获取对已定义模块的引用,语法为

angular.module('electronicaDonPepe', [])

注意:我也觉得很奇怪,你在控制器中做的第一件事就是告诉路由器进入登录状态。如果控制器已实例化,那么您已经已经处于登录状态。

此外,在任何地方硬编码angular.module('electronicaDonPepe') 都会使您很难从自己的计算机以外的任何地方访问该应用程序。