CODEWITHSUNDEEP
javascriptangularjs
Mark Biek
Mark Biek

Reputation: 150819

Sharing data between AngularJS controllers but having the shared data come from an Ajax call

I've figured out how to share data between two AngularJS controllers using a shared service in the contrived example below:

(Functioning fiddle)

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

app.factory('UserData', function() {
    var data = {foo: 'bar'};

    return {
        getData: function() {
            console.log('getData');
            return data;
        },
        setData: function(newData) {
            data = newData;
        }
    };
});

function MainCtrl($scope, UserData) {
    console.log('MainCtrl');
    console.log(UserData.getData());
}
MainCtrl.$inject = ['$scope', 'UserData'];

function JobListCtrl($scope, UserData) {
    console.log('JobListCtrl');
    console.log(UserData.getData());
}
JobListCtrl.$inject = ['$scope', 'UserData'];

My issue is that I would like the data held in UserData to come from an Ajax call (presumably using $http).

I tried doing the Ajax call in the UserData factory function but, since it's running asynchronously, MainCtrl and JobListCtrl are executed before the UserData service actually has any data in it.

Can someone give me some direction about how to set that up?

Upvotes: 11

Views: 6911

Answers (2)

Pablo
Pablo

Reputation: 2549

I've created this example that shows how to fetch, store and share data (models) across different controllers without loosing its bindable functionality.

Live Example: http://pablodenadai.github.io/SharingModelsAngularJS/

Source code 1: (Resources and Model abstraction) https://github.com/pablodenadai/SharingModelsAngularJS/blob/master/app/scripts/controllers/main.js

Repo: https://github.com/pablodenadai/SharingModelsAngularJS

Hope it helps.

Upvotes: 10

Stewie
Stewie

Reputation: 60416

Here are some starting points to help you out:

  1. How to get the data from the server (and how to construct a basic 'model' service): SO post

  2. How to hold the controller execution until data is fetched from the server: screencast from egghead.io

Upvotes: 3

Related Questions