AngularJS - Use Service with Controller

Question

I have written a service in AngularJS, but I don't use the service in my controller.

Service.js

var appService = angular.module("appService", []);
appService.service("bddService", function() {

    var bdds = bdd;

    this.getBdds = function(){
        return bdds;
    };

    var bdd = [{
        id : 1,
        nom : "Activité commercial",
        desc : "Information de l'activité commercial de l'entreprise Bou."
    }];
});

Controller.js

(function(){
    var accueilCtrl = angular.module("accueilCtrl", ['appService']);

    accueilCtrl.controller('accueilCtrl', ['$scope', 'bddService', function($scope, bddService){

        $scope.bdds = bddService.getBdds(); // No error, but no data

    }]);
})();

There are two files, if I put the code in the same file it works (Service injection into controller with AngularJS). The console doesn't display errors.

Let's see how you are loading your js in your html. – Seth Flowers May 09 '15 at 19:12 — Seth Flowers, May 09 '15 at 19:12

score 0 · Accepted Answer · answered May 09 '15 at 19:27

var bdds = bdd;

this.getBdds = function(){
    return bdds;
};

var bdd = [{
    id : 1,
    nom : "Activité commercial",
    desc : "Information de l'activité commercial de l'entreprise Bou."
}];

This would become as below, becuase of variable hoisting concept in javascript

var bdd;
var bdds;
bdds = bdd;              // makes bdds undfined

this.getBdds = function(){
    return bdds;
};

bdd = [{
    id : 1,
    nom : "Activité commercial",
    desc : "Information de l'activité commercial de l'entreprise Bou."
}];

So do this way

var bdd = [{
    id : 1,
    nom : "Activité commercial",
    desc : "Information de l'activité commercial de l'entreprise Bou."
}];
var bdds = bdd;

this.getBdds = function(){
    return bdds;
};

AngularJS - Use Service with Controller

1 Answers1