Angular JS控制器未调用Spring MVC
[英]Spring MVC not being called by the Angular JS controller
问题描述
I'm trying to intgrate Angular JS with an existing Spring MVC project. 
我正在尝试将Angular JS与现有的Spring MVC项目集成在一起。 I had à problem calling a Spring controller from the Angular JS controller. 我在从Angular JS控制器调用Spring控制器时遇到了问题。
This is my app.js : 这是我的app.js ：
'use strict';
var AdminApp = angular.module('AdminApp',[]);
And the service: 和服务：
'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);
});
}
};
}]);
and the controller: 和控制器：
'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 : ''};
};
}]);
The JSP I'm using to display the data is: 我用来显示数据的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>
I can access my Spring Controller from a web browser and it returns some data but it's not being called by the Angular JS controller 我可以从Web浏览器访问Spring Controller，它返回一些数据，但Angular JS控制器未调用它
Am I missing something here? 我在这里想念什么吗？ Could you please help me? 请你帮助我好吗？
Thank you 谢谢
2 个解决方案
解决方案1
1 2015-12-15 20:57:06
try this: 尝试这个：
'use strict';
angular.module('AdminApp',[]);
And the service: 和服务：
'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);
});
}
};
}]);
controller: 控制器：
'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 : ''};
};
}]);
解决方案2
1 已采纳 2015-12-15 21:00:03
To return a data from your service function you should use .then function which has ability to return a data when promise gets resolved OR reject. 要从您的服务函数返回数据，您应该使用.then函数，该函数可以在promise被解决或拒绝时返回数据。 That you can't to with .success & .error function. 您无法使用.success和.error函数。
.success&.errormethod of$httphas been **deprecated$http.success和.error方法已被**弃用
Factory 厂
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 controller method will again place .then function on the factory method. 然后，控制器方法将再次将.then函数置于工厂方法上。 So the 1st function of .then will get called on resolved of fetchAllTerminals call, if it gets rejected 2nd function will get called. 因此， .then的第一个函数将在fetchAllTerminals调用的解析结果上被调用，如果它被拒绝，则第二个函数将被调用。
Controller 调节器
self.fetchAllTerminals = function() {
console.log('Controller');
AdminService.fetchAllTerminals()
.then(function(data) {
self.terminals = data;
}, function(error) {
console.error('Error while fetching Terminals');
});
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.