Resolve function not being injected in controller [Angular JS]

Question

angular
  .module('madkoffeeFrontendApp', [])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/articles.html',
        controller: 'MainCtrl',
        resolve: {
          articles: function(articleService,$q) {
          //  return articleService.getArticles();
            return 'boo';
          }
        }
      })
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  });

My above code contains the resolve.

  angular.module('madkoffeeFrontendApp')
  .controller('MainCtrl', ['$scope',
    function($scope, articles) {
      console.log(articles);
  }]);

When I tried to inject articles in the array as shown below, it gives an error but as far as I know that's the correct way to inject a resolve function:

  angular.module('madkoffeeFrontendApp')
  .controller('MainCtrl', ['$scope','articles',
    function($scope, articles) {
      console.log(articles);
  }]);

My articles resolve function is not being injected. I tried returning just a string (example: 'boo') as shown to test if articles dependency works or not, and it doesn't i.e. it returns undefined. What could be the reason?

Are you minifying? If so then you need to wrap your resolve function in [arcticleService, $q, function(articleService, $q){ . . . }] — Dustin Hodges
– Dustin Hodges, Commented Mar 29, 2016 at 14:24
I mistyped earlier. If minifying, wrap your resolve function like so ['arcticleService', '$q', function(articleService, $q){ . . . }] — Dustin Hodges
– Dustin Hodges, Commented Mar 29, 2016 at 14:39
Can you write the resolve function again? I'm a bit confused about wrapping it like that^ — foxtrot3009
– foxtrot3009, Commented Mar 30, 2016 at 8:56
Can you provide a jsfiddle or PlunkR demonstrating your problem? I would think your second definition of MainCtrl above should work but it is difficult to see why it isn't without examining an example that reproduces your error — Dustin Hodges
– Dustin Hodges, Commented Mar 30, 2016 at 14:41

carlcheel · Accepted Answer · 2016-03-29 14:28:13Z

1

Here's a Plunker to demonstrate the resolve message. As you'll see in the example, it's the same structure as the code you posted and should work fine.

Click the about page to see the resolve message.

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

Code:

var resolveTestApp = angular.module('resolveTestApp', ['ngRoute']);

    resolveTestApp.config(function($routeProvider) {
    $routeProvider

        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController',
            resolve: {
              resolveMessage: function() {
                return 'This is the resolve message';
              }
            }
        })

});

resolveTestApp.controller('mainController', function($scope) {
    $scope.message = 'Everyone come and see how good I look!';
});

resolveTestApp.controller('aboutController', ['$scope', 'resolveMessage', function($scope, resolveMessage) {
  $scope.message = resolveMessage;
}]
);

It may be the version of Angular you're using or a problem when you're minifying your code.

edited Mar 29, 2016 at 14:28

answered Mar 29, 2016 at 14:19

carlcheel

6216 silver badges11 bronze badges

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

1 Comment

foxtrot3009 Over a year ago

Yes i'm using the latest version. Tried your code, when I try to do this: ['$scope', 'resolveMessage', .. I get an injection error.

Collectives™ on Stack Overflow

Resolve function not being injected in controller [Angular JS]

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related