Spring MVC 未被 Angular JS 控制器调用

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>

我可以从网络浏览器访问我的 Spring 控制器，它 returns 一些数据，但它没有被 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

要return 来自服务功能的数据，您应该使用.then 功能，该功能能够在承诺得到解决或拒绝时return 数据。你不能用 .success & .error 函数。

.success & .error method of $http has been **deprecated

工厂

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

Spring MVC 未被 Angular JS 控制器调用

Spring MVC not being called by the Angular JS controller

javascript

spring

spring-mvc

angularjs

angularjs-http