0

I obviously have missed something from UI-Router and/or angular's documentations so, although I will sound stupid, here it is:

In http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider we have an example resolve function:

resolve: {
    myResolve1:
      function($http, $stateParams) {
        return $http.get("/api/foos/"+$stateParams.fooID);
      }
    }

I understand that its return value will be injected into the controller under the name "myResolve1".

What is less clear to me is where the values for the function parameters "$http" and "$stateParams" are coming from. So, where did the caller find the values to give to this function ?

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
mathieu
  • 2,954
  • 2
  • 20
  • 31
  • 1
    They're injected through Angular's dependency injection system, the same way you would with a controller function. – Joe Clay Jun 02 '16 at 14:28
  • See $injector.invoke here https://docs.angularjs.org/api/auto/service/$injector Your resolve methods are invoked with this method. – Drew R Jun 02 '16 at 14:45

2 Answers2

1

This is a good point, and as discussed for example here

Angularjs ui-router abstract state with resolve

we should use the IoC oriented notation

resolve: {
    dataParent: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
        var username = $stateParams.username;
        return ProfileService.getProfile(username);
    }]
}

The biggest benefit(s) is ... it will work even with minification applied. But mostly, it is now really clearly stated:

there is an array with all required dependency names - and the resolve function as a last argument

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • IoC oriented notation ? – mathieu Jun 02 '16 at 14:29
  • Absolutely! That is the point.. 1) well your code, will work as well... just until it is minified. Then your names will become `function(a,b)` and these 'a' and 'b' will not be registered... 2) the Array (the IoC notation) with names and last function will avoid that scenario – Radim Köhler Jun 02 '16 at 14:30
  • I am sorry but I am curious where this term "IoC oriented notation" comes from. – mathieu Jun 02 '16 at 14:31
  • haha: Inversion of Control (IoC) is a design pattern that addresses a component’s dependency resolution, configuration and lifecycle. IoC is best understood through the Hollywood Principle: “Dont’s call us, we’ll call you”. – mathieu Jun 02 '16 at 14:32
  • I see please, check this [Dependency Annotation](https://docs.angularjs.org/guide/di#dependency-annotation). There is all about AngularJS IoC and mostly about notation we should use. If we do not, and code is minified, angular tries to guess the service names by the variable names... but that is a dirty way, I'd say... – Radim Köhler Jun 02 '16 at 14:33
  • @mathieu International Olympic Committee. Programming in Angular will soon be an Olympic event. Just kidding...[Inversion of Control](https://en.wikipedia.org/wiki/Inversion_of_control). It's a fancy way of referring to dependency injection. – Lex Jun 02 '16 at 14:33
  • that is most helpful. Thanks. – mathieu Jun 02 '16 at 14:33
  • /me 's just had one of these eureka moments – mathieu Jun 02 '16 at 14:34
0

You can inject anything that you would normally inject into your controller into a resolve function including other resolves. You need to be careful with this because if you are chaining resolves it will take longer for the state to navigate completely therefore rendering your view slower. An example of chaining resolves would look like this.

resolve: {
    loggedIn: function(auth){ return  auth.requireLoggedIn()},
    user: function(loggedIn, auth){return auth.resolveUser()}
}

auth is a service that is part of my angular application and as you can see loggedIn is a resolve that needs to resolve before it can be used to load your user. You could then inject both of those into your controller.

You can put any Angular service, factory, filter or resolve in there.. And I'm sure I'm missing some other core things you can add as well but that's generally what I inject into a resolve. So to answer your question they just come from your Angular application.

Justcald
  • 41
  • 3