How to properly use custom service in AngularJS

Question

I'm trying to move my controller logic to a service. I've added DataService and injected $http. Then loadData() method returns JSON. I've injected this service into a TestController and called mentioned function, but it doesn't work. The same simple logic worked correctly from a controller. What should I improve? :)

var app = angular.module('TestApp', []);
app.controller('TestController', TestController);
app.service('DataService', DataService);

function TestController(DataService) {
    var vm = this;
    vm.personalInfo = DataService.loadData();
}

function DataService($http) {
    var store = this;
    store.personInfo = [];

    store.loadData = function(){
        $http.get('data.json')
        .success(function(data){
        store.personInfo = data;
    })
    .error(function(){
        store.personInfo = "Error occured";
    });

    return store.personInfo;
    };
}

My view looks as easy as that:

<body ng-app="TestApp" ng-controller="TestController as test">
    <h1>Hello Plunker!</h1>

    <p ng-repeat="item in test.personalInfo" ng-bind="item.firstname"></p>

    <script data-require="[email protected]" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
    <script src="script.js"></script>
</body>

the first step is to define what you mean by the term "does not work" : ) — akonsu
– akonsu, Commented Oct 27, 2014 at 11:56
and, if you expect the loadData to return anything but [], then it won't because the call to $http is asynchronous. You need to set your vm.personalInfo when the success/error callback is called. — akonsu
– akonsu, Commented Oct 27, 2014 at 11:58

Mukund Kumar · Accepted Answer · 2014-10-27 12:40:39Z

1

in your code store.loadData returning undefined before response come from backend. so use this code:

var app = angular.module('TestApp', []);
app.controller('TestController', TestController);
app.service('DataService', DataService);

function TestController(DataService) {
    var vm = this;
    DataService.loadData().then(function(data) {
            vm.personalInfo = data.data
        })
        .catch(function(err) {
            console.log(err)
        })
}

function DataService($http) {
    var store = this;
    store.personInfo = [];

    store.loadData = function() {
        return $http.get('data.json')

    };
}

edited Oct 27, 2014 at 12:40

answered Oct 27, 2014 at 12:05

Mukund Kumar

23.5k20 gold badges64 silver badges85 bronze badges

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

2 Comments

magos Over a year ago

It looks reasonable, but still doesn't work. See here plnkr.co/edit/wgcAFS4y1t0z1v7fFgvl?p=preview

Mukund Kumar Over a year ago

use data.data in controller see plunker plnkr.co/edit/2mR6PtFbS927iRApveL7?p=preview

Collectives™ on Stack Overflow

How to properly use custom service in AngularJS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related