Geek Answers Handbook

Angular application solution, not controller, for asynchronous preloaded data

This question, among many others, shows the use of the resolve level at the controller level for async data that must be loaded before the application starts.

I have many controllers with all separately defined routes in each module ... using resolve would be ridiculous for me if they all depended on data. I also have directives that are data dependent (automatic search, etc.).

Is there a better way to do this: "load data (using the angular service) before each controller is shown"? I need a download application, asynchronous data fetching, and I use ng-show with some rootScope data that either shows the download or the controller template. I tried putting it in app.run but couldn't get it to work properly ... anything that asynchronously in this block seems to be delaying the application.

reference

+7
angularjs
source share
3 answers

Here is what I did. I am not a big fan of this solution, but this is the best that I have come up with so far.

First of all, you can have several resolves in each route, for example:

 resolve: { UserAccount: app.resolves('UserAccount'), Posts: app.resolves('Posts') }

Since you cannot embed application services in the configuration block, I created a large old object in another file that contains shortcuts for my services:

 app.resolves = (function(){ // Resolves allow us to use `deferred`s to only // load our template after the data it requires // has been provided by the server. var resolve = {}; resolve.UserAccount = ['Users', function (Users) { return Users.fetchActive(); }]; resolve.Posts = ['Posts', function(Posts) { return Posts.getAllPosts(); }]; // Public API // @param string name return function (name) { return resolve[name] }; })();
+1
source share

I know this question is old, but since there is no accepted or clear answer, I am also trying to solve it.

The lack of a permission state for each application caused me several times, and this is the solution I finally came up with: http://jsfiddle.net/gabrielcatalin/cvyq0oys/

In short, I created the Angular Enhancer module (decorator), which supports 2 more methods: enable () and ready () . An AngularEnhancer snippet should only be loaded after angular.js is loaded and before implementation, for example:

 <script type="text/javascript" src="angular.js"> <script type="text/javascript" src="angularEnhancer.js"> <script type="text/javascript" src="main.js">

Here's what the implementation will look like:

 angular.module('myApp', []) .ready(function() { alert('The app is ready to be used!'); }) .resolve(['$q', function ($q) { // The resolve can wait for a promise to be resolved var differed = $q.defer(); setTimeout(function() { differed.resolve(); }, 1000); return differed.promise; // Or a true value // return true; // Or even a truish value // return 'value'; }]) .ready(function() { // The order of where the ready() appear doesn't matter alert('This is just another alert to show that it can have as many as possible!'); });

and html:

 <body> <div ng-if="!appReady" class="splash-screen">This is just the splash screen!</div> <div ng-if="appReady">Welcome to the app!</div> <script> angular.element(document).ready(function() { angular.bootstrap(document, ['myApp']); }); </script> </body>

Hope to see some comments from you guys!

+1
source share

I think that since there is no obvious way to configure the configuration at the application level, the best thing you can do is actually change the capabilities of $routeProvider using a decorator. Thus, you can check whether the resolve configuration is installed on each route of the application and add / combine a special permission agreement that will either load asynchronous transfer data or continue with the necessary data, with a bonus, have a central point for checking or changing when you need.

I am struggling with the same problem now. I will try to make generic / reusable code here and quickly post the solution to GitHub. I will also try to update this answer with the correct example.

0
source share

More articles:


All Articles