How call ajax from factory in angularjs?

Question

I am trying to call a ajax from factory but it doesn't return me anything. My code given bellow

var msfaWebPortal = angular.module('MsfaWebPortal', [])
       .factory('personFactory', function () {
           var factory = {};

           var people = [];

           $.ajax({
               url: '@Url.Action("GetPerson","Home")',
               success: function (data) {
                   people = data;
               }
           });

           factory.getPerson = function () {
               return people;
           };
           return factory;
       })
    .controller('PersonCtrl', function ($scope, personFactory) {
        $scope.friends = personFactory.getPerson();
        $scope.predicate = '-age';
    });

Am I missing something? Or How can I do it? Help me Please.

I meant, angular provides a $http for making Ajax calls. Additionally, in a factory or service, you can use $resource to get the whole RESTful endpoint mapped automatically. — Zlatko, Aug 23 '13 at 11:31
http://docs.angularjs.org/tutorial ok? or their API, like http://docs.angularjs.org/api/ng.$http or http://docs.angularjs.org/api/ngResource.$resource — Zlatko, Aug 23 '13 at 11:42

score 2 · Accepted Answer · answered Aug 23 '13 at 11:30

2

You should use Angulars' $http for making these calls.

Ie.

var app = angular.module('myApp', []).config(/* config stuff */ );
app.PersonFactory = angular.factory('PersonResource', function($http) {
  /* your code here */
  /* when you want to make Ajax calls, use $http */
  $http.get('/some/url/to/persons')
     .success(function (response) {...})
     .error(function(err){...});
  /* keep going */
});

Additionally, if your Persons resource is RESTful, you can just use $resource, ie.

var app = angular.module('myApp', []).... /* setup app */
app.personsFactory = angular.factory('personsFactory', function($resource) {
  var persons = $resource('/api/persons/:id', {id: '@id'});
  return persons;
});

That way angular will know that on your /api/persons url it can GET persons, it can POST an new person, it can PUT an update for a person and DELETE a person.

answered Aug 23 '13 at 11:30

Zlatko

18,936
14
70
123

How do you then pass the data received in success callback to your controller, to add it to the scope for example ? – c4k Feb 21 '14 at 23:05
Well, since $http is provided by angular, its success callback can access $scope and angular will digest it on change. So, just do a $http.get(url).success(function(data){$scope.something = data;}) – Zlatko Feb 22 '14 at 11:05
3

Yes but you can do this only if you call $http in your controller... You can't access $scope in a factory ?! Or maybe I misunderstood the role of $scope. Anyways, I ended up adding a parameter "callback" to my factory method, called by $http.success and implemented in my controller – c4k Feb 22 '14 at 14:34
Well yes, if you call $http in a factory, the scope is not there. But you can pass it in as a parameter, although depends on the use case. – Zlatko Feb 23 '14 at 20:36
Yes, when the ng-route module is in use. As I've said, depends on the use case. – Zlatko Nov 25 '14 at 10:20

How call ajax from factory in angularjs?

1 Answers1