CODEWITHSUNDEEP
javascriptangularjsspringspring-mvcangularjs-http
user2490936
user2490936

Reputation: 147

Spring MVC not being called by the Angular JS controller

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

Upvotes: 1

Views: 673

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

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

Upvotes: 1

Gianmarco
Gianmarco

Reputation: 2552

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

Upvotes: 1

Related Questions