Clash Royale CLAN TAG#URR8PPP

Where and how to initialise application state returned from $http?

I am using session storage to store my application state.
I have an initial state which looks something like this:

appState =
titles :['Mr', 'Ms', 'Mrs', 'Miss', 'Dr'],
addresses : ,
labels :



This 'appState' is saved using $sessionStorage.appstate.
When the application loads, the 'labels' array of my appState needs to get populated.

I do this by a $get request in the run block angular.module('app').run(...populate appState); which then returns my labels and these labels are then saved to the sessionStorage for use by the application.

In my controllers when I try to access the appState.labels from the $sessionStorage when the app first loads, the labels are still not populated and the content that I bind the labels to are not shown. If I refresh the page, they are then loaded from the sessionStorage and all is working.

Now the reason (I believe) is that the binding is occurring BEFORE my $get has resolved so my appState.labels is still empty. How do I have my application 'Load and wait' until the $get labels has completed before it actually binds my data?

I have read that I should place initialisation code in the run block.

$get

$http.get()

1 Answer
1

Assuming your case where you want to fetch the data first before the site loads, the best way would be to use manual bootstrapping where you get the data first and then loads the application. For that you need to do few things:

ng-app="myApp"

index.html

$http

app.js

(function()
var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');
$http.get('/get_label_details/',headers: 'Cache-Control' : 'no-cache').then(
function (response)
angular.module('myApp.labels', ).constant('LABELS', response.data);

angular.element(document).ready(function()
angular.bootstrap(document, ['myApp']);
);

);
)();


myApp.labels

myApp

something like below:

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

mainApp.run(function(LABELS)
console.log(LABELS); // you have it here at the run phase
)


so your final app.js will look like

app.js

(function()
var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');
$http.get('/get_label_details/',headers: 'Cache-Control' : 'no-cache').then(
function (response)
angular.module('myApp.labels', ).constant('LABELS', response.data);

angular.element(document).ready(function()
angular.bootstrap(document, ['myApp']);
);

);
)();


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

mainApp.run(function(LABELS)
console.log(LABELS); // you have it here at the run phase
)


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.