CODEWITHSUNDEEP
javascriptangularjs
user1995781
user1995781

Reputation: 19463

AngularJS manually bootstrap after receive data

I am trying to manually bootstrap AngularJS after receiving data from the server.

bootstrap.js:

var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');
var maindata;

function bootstrapAngular() {
    angular.element(document).ready(function() {
        angular.bootstrap(document, ['app']);
    });
}

function getMainData() {
    return maindata;
}

$http
    .get('/data')
    .then(function (response) {
        maindata = response.data;
        bootstrapAngular();
    }, function (error) {
        console.log(error);
    });

I need to use the maindata or getMaindata() in the app after it is bootstrapped. Therefore, I cannot have javascript closer (function(){})(); on bootstrap.js file to keep everything private, so that the function & variable is accessible to the other part of the app.

Is it possible to make everything private but still accessible to the other part of the app?

Upvotes: 0

Views: 751

Answers (1)

New Dev
New Dev

Reputation: 49590

You could expose maindata as an injectable to make it available in your app:

$http
    .get('/data')
    .then(function (response) {
        maindata = response.data;

        angular.module("app").value("MainData", maindata);

        bootstrapAngular();
    }, function (error) {
        console.log(error);
    });

Then you could inject it in controllers or services:

.controller("MainCtrl", function($scope, MainData){
   $scope.data = MainData;
});

Upvotes: 1

Related Questions