How to call the angular service method from the controller?

Question

I am a little new to angular. I created the Employee Search service module. Here is the code ...

// Service for employee search app.service('employeeSearchService', function($http, resourceServerAddress){ this.empList = []; // Method for clearing search employee list this.clearEmpList = function(){ this.empList = []; } // Method for fetching employee search list this.fetchEmpList = function(){ return this.empList; } // Method for making employee search this.searchEmpList = function(empName){ var postData = { empName:empName, }; $http({ method: 'POST', url: resourceServerAddress, data : postData }).then(function successCallback(response) { console.log('Response Data : '+response); if(response['data']['status'] === 'success'){ console.log('Response received successfully with status=success'); if(response['data']['data'].length) { console.log('matches found for employee search'); this.empList = response; } else { console.log('no matches found for employee search'); this.empList = []; } } if(response['data']['status'] === 'error'){ console.log('Response received successfully with status=error'); } }, function errorCallback(response) { console.log('Error occur at time of processing request'); }); } }); 

Then I use the following code in my controller to retrieve data from this Service module.

 employeeSearchService.searchEmpList(empName); empSearchResponseList = employeeSearchService.fetchEmpList(); console.log('Search response from server module : '+empSearchResponseList); 

I can see on my Chrome console that I receive data from my AJAX call with all the console messages from the Service module. But they cannot catch this data in the controller variable.

I think so, I use 'searchEmpList ()' and 'fetchEmpList ()' in my controller, it is not. But, he can’t find out how to change it.

Need some guidance -.-

--- updated controller code ----

 // Controller for application Home route app.controller("HomeController", function($scope, $state, $location, $ionicHistory, $ionicSideMenuDelegate, $http, resourceServerAddress, employeeSearchService) { console.log('At home controller'); // Check application session. If it found not exist redirect user to login page if(window.localStorage.getItem("access_token") === "undefined" || window.localStorage.getItem("access_token") === null) { $ionicHistory.nextViewOptions({ disableAnimate: true, disableBack: true }); console.log('Redirecting user to login page-222'); $state.go("login"); } $scope.empName = ''; $scope.alertMsgBox = false; $scope.alertMsgText = ''; $scope.employees = []; $scope.resourceServerAddress = resourceServerAddress; var empSearchResponseList=null; // Method for employee search $scope.searchEmployee = function(form){ console.log('Employee name entered : '+$scope.empName); console.log('Employee name character length : '+$scope.empName.length); if($scope.empName.length >= 3 ){ var postData = { Emp_Name:$scope.empName, access_token:window.localStorage.getItem('access_token'), session_id:window.localStorage.getItem('session_id') }; $http({ method: 'POST', url: resourceServerAddress, data : postData }).then(function successCallback(response) { console.log('Response Data : '+response); if(response['data']['status'] === 'success'){ console.log('Response received successfully with status=success'); if(response['data']['data'].length) { console.log('matches found for employee search'); $scope.employees = response['data']['data']; $scope.alertMsgBox = false; } else { console.log('no matches found for employee search'); $scope.alertMsgBox = true; $scope.employees = []; $scope.alertMsgText = 'No matches found.'; } } if(response['data']['status'] === 'error'){ console.log('Response received successfully with status=error'); } }, function errorCallback(response) { console.log('Error occur at time of processing request'); }); } } // Method for showing employee profile $scope.showEmpProfile = function(empId){ console.log('HomeCtrl - click on profile image of emp id : '+empId); // Redirecting to home page $state.go('app.emp-profile', {empId:empId}); } }); 

Answer 1

this also seems confusing to me. the $http call is asynchronous, so when you call fetch , it selects an empty array. I would do something like this

 this.searchEmpList = function(empName){ var postData = { empName:empName, }; return $http({ method: 'POST', url: resourceServerAddress, data : postData }).then(function(response) { console.log('Response Data : '+response); if(response['data']['status'] === 'success'){ console.log('Response received successfully with status=success'); if(response['data']['data'].length) { console.log('matches found for employee search'); return response['data']['data']; } else { console.log('no matches found for employee search'); return []; } } if(response['data']['status'] === 'error'){ console.log('Response received successfully with status=error'); } }, function(response) { console.log('Error occur at time of processing request'); }); } 

and in the controller

 employeeSearchService.searchEmpList(empName).then(function(data){ console.log('data is ready', data); }); 

Also note that you must return $http to use .then() in the controller (returns a promise).

Fot a great styleguide for angular check

Answer 2

Are you sure you serve? I prefer this syntax:

  .service('Service', function () { var Service = { //methods here } return Service; }); 

And you don't need hard work with that .