Angularjs: How to inject dependency from resolve routeProvider

Question

I have a problem injecting resolve parameters from the routing into the controller. I'm setting the resolve value to an object {name: 'Banner', slug: 'banner'}, but I get an error.

App.js

var app = angular.module('CMS', ['fields', 'ngRoute']);

app.controller('ModuleController', ['$http', 'properties',
  function($http, properties) {
    var module = this;
    module.properties = properties;

    if (module.properties.slug.length) {
      $http.get(module.properties.slug + '.php').success(function(data) {
        module.list = data;
      });
    }
  }
]);

app.controller('HomeController', function() {});

app.config(function($routeProvider) {
  $routeProvider
  // route for the banner page
  .when('/banner1', {
    templateUrl: 'banner1.php',
    controller: 'ModuleController',
    resolve: {
      properties: function() {
        return { name: 'Banner', slug: 'banner' };
      }
    }
  })
  .when('/home', {
    templateUrl: 'home.php',
    controller: 'HomeController'
  })
  .otherwise({
    redirectTo: '/home'
  });
});

Error:

 Error: [$injector:unpr] http://errors.angularjs.org/1.3.14/$injector/unpr?p0=propertiesProvider%20%3C-%20properties%20%3C-%20ModuleController
    at Error (native)
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:6:417
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:38:7
    at Object.d [as get] (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:13)
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:38:81
    at d (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:13)
    at Object.e [as invoke] (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:283)
    at $get.w.instance (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:75:451)
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:58:476
    at s (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:7:408) <div ng-view="" class="ng-scope">

Did you know that when you use non-minified version of Angular you get more descriptive error messages? Try it next time — New Dev
– New Dev, Commented Mar 12, 2015 at 1:00
I'm guessing it is because you are using ng-controller="ModuleController" in /banner1.php — New Dev
– New Dev, Commented Mar 12, 2015 at 1:06
How to resolve? I have the same problem, in resolve I have data, but in controller is not — Ahmed
– Ahmed, Commented Oct 2, 2015 at 21:46

New Dev · Accepted Answer · 2015-03-12 18:10:56Z

11

ngRoute supports injection of resolved variables to the controller, which is useful for cross-cutting concerns of the app, like authentication or configuration of the app.

The downside is that the controller can only be instantiated with these parameters available to be injected, which means that either you instantiate your controller manually (with $controller), which almost never the case, or with ngRoute with resolve. What you cannot do with such a controller is instantiate it with ng-controller or in any other location where the injected parameters are not available.

This error indicates that in addition to having defined the controller on the route, you also have the controller defined as ng-controller in the template of the route. This second instantiation of the controller is what fails.

answered Mar 12, 2015 at 18:10

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

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

2 Comments

Luis Artola Over a year ago

Thank you! I couldn't find an explanation anywhere else.

gjspaho Over a year ago

I was going crazy, the error message should be more explanatory

sylwester · Accepted Answer · 2015-03-12 22:23:58Z

You can get resolved data in your controller using $route service.

Please see demo here http://plnkr.co/edit/2oID3G0QStTOGEPPLQ3h?p=preview

so in your example it going to looks like below:

.when('/banner1', {
    templateUrl: 'banner1.php',
    controller: 'ModuleController',
    resolve: {
      properties: function() {
        return { name: 'Banner', slug: 'banner' };
      }
    }
  })

and in controller :

app.controller('ModuleController', ['$http', '$route',
  function($http, $route) {
    var module = this;

   //get resolved properties
    module.properties = $route.current.locals.properties;

    if (module.properties.slug.length) {
      $http.get(module.properties.slug + '.php').success(function(data) {
        module.list = data;
      });
    }
  }
]);

Сергей Савин · Accepted Answer · 2016-09-03 09:17:06Z

3

resolve : {
    properties : ['projects', 'user', function (projects, user) {
        return user.getData().then(function () {
            return projects.getData();
        });
    }]
}

answered Sep 3, 2016 at 9:17

Сергей Савин

312 bronze badges

2 Comments

HaveNoDisplayName Over a year ago

Add some explanation

Paritosh Over a year ago

Please provide more details to your answer as this post has been found in low quality post. Code only and 'try this' answers are discouraged as it doesn't provide any searchable content and why people should 'try this'.

Özgür · Accepted Answer · 2018-03-14 11:20:57Z

0

Using Dependency Injection with ng-route try this;

var myApp = angular.module("myApp", ["ngRoute", "localytics.directives"]);

myApp.config(['$routeProvider',function ($routeProvider) {

    $routeProvider
        .when("/", {
            templateUrl: "/TimeLine.html",
            controller: "MainCtrl"
        })    
        .when("/AddOrEditOccasion", {
            templateUrl: "/Html/GiftWhiz/AddOrEditOccasion.html",
            controller: "AddOrEditOccasionCtrl"
        })
        .when("/OccasionStart", {
            templateUrl: "/OccasionStart.html",
            controller: "OccasionStartCtrl"
        })        
}]);


myApp.controller("MainCtrl", ['$scope', '$http', '$location', function ($scope, $http, $location) {

   //your codes

}]);

edited Mar 14, 2018 at 11:20

answered Mar 14, 2018 at 8:37

Özgür

72 bronze badges

1 Comment

Toby Speight Over a year ago

Thank you for this code snippet, which might provide some limited short-term help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made.

Collectives™ on Stack Overflow

Angularjs: How to inject dependency from resolve routeProvider

4 Answers 4

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related