Use Javascript Object to Angular Service

Question

I am trying to add functions to a JS Object which will be used as a singleton service.

angular
        .module('app.steps')
        .factory('createStepsService', createStepsService);

    createStepsService.$inject = [];

    /* @ngInject */
    function createStepsService() {
        var steps;

        var service = {
            newSteps: function (current_step, total_steps) {
                if (!steps) {                   
                    return new Steps(current_step, total_steps);
                }
            }            
        };
        return service;

        function Steps(current_step, total_steps) {
            this.c_step = current_step;
            this.t_step = total_steps;            
        }

        Steps.prototype = {
            addSteps: function (num) {
                this.c_step += num;
            },
            setLastStep: function () {
                this.lastStep = this.c_step = this.t_step;
            }
        };        
    }

When I run this line from the controller, I am not able to access addSteps / setLastStep methods.

vm.createStepsService = createStepsService.newSteps(1, 3);

Why I don't see these methods? Were they created?

Thanks.

Community · Accepted Answer · 2017-05-23 10:28:12Z

1

Your steps.prototype code is never ran.

This is because it appears after the return.

Change the order of your code to this:

/* @ngInject */
function createStepsService() {
    var steps;

    function Steps(current_step, total_steps) {
        this.c_step = current_step;
        this.t_step = total_steps;            
    }

    Steps.prototype = {
        addSteps: function (num) {
            this.c_step += num;
        },
        setLastStep: function () {
            this.lastStep = this.c_step = this.t_step;
        }
    };

    var service = {
        newSteps: function (current_step, total_steps) {
            if (!steps) {                   
                return new Steps(current_step, total_steps);
            }
        }            
    };       

    return service; 
}

The reason that you can have a function declared before a return is because of JavaScript variable and function hoisting.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered May 4, 2016 at 12:14

Matt Lishman

1,8172 gold badges24 silver badges34 bronze badges

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

2 Comments

badigard Over a year ago

Works great. Thanks!

Matt Lishman Over a year ago

@badigard Glad to have helped! Understanding how variable hoisting and function hoisting work is worth knowing. This will help you write better code.

floribon · Accepted Answer · 2016-05-04 12:56:42Z

1

Your problem is that you are creating Steps.prototype after a return statement, so it will never be read.

edited May 4, 2016 at 12:56

answered May 4, 2016 at 12:12

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Comments

kbnawale · Accepted Answer · 2016-05-04 12:45:24Z

In AngularJS, services are singletons objects that are instantiated only once per app.

And the factory() method is a quick way to create and configure a service. It provides the function's return value i.e. Need to create an object, add properties to it, then it will return that same object.

For ex:

angular
.module('myApp',[])
.factory("createStepService", function(){
    var stepServiceObj = {};
    var c_step = 0;
    var t_steps = 0;
    var last_step = 0;

    stepServiceObj.setCurrentStep = function(current_step){
        c_step = current_step;
        console.log('c_step1: ',c_step);
    };
    stepServiceObj.getCurrentStep = function(){
        return c_step;
    };

    stepServiceObj.setTotalStep = function(total_steps){
        t_steps = total_steps;
    };
    stepServiceObj.getTotalStep = function(){
        return t_steps;
    };

    stepServiceObj.setLastStep = function(){
        last_step = c_step = t_step;
    };
    stepServiceObj.getLastStep = function(){
        return last_step;
    };

    stepServiceObj.addSteps = function(num){
        return c_step += num;
    };

    return stepServiceObj;
});

Collectives™ on Stack Overflow

Use Javascript Object to Angular Service

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related