Working with AngularJS: Implementing a Service in a Controller

Question

Working with AngularJS: Implementing a Service in a Controller

A service has been developed in AngularJS, but it is not being utilized in the 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

    }]);
})();

The code exists in two separate files, and when combined into one file, it functions correctly (Service injection into controller with AngularJS). No errors are displayed in the console.

javascript angularjs service controller

Answer 1

Answer №1

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."
}];

By understanding the concept of variable hoisting in JavaScript, we can rearrange the code as shown below:

var bdd;
var bdds;
bdds = bdd;              // results in bdds being undefined

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

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

To avoid any issues with variable hoisting, it is recommended to structure the code like this:

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;
};

Answer 2

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."
}];

By understanding the concept of variable hoisting in JavaScript, we can rearrange the code as shown below:

var bdd;
var bdds;
bdds = bdd;              // results in bdds being undefined

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

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

To avoid any issues with variable hoisting, it is recommended to structure the code like this:

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;
};

Working with AngularJS: Implementing a Service in a Controller

Answer №1

Similar questions

Scroll automatically to the following div after a brief break

Filtering records in Sails.js through route parameters

What could be causing the error 'i is not defined' in my Vue.js component script when using a basic for loop?

Having issues transferring values from one page to another. Any suggestions to make it work correctly?

Modifying an onClick handler function within a react element located in a node module, which points to a function in a prop declared in the main Component file

Securing AJAX Requests: Encrypting GET and POST Requests in JavaScipt using Node.js

How can I display an ngx spinner after a delay of 1 second?

Stanza.io encountered difficulties in generating a WebRTC answer

Tips for excluding the HTTP OPTIONS request from being intercepted by the express.js authentication middleware

Modify one specific variable within my comprehensive collection on Firebase Firestore

Platform error: Responses not specified for DIALOGFLOW_CONSOLE

Tips for rearranging table columns using drag and drop in react js

I utilize ng-table for managing data in both admin and user interfaces, with distinct sources. The admin interface displays author data until refreshed

Can hash routes be defined in next.js?

Challenges with loading times in extensive AngularJS applications

There seems to be an issue with the integration of Bootstrap in my JavaScript file

A versatile jQuery function for extracting values from a :input selector

eliminate the common elements between two arrays in typescript/javascript

Is there a way to simplify and optimize the code further?

Simulating a service dependency in unit tests for AngularJS