FeatureRequest: support for ordered initialization of an angular app with asynchronous data

[leifhanack]

Hi there,

again and again I see people asking for a solution to do things after the app is initialized.

E.g. this latest thread or this thread which we created.

We have had the same issue and solved it with a 'init-service'. Here is the sample init service and it's detailed documentation.

It would be awesome if we have a build-in support for this reoccurring request. Or should it be sufficient to use the routeprovider and it's resolve block?

Regards, Leif

[gesellix]

👍

There are several forum threads regarding "angular initialization" issues, are there any plans of the angular core team to add a configurable initialization feature?

[leifhanack]

There is another thread in the google group: https://groups.google.com/forum/m/#!msg/angular/F5yoJevAHNg/qPeMgI5y420J

[malixsys]

Doesn't ui-router's resolve functionality cover this?

[thardy]

It does not. Resolve has to be added to EVERY controller where it's needed. Most of the discussion has been about data that is needed by every controller. It's a serious pain and not at all elegant to add the same list of resolve's to every controller. Other frameworks handle this with a global resolve. I'd be happy with a global resolve.

[malixsys]

You can easily inherit the configuration...

Something like:
http://jsbin.com/reh/3/edit

[michaelhunziker]

Plus 1

[gesellix]

Similarly to the resolve on controller level, PR #3295 makes dependency injection resolve lazily by returning promises from service factories.

[czjvic]

+1

[airandfingers]

+1

[flockonus]

👍

[steffanhalv]

@malixsys Same problem there. You also include promise to every controller, which makes the code ugly. We need a common initializer which has promise to be resolved before any controller is run.

+1

[fibinger]

+1

[tony-kerz]

👍

[fabiosussetto]

Using ui-router, you can probably achieve this by defining a top level parent state using the 'resolve' option. This way you can implement all your bootstrap logic into your own provider and the children states will wait for your logic to be resolved.

[fibinger]

I agree with Fabio. Finally I solved my problem with ui-router by creating
a state hierarchy with one shared, root state. This root state is being
initialized by resolving global dependency (in my case loading some static
data from the server).
The good news is that whenever substate changes, root state always remains
unchanged - that's why this static data is loaded only once, at the very
beginning, and is globally available.

[leifhanack]

Could you give us a little sample/plunker?

[fabiosussetto]

Sure:

$stateProvider.state('app', {
                url: "/app",
                templateUrl: "partials/base-app.html",
                controller: 'AppCtrl',
                abstract: true,
                resolve: {
                    'UserLogin': function (UserService) {
                        return UserService.getUser();
                    }
                }
            })
            .state('app.profile', {
                url: "/profile",
                templateUrl: "partials/profile/base.html",
                abstract: true
            })
            .state('app.profile.public', {
                url: "",
                templateUrl: "partials/profile/public.html",
                controller: 'ProfileCtrl'
            })

I'm using ui-router as explained above. Note UserLogin can be injected into your controllers and it contains the data about the currently logged user (if any).

[marcellscarlett]

+1 - I would also be happy with a global resolve.

[raoulus]

+1

[dcfsc]

The ui-router nested state works but is still a little tricky. Explicit init resolve would be ideal. +1

[vuk-nikolic]

+1

[mickaeltr]

+1

[freemancw]

+1

[cyprusglobe]

+1

[EnSabanNur]

+1

[andrey-skl]

+1

[robianmcd]

It would be great if you could just return a promise from the run block and your routes wouldn't load until it resolves.

[andrewyap]

+1

[gittycat]

+1

Using the resolve of a 'root' state seems the least worst option at this point (see Fabio's sample above).

[cquillen2003]

+1

[cameronlowry]

+1

[xyNNN]

The solution from @fabiosussetto won't work for directives, or? It is possible to prevent the rendering for directives till the asynchronous data is loaded from the service in the resolve method from the state?

[malixsys]

@xyNNN you can use $q.when(scope.some_property).then(fn) in your link function in directives to wait for the resolve...

[xyNNN]

@malixsys Doesn't exists another, a bit cleaner solution, to preventing the execution of my angularjs application till my promise resolved my information (also working for directives, ...)? You solution is useable, but so i have to implement it in each of my directives- that is more then DRY! ;)

[malixsys]

@xyNNN well, resolve blocks your controller already... maybe if you have a plunker I can check?

[xyNNN]

@malixsys I think it works also with the directives. The only thing i have to do, is to initialize my service in the resolve directly and not in the controller, because my directive is initialized before the controller is blocked - so you get my on the right path 👍 Thanks!

http://plnkr.co/edit/y5lS88mGjNlHJ0uIHvwE?p=preview

[malixsys]

@xyNNN waddabout this ?

[xyNNN]

@malixsys This should be also possible, thanks. But for my use case i need to render a different template depending on the value from my service.

[malixsys]

@xyNNN Ah!! Like so?

[xyNNN]

@malixsys My indeed is to send a request to my API /me to retrieve all information about the user and his roles. Based on this information (especially the user roles) i wanted to show some directives or functionalities in my application.

I don't want to save anything on the client, excepting the token for the authentication and authorization against my REST API.

Do you could follow and understand my indeed? I think the only thing to do is to initialize my UserService in the resolve with the user information and so should have the user information in my service before the directives and controller are rendered.

[xyNNN]

@malixsys I wanted you and all others to know, that i could solve my problem today in the morning. With this approach my information for the application are fetched before the whole application is executed.

Look at the working example here http://plnkr.co/edit/y5lS88mGjNlHJ0uIHvwE?p=preview

Thanks for the hints and your support!

[Narretz]

This is trivial with ui.router, which should probably be used by most bigger projects.
With ngRoute you can define a general resolve that all your routes use. While not as comfortable, it does the job as well.