Angularjs dependency injection in resolve

Question

I would like to use proper dependency injection in MyCtrl1to inject the fields of the MyCtrl1.resolve object. I've tried many different combinations of attempting to inject @MyCtrl1.resolve etc. with no luck.

@MyCtrl1 = ($scope, $http, batman, title) ->
  $scope.batman = batman.data
  $scope.title = title.data

@MyCtrl1.resolve = {
 batman: ($http) ->
   $http.get('batman.json')
 title: ($http) ->
   $http.get('title.json')
}
#@MyCtrl1.$inject = ['$scope', '$http'] -- commented out because not sure how to inject resolve fields

 angular
.module( 'app', [])
.config( ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider)->
  $locationProvider.html5Mode(true)

  $routeProvider.when('/', {templateUrl: 'index.html', controller: MyCtrl1, resolve: MyCtrl1.resolve})
  $routeProvider.otherwise({redirectTo: '/'})
])

angular.bootstrap(document,['app'])

Rahil Wazir · Accepted Answer · 2014-10-20 23:25:58Z

22

Resolve is a property of a route and not a controller. Controllers would be injected with dependencies defined on a route level, there is no need to specify resolve properties on a controller.

Taking one of your examples (transformed to JavaScript), you would define your controller as always, that is:

MyCtrl1 = function($scope, $http, batman, title) {
  $scope.batman = batman.data;
  $scope.title = title.data;
}

and then the resolve property on a route:

angular.module('app', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true)

  $routeProvider.when('/',{templateUrl: 'index.html', controller: MyCtrl1, resolve: {
    batman: ['$http', function($http) {
      return $http.get(..).then(function(response){
         return response.data;
      });
    }],
    title: ['$http', function($http) {
      return //as above
    }]
  }});
  $routeProvider.otherwise({redirectTo: '/'});
}]);

If you want to minify the code using resolve section of routing you need to use array-style annotations - I've included this in the example above.

edited Oct 20, 2014 at 23:25

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

answered Feb 7, 2013 at 18:12

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jakecar Over a year ago

Thanks for your response. However, I'm afraid I don't see how this helps me to inject 'batman' and 'title' into MyCtrl1. MyCtrl1.$inject = ['$scope', '$http', 'batman', 'title'] would not work

pkozlowski.opensource Over a year ago

@jakecar it should work for globally defined controllers. For the controllers registered on a module (recommended) you would have to use array-style annotations. Let me know if you've got problems making it work, will prepare a plunk.

Aleck Landgraf Over a year ago

I think you're missing your closing bracket ] for batman and title

arcseldon Over a year ago

thank you for answering the main question - to use square bracket array syntax within the value section of the resolve object defintions. But would have been far better if your example code was actually syntactically correct - appears to be missing closing square brackets etc which was the crux of the answer.

Collectives™ on Stack Overflow

Angularjs dependency injection in resolve

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related