How can I ensure my AngularJS Controller variable is accessible across all page contexts?

Question

How can I ensure my AngularJS Controller variable is accessible across all page contexts?

Working with AngularJS, I have a view controller where I initialize a variable called recipesData. Here is the code for the controller:

(function() {
    'use strict';

    angular
        .module('myApp')
        .controller('CookController', CookController);

    CookController.$inject = ['$document','$scope','$rootScope','$window'];

    function CookController ($document,$scope,$rootScope,$window) {

        var vm = this;

        var recipesData = load();

        var viewer, ui, building;

        $scope.load = function ()  {
           var data;
           // Create data 
           // ..........
            return data;
        };

    };

})();

I need to make my recipesData variable global as an external script relies on it being initialized.

<script src="https://myexternal/lib/js/script.js"></script>

How can I make the recipesData variable global or accessible from the script imported in the head of my document? The variable is currently initialized within my controller.

Thank you!

javascript angularjs

Answer 1

Answer №1

If you want to implement a solution using rootscope and service, but the most efficient way is to utilize a service. Here's an example of service code that you can tailor to fit your specific needs:

fcty.service('taskService', function() {
    var task = {};
    var addTask = function(newObj) {
        task = newObj;
    }

    var getTask = function() {
        return task;
    }
    return {
        addTask: addTask,
        getTask: getTask,
    };
});

Include taskService in your controller:

cntrl.controller('taskCreateController', function($scope, $http,taskService) {

// Add data to the service.

taskService.addTask($scope.data);

// Retrieve data from the service in any controller by using taskservice.

taskService.getTask();


}

This service can be customized to suit your requirements.

var app = angular.module('myApp', []);

app.service('recipeService', function() {
    var recipeData = {};
     var addRecipe = function(newObj) {
        recipeData = newObj;
    }

    var getRecipe = function() {
        return recipeData;
    }
 return {
        addRecipe: addRecipe,
        getRecipe: getRecipe,
    };

});


app.controller('CookController', function($scope, $http, recipeService) {

  var vm = this;
  var viewer, ui, building;

        $scope.load = function ()  {
           var data;
           // create data 
           // ..........
            recipeService.addRecipe(data);
            return data;
        };

});

I hope this example serves as a useful reference for you.

Answer 2

If you want to implement a solution using rootscope and service, but the most efficient way is to utilize a service. Here's an example of service code that you can tailor to fit your specific needs:

fcty.service('taskService', function() {
    var task = {};
    var addTask = function(newObj) {
        task = newObj;
    }

    var getTask = function() {
        return task;
    }
    return {
        addTask: addTask,
        getTask: getTask,
    };
});

Include taskService in your controller:

cntrl.controller('taskCreateController', function($scope, $http,taskService) {

// Add data to the service.

taskService.addTask($scope.data);

// Retrieve data from the service in any controller by using taskservice.

taskService.getTask();


}

This service can be customized to suit your requirements.

var app = angular.module('myApp', []);

app.service('recipeService', function() {
    var recipeData = {};
     var addRecipe = function(newObj) {
        recipeData = newObj;
    }

    var getRecipe = function() {
        return recipeData;
    }
 return {
        addRecipe: addRecipe,
        getRecipe: getRecipe,
    };

});


app.controller('CookController', function($scope, $http, recipeService) {

  var vm = this;
  var viewer, ui, building;

        $scope.load = function ()  {
           var data;
           // create data 
           // ..........
            recipeService.addRecipe(data);
            return data;
        };

});

I hope this example serves as a useful reference for you.

Answer 3

Answer №2

Here are three different approaches in AngularJS:

(Ranked by most commonly used)

Implementation of service/factory, as demonstrated by @chiragsatapara
Utilizing $rootScope.$emit for emitting events and $rootScope.$on for listening to them
Directly working with $rootScope

Answer 4

Here are three different approaches in AngularJS:

(Ranked by most commonly used)

Implementation of service/factory, as demonstrated by @chiragsatapara
Utilizing $rootScope.$emit for emitting events and $rootScope.$on for listening to them
Directly working with $rootScope

How can I ensure my AngularJS Controller variable is accessible across all page contexts?

Answer №1

Answer №2

Similar questions

Incorporating a JavaScript npm module within a TypeScript webpack application

`In NodeJS, facing a challenge with implementing a many-to-many relationship using Sequelize's

What materials are required in order to receive messages and information through my Contact page?

Leveraging underscore.js for null verification

Having trouble integrating select2 with geonames?

Incorporate the Google Maps API into a React application

Utilizing the power of Node.js with Oracle seamlessly, without the need for the Oracle Instant

Tips for triggering jquery code when a variable containing a CSS attribute is modified

Move content off the screen using CSS3 translation

Using Phonegap alongside ons-scroller and ons-button

Using destructuring assignment in a while loop is not functional

What is the best way to implement two events in onPress using React Native?

What steps can I take to incorporate a user-controlled autoscroll feature into this Carousel?

Tips for choosing an option from a dropdown menu with robot framework

How can we ensure that Ajax consistently provides useful and positive outcomes?

One might encounter undefined JSON keys when attempting to access them from a script tag

Guide on adding data from Express.js and Node.js to a database

Why does `npm init react-app` automatically select yarn as the default package manager? (npm version 6.14.5)

Customizing the jQuery Datepicker to only allow a predefined set of dates

Combining Django with the powerful Vue3 and lightning fast Vite