Am I on the right track with my service definition in Angular?

Question

Am I on the right track with my service definition in Angular?

(function(){
    angular.module('myApp',[])
})();

(function(){
    angular.module('myApp.dashboard',[])
})();

(function(){
    angular.module('myApp.value',[])
})();

(function(){
    'use strict';
    angular.module('myApp.value').service('whichToShow',function(){
        alert("running2");
        var logged=true;
        return {
            getVar: function(){
                return logged;
            },
            setVar: function(value){
                logged=value;
            }

        };
    });
})();

(function(){
    'use strict';
    angular.module('myApp.dashboard').controller('mainControl',mainControl);

    mainControl.$inject = ['whichToShow'];
    alert("running1");
    function mainControl(whichToShow){
        this.logged=whichToShow.getVar();
        alert(this.logged);

    };
})();

I am currently developing an app inspired by another existing app, but I am having trouble using a newly defined service. I have been following the code structure of the original app found here. Can you guide me on which part of my code needs modification? It would be helpful if you could make adjustments directly to my code so that I can understand where I went wrong. Thank you!

You can access all of my code in the following link: https://plnkr.co/edit/YeahrG28bT2izX8gMKor?p=preview I have made limited progress so far and my current goal is to hide certain buttons on the interface.

javascript angularjs

Answer 1

Answer №1

The whichToShow variable is specified in the myApp.value module, but it is being used in the myApp.dashboard module. To resolve this, simply include a reference to the myApp.value module when declaring the myApp.dashboard module.

angular.module('myApp.dashboard',['myApp.value'])

Answer 2

The whichToShow variable is specified in the myApp.value module, but it is being used in the myApp.dashboard module. To resolve this, simply include a reference to the myApp.value module when declaring the myApp.dashboard module.

angular.module('myApp.dashboard',['myApp.value'])

Answer 3

Answer №2

Your content is presenting a concept of a factory, which involves obtaining an instance and enhancing it with methods.

If you want to transform your existing service into a factory, you can do so by following this example:

(function(){
    'use strict';
    angular.module('myApp.value').factory('whichToShow',function(){
        alert("running2");
        var logged=true;
        return {
            getVar: function(){
                return logged;
            },
            setVar: function(value){
                logged=value;
            }
        };
    });
})();

Alternatively, if you prefer to define your service differently, you may consider the following approach:

(function(){
    'use strict';
    angular.module('myApp.value').service('whichToShow',function(){

        var logged=true;
        this.getVar = function(){
                return logged;
            };
        this.setVar =function(value){
                logged=value;
            };
    });
})();

Note:

The code in your Plunker example contains errors that need to be rectified. Please refer to this corrected version: https://plnkr.co/edit/2HAwy7MV4dK0yUuBcCfG?p=preview

Ensure that your inclusion of all.js points to the correct location, without specifying the directory path.
In your mainControl, verify the correctness of your dependency injection.

Answer 4

Your content is presenting a concept of a factory, which involves obtaining an instance and enhancing it with methods.

If you want to transform your existing service into a factory, you can do so by following this example:

(function(){
    'use strict';
    angular.module('myApp.value').factory('whichToShow',function(){
        alert("running2");
        var logged=true;
        return {
            getVar: function(){
                return logged;
            },
            setVar: function(value){
                logged=value;
            }
        };
    });
})();

Alternatively, if you prefer to define your service differently, you may consider the following approach:

(function(){
    'use strict';
    angular.module('myApp.value').service('whichToShow',function(){

        var logged=true;
        this.getVar = function(){
                return logged;
            };
        this.setVar =function(value){
                logged=value;
            };
    });
})();

Note:

The code in your Plunker example contains errors that need to be rectified. Please refer to this corrected version: https://plnkr.co/edit/2HAwy7MV4dK0yUuBcCfG?p=preview

Ensure that your inclusion of all.js points to the correct location, without specifying the directory path.
In your mainControl, verify the correctness of your dependency injection.

Am I on the right track with my service definition in Angular?

Answer №1

Answer №2

Similar questions

Explore the capabilities of Vue.js by creating multiple JavaScript classes within your application

Is it possible to alter the video dynamically according to the state in Vuex?

What steps do I need to take to translate jQuery code into standard JavaScript code?

What is the best way to trigger an ajax request when a user selects a tab?

I'm looking to transfer my stringified object into the HTML body. How can I achieve

Attempting to create a Next.js 13 application, but struggling with using the client-side functionality

Attempting to incorporate Font-Awesome Icons into the navigation bar tabs

Incorporate pug and sass into your React project for a more

Is it possible to achieve a smooth transition to the right using CSS

Is there a way to access an Excel file with JavaScript without relying on the ActiveX control?

Challenges encountered when unit testing ngx-translate

Certain individuals are experiencing difficulties accessing my Google application

Error discovered in Webpack syntax

Difficulty encountered when trying to template routes with more than one slash in Angular-route

Learning how to integrate Next.js, React.js, and Redux into an HTML page for an enhanced user

I am facing an issue where both curl and file_get_contents are not functioning properly after

Error in AngularJS: Loading null value for an option tag

How can I show the total sum of input values in a React.js input box?

Elevate javascript

Utilizing Async / Await in the created lifecycle hook - Vue2