Angular JS控制器未调用Spring MVC

Question

我正在尝试将Angular JS与现有的Spring MVC项目集成在一起。 我在从Angular JS控制器调用Spring控制器时遇到了问题。

这是我的app.js ：

'use strict';
var AdminApp = angular.module('AdminApp',[]);

和服务：

'use strict';

AdminApp.factory('AdminService', ['$http', '$q', function($http, $q) {
    return {
        fetchAllTerminals: function() {
            return $http.get('http://localhost:8081/crmCTI/admin/terminal')
                    .success(function(response) {
                        console.log('Service');
                        return response.data;
                    })
                    .error(function(errResponse) {
                        console.error('Error while fetching terminals');
                        return $q.reject(errResponse);
                    });
        }
    };
}]);

和控制器：

'use strict';

AdminApp.controller('AdminController', ['$scope', 'AdminService', function($scope, AdminService) {
    var self = this;
    self.terminal={id:'',connectedUser:'',type:'',state:''};
    self.terminals=[];

    self.fetchAllTerminals = function() {
        console.log('Controller');
        AdminService.fetchAllTerminals()
        .success(function() {
            self.terminals = d;
        })
        .error(function() {
            console.error('Error while fetching Terminals');
        });
    };

    self.reset = function() {
        self.terminal = {id : null, connectedUser : '', type : '', state : ''};
    };
}]);

我用来显示数据的JSP是：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head></head>

<body ng-app="AdminApp" ng-init="names=['Jani','Hege','Kai']">
    <div ng-controller="AdminController as adminController">
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Login</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="terminal in adminController.terminals">
                    <td>{{terminal.id}}</td>
                    <td>{{terminal.connectedUser}}</td>
                    <td>{{terminal.type}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script type="text/javascript" src="${pageContext.request.contextPath}/vendors/angular/1.4.4/angular.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/app.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/controller/admin-controller.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/service/admin-service.js"></script>
</body>
</html>

我可以从Web浏览器访问Spring Controller，它返回一些数据，但Angular JS控制器未调用它

我在这里想念什么吗？ 请你帮助我好吗？

谢谢

Answer 1

尝试这个：

'use strict';
angular.module('AdminApp',[]);

和服务：

'use strict';

angular.module('AdminApp').factory('AdminService', ['$http', '$q', function($http, $q) {
    return {
        fetchAllTerminals: function() {
            return $http.get('http://localhost:8081/crmCTI/admin/terminal')
                    .success(function(response) {
                        console.log('Service');
                        return response.data;
                    })
                    .error(function(errResponse) {
                        console.error('Error while fetching terminals');
                        return $q.reject(errResponse);
                    });
        }
    };
}]);

控制器：

'use strict';

angular.module('AdminApp').controller('AdminController', ['$scope', 'AdminService', function($scope, AdminService) {
    var self = this;
    self.terminal={id:'',connectedUser:'',type:'',state:''};
    self.terminals=[];

    self.fetchAllTerminals = function() {
        console.log('Controller');
        AdminService.fetchAllTerminals()
        .success(function() {
            self.terminals = d;
        })
        .error(function() {
            console.error('Error while fetching Terminals');
        });
    };

    self.reset = function() {
        self.terminal = {id : null, connectedUser : '', type : '', state : ''};
    };
}]);

Answer 2

要从您的服务函数返回数据，您应该使用.then函数，该函数可以在promise被解决或拒绝时返回数据。 您无法使用.success和.error函数。

$http .success和.error方法已被**弃用

厂

AdminApp.factory('AdminService', ['$http', '$q', function($http, $q) {
    return {
        fetchAllTerminals: function() {
            return $http.get('http://localhost:8081/crmCTI/admin/terminal')
                    .then(function(response) {
                        console.log('Service');
                        return response.data;
                    },function(errResponse) {
                        console.error('Error while fetching terminals');
                        return $q.reject(errResponse);
                    });
        }
    };
}]);

然后，控制器方法将再次将.then函数置于工厂方法上。 因此， .then的第一个函数将在fetchAllTerminals调用的解析结果上被调用，如果它被拒绝，则第二个函数将被调用。

调节器

self.fetchAllTerminals = function() {
    console.log('Controller');
    AdminService.fetchAllTerminals()
    .then(function(data) {
        self.terminals = data;
    }, function(error) {
        console.error('Error while fetching Terminals');
    });
};

Angular JS控制器未调用Spring MVC

问题描述

2 个解决方案

解决方案1
1 2015-12-15 20:57:06

解决方案2
1 已采纳 2015-12-15 21:00:03

Angular JS控制器未调用Spring MVC

问题描述

2 个解决方案

解决方案1 1 2015-12-15 20:57:06

解决方案2 1 已采纳 2015-12-15 21:00:03

解决方案1
1 2015-12-15 20:57:06

解决方案2
1 已采纳 2015-12-15 21:00:03