Clever Geek Handbook

AngularJS [$ injector: unpr] Unknown provider: dataProvider <- data <- PageCtrl

I have seen other answers and nothing has helped me so far. I am getting this error with the following code in the file:

   angular.module('myApp.page', ['ngRoute'])
        .config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/page/:pageId', {
                templateUrl: 'page/view.html',
                controller: 'PageCtrl',
                resolve: {
                    data: function($q, $http, $routeParams) {
                        var deferred = $q.defer();
                        $http({method: 'GET', url: 'http://....' + $routeParams.pageId})
                            .then(function(data) {
                            deferred.resolve(data);


       });
                    return deferred.promise;
                }
            }
        })
    }])
    .controller('PageCtrl', function ($scope, $rootScope, data) {
//do stuff
}

And in app.js I have this:

angular.module('myApp', [
    'ui.bootstrap',
    'ngRoute',
    'ngTouch',
    'ngResource',
    'myApp.page'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/'});
}]).
config(['$provide', Decorate])

Everything worked correctly and I didn't get the data using the HTTP method without problems until I started using the Q library and moved the data into the config section. Any tips? None of the other answers seem to work. Thanks in advance!

+3


source share


1 answer


You are doing this because you are using a directive ng-controller

to instantiate a controller PageCtrl

that accepts a dynamic dependency data

that is only created by the router. So when you inject a dynamic dependency through the router and execute the router, instantiate the controller, you don’t need and don’t need to instantiate the controller through ng-controller

, it will just quit due to no injector dependency available. the router will manage the creation of the controller and configure it to the appropriate view for you.



So, just remove ng-controller from your view, also make sure the partial image represented by the route is complete enough to represent the view that is specific to the controller's functionality. Also I have seen that it is good practice not to start with a partial view with ng-controller

and instantiate using a route, which will help make that partial view more reusable with a different controller. Also, when creating a unit test, you can easily mock a dynamic dependency and serve it through a service $controller

.

+4


source






More articles:


All Articles