AngularJS http factory

Question

I have a code here and I just want to know the better one in getting data from php/mysql. Here are the codes:

1. Using factory

app.factory('todosFactory', function($http) {
    var factory = {};
    factory.getTodos = function() {
        return $http.get('todo-list.php');
    };
    return factory;
});

app.controller('ListController', function($scope, todosFactory, $http) {

    function init() {
        todosFactory.getTodos()
        .then(function successCallback(data) {
            $scope.todos = data;
        }, function errorCallback(data) {
            console.log(data);
        });
    }

    init();

});

2. GET request directly in the controller

app.controller('ListController', function($scope, $http) {
 //Init
    function init() {
        $http.get('todo-list.php')
        .then(function successCallback(data) {
            $scope.todos = data;
        }, function errorCallback(data) {
            console.log(data);
        })
    }

    init();
});

Are there benefits of using one over the other? Thank you.

I use a factory, like your first example, because I use several controllers, and for each one, I simply put like a dependence and a parameter. And more, if any address change, I have only a single local to change. But, I recommend you to use ngResource, for more clean code for a factory of resources. — Joao Polo
– Joao Polo, Commented Sep 29, 2015 at 3:07
You can take a look in this article for better clarification. — themyth92
– themyth92, Commented Sep 29, 2015 at 3:17
Several other benefits of factory is you can use a common error handler function for multiple API calls. Also makes it very simple to move the function call to a routing resolve if you need one — charlietfl
– charlietfl, Commented Sep 29, 2015 at 3:17
Don't worry about the resolve I mentioned....it's a way to have the data returned before the controller and template load, or to get data that the application needs before anything can proceed. Your factory looks fine and you can very easily add to it if you need to but it is the better of the two approaches you mentioned...even if you don't take advantage of that yet. — charlietfl
– charlietfl, Commented Sep 29, 2015 at 3:29
perhaps... If your code doesn't grow... you can to use the K.I.S.S. principle... and put all things on a single controller... we are talking about a project using angular. But, for curiosity, and to learn more about angular, you can create the factory anyway. — Joao Polo
– Joao Polo, Commented Sep 29, 2015 at 3:31

bobleujr · Accepted Answer · 2015-09-29 04:24:02Z

FewFlyBy,

By all means it depends on how you will use it.

Taking a look at AngularJS: Up and Running pag. 88

In case you have a RESTFUL API on your server, you can further reduce the amount of code you write by using AngularJS’s optional module, ngResource. ngResource allows us to take an API endpoint and create an AngularJS service around it. For example, consider an API for projects on the server side that behaves like the following:

• GET request to /api/project/ returned an array of projects

• GET request to /api/project/17 returned the project with ID 17

• POST request to /api/project/ with a project object as JSON created a new project

• POST request to /api/project/19 with a project object as JSON updated the project with ID 19

• DELETE request to /api/project/ deleted all the projects

• DELETE request to /api/project/23 deleted the project with ID 23

If we have such an API, then instead of manually creating a project resource, and wrapping up $http requests individually, we could just create a service as follows:
angular.module('resourceApp', ['ngResource'])
.factory('ProjectService', ['$resource', function($resource) {
return $resource('/api/project/:id');
}]);
This would automatically give us methods on ProjectService like: •ProjectService.query() to get a list of projects •ProjectService.save({id: 15}, projectObj) to update a project with ID 15 •ProjectService.get({id: 19}) to get an individual project with ID 19

This basically means you can use your $http with ngResource to make your controller leaner yet having a powerful .factory. However, if you are you going to use it once, then you might just use it inside your controller.

Hope this is going to help you!

Collectives™ on Stack Overflow

AngularJS http factory

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related