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

How can I retrieve data from local storage based on a specific key value using a query?

What is the process for invoking a function in ng-repeat after an object has been altered?

Design your very own personalized Show Layout component

AngularJS consistently shows only one piece of data when used in conjunction with PHP

What is the best way to send the value from a textbox to this script?

How can the front design of Material-UI's Card header be customized?

The absence of jasmine-node assertions in promises goes unnoticed

Unexpected behavior in the AngularJS UI Bootstrap datepicker causing dates to shift

Ways to verify if a variable holds a JSON object or a string

Sending parameter and ng-click to the angular directive

Best resolutions and formats for Nativescript-Vue application icons

MUI version 5 - Checkboxes are receiving a variety of unique classes

Having trouble connecting to JSTL in my JavaScript file

Remove hidden data upon moving cursor over table rows after a delay

Nested tables in Datatables retrieving child table rows based on parent table

Changing date and time into milliseconds within AngularJS

How can the button effect be disabled in Vue Material for md-button?

Retrieve an item from MongoDB and assign it to the $scope variable

I experienced an issue with Firestore where updating just one data field in a document caused all the other data to be wiped out and replaced with empty Strings

I am looking to host several iterations of jQuery on a content delivery network within my Nuxt application