Use of Services in angularjs

Question

I online read that you should a use Service for getting data instead of simply putting the code in the controller, in order to keep Controllers thin.

Here's my Controller, which fetches a list of employees:

angular.module("app").controller("MyController", function ($scope, $http) {
    $http.get("/api/getempl").then(function (response) {
        if (response.status == 200) {
            $scope.empData = response.data.data;
        } else {
            console.log('400');
        }
    });
});

Then I tried the _Service approach in hope for improved performance

angular.module("app").factory("testService", function ($http, $location) {
    return {
        getData: function () {
            var promise = $http.get("/api/getempl").then(function (response) {
                return response.data.data;
            });
            return promise;
        }
    };
});

Now when I injected the Service like as shown up, and tested it in firebug under net tab, there's no improvement in page load time but it rather increased instead.

What am I doing wrong in the code, or what concept am I missing with the usage of Services in AngularJS?

angular.module("app").controller("MyController", function ($scope, $http, testService) {
    testService.getData().then(function (response) {
        $scope.empData = response;
    });
});

It's not about performance, it's about separating concerns and keeping code clean. — dfsq
– dfsq, Commented Sep 9, 2014 at 9:59
@dfsq Okkk..got it ..just one more thing ..I am confused whether to use Service or Resource for my api hits for better performance ? — Trialcoder
– Trialcoder, Commented Sep 9, 2014 at 10:01

Steve Lang · Accepted Answer · 2014-09-09 09:59:53Z

4

The use of services is recommended not for performance but for separation of concerns and code cleanliness. Having said that, if your controller has only a single $http call, then no point creating a service just for the sake of having a service.

answered Sep 9, 2014 at 9:59

Steve Lang

5594 silver badges8 bronze badges

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

3 Comments

Trialcoder Over a year ago

Thx for the answer, whether to use Service or Resource for my api hits for better performance ?

Stu Over a year ago

Obeying the single responsibility principal makes your classes very testable, in this case having a service with sensible method names means you can write a test saying "When this happens on the controller it calls 'GetData' on the service"

Steve Lang Over a year ago

Do you mean, whether to use $http or $resource? In any case the recommendation is to encapsulate $http or $resource calls in services.

Benny Bottema · Accepted Answer · 2014-09-09 10:48:17Z

1

Regarding performance there's no real difference. The Controller-Service approach is meant to separate responsibilities (GUI behavior in Controller, state and business logic in services).

This is because Services in AngularJS are global singletons (within a module). Controllers are instanced every time they are needed.

The Service approach makes sure your Controllers don't depend on $scope too much and on other Controllers, as most of the logic should be moved to your Services. This way logic can also be reused across Controllers.

edited Sep 9, 2014 at 10:48

answered Sep 9, 2014 at 10:18

Benny Bottema

11.6k11 gold badges76 silver badges108 bronze badges

Collectives™ on Stack Overflow

Use of Services in angularjs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related