Can you select different components according to async data?

[hrajchert]

The idea is the following: Say I have a route /myresource/991, I would like to be able to ask the backend for the data of that resource, and depending on the response I would show one component or another.

In the ui-router I try to implement this using the resolve mechanism in conjunction with templateFactory and controllerProvider to dynamically select a "component". But there is a that the provider doesn't wait for the resolves angular-ui/ui-router#330.

In the new angular router I dont see resolve but I see a canActivate, will this mechanism be able to say what component to activate? Or how would you handle this?

Thanks!

[jvandemo]

The canActivate handler is already part of of the controller of the component, so that wouldn't work.

I think you would be best by implementing a component e.g. myResource, where:

module.controller('MyResourceController', function(){

  // resolve data you need to resolve
  // if you want to make the router wait
  // for the response, you can fetch the
  // data in the 'activate' lifecycle hook
  this.data = ...
});

and then in your components/my-resource/my-resource.html template you could load a different directive or sub-component depending on the outcome:

<some-directive ng-if="myResource.data === 'something'" resource-data="myResource.data" />
<some-other-directive ng-if="myResource.data === 'something-else'" resource-data="myResource.data" />

Does that make sense?

[hrajchert]

Well, actually thats the approach im using in Angular 1 because of the bug I linked with ui-router and controllerProvider.

But if the bug didn't exists this feature would be implemented in angular 1 and seems useful

[btford]

Yes. There will be a better API to express this soon, but the short version is that you can always add another step the the router's "pipeline" to add new behavior.