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

TaffyDB is throwing an error message indicating that TAFFY is not recognized as a function

You can use AJAX, JQuery, or JavaScript in PHP to upload a total of 7 files by utilizing 7 individual file input

Images are not loading when linking Angular $compile to a controller

Creating a rectangular pyramid using three.js r68: a step-by-step guide

Utilizing Nested ControlGroups in Angular2 rc1: A Comprehensive Guide

Switching between light and dark themes in a Next.js application with Ant Design v5 theme toggle

Spring Security does not support PUT requests with AngularJS and Spring Boot

Creating a Cubic Bezier Curve connecting two points within a 3D sphere using three.js

Troubleshooting problem with Ajax responseText

Passing Data from $http.get to Angular Controller Using a Shared Variable

How to use jQuery to delete the final table in an entire HTML document

Displaying a portion of a React functional component once an asynchronous function call has been successfully executed

Creating dependent dropdowns using Laravel Inertia Vue: A step-by-step guide

Leaving the pipeline of route-specific middleware in Express/Node.js

Issues with implementing KoGrid within the Durandal JS framework

Angular/Karma Unit Test for HttpClient

Ways to update list item text with jQuery

Unable to transfer all the formatting from the original file for the window.print() function. Localhost is functioning properly, but encountering issues with production

Issue: Attempting to write data after reaching the end in Node.js while using

Steps for creating a function to validate if two classes are identical