Spring MVC not being called by the Angular JS controller

Question

I'm trying to intgrate Angular JS with an existing Spring MVC project. I had à problem calling a Spring controller from the Angular JS controller.

This is my 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:

<%@ 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

Am I missing something here? Could you please help me?

Thank you

use html and angular directly, you don't need to have a jsp page — Gianmarco
– Gianmarco, Commented Dec 15, 2015 at 20:58

Pankaj Parkar · Accepted Answer · 2017-06-30 16:49:38Z

1

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. That you can't to with .success & .error function.

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

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. So the 1st function of .then will get called on resolved of fetchAllTerminals call, if it gets rejected 2nd function will get called.

Controller

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

edited Jun 30, 2017 at 16:49

answered Dec 15, 2015 at 21:00

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user2490936 Over a year ago

Hi and thanks for your answer. I did use then and it didn't work either, that's why I tryied this way

Pankaj Parkar Over a year ago

@user2490936 sorry.. I actually I missed the controller part too..so try it now..should work now..

Gianmarco Over a year ago

weren't success and error legacy way to use $http service?

Pankaj Parkar Over a year ago

@Gianmarco .success & .error method of $http are deprecated.

user2490936 Over a year ago

All right, i'll re-try then method and see if it works. thank you guys

|

Gianmarco · Accepted Answer · 2015-12-15 20:57:06Z

1

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

answered Dec 15, 2015 at 20:57

Gianmarco

2,55027 silver badges58 bronze badges

2 Comments

user2490936 Over a year ago

Why? do you have any solution? I'm new to angular :)

Pankaj Parkar Over a year ago

.success & error method are basically a follows callback pattern. it can't return data to follow promise chain..so you need to use .then which can return a data.

Collectives™ on Stack Overflow

Spring MVC not being called by the Angular JS controller

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related