Why cant use provider inside the angular config?

Question

I am developing an angular app.In this app i need to add a route handler to do the following

1.listen to /app/:appid route depending on the appid parameter download some files from another server to this server.

files looks like this

appid
|
|-html
|    |
|    ->index.html
|
|-javascript
     |
     ->app.js

HTML folder and java script folder may have several files.but index.html file will definitely be there.

2.after downloading files, it should create a route handler as following

/appview/appid

which points to the index.html file which just downloaded.

I created the request handler to download the files. It require parameters as following

localhost:port/requesthandler.ashx?appid=myappid

Request handler was tested and confirmed that it is functioning properly.Files will be downloading to app/apps/appid folder.

Then I created the route.config.js as following

var app = angular.module('app');

app.constant('routes', getRoutes());


app.config(function ($provide) {

    $provide.provider("dataprovider", function () {
        return {
            $get: function ($http,$q) {
                return {
                    getData: function (appid) {
                        var defer = $q.defer();
                        $http.get('requestHandler.ashx?appid=' + appid).success(function (data) {

                            defer.resolve(data);

                        });
                        return defer.promise;
                    }
                };
            }
        };
    });
});

app.config(['$routeProvider', 'routes', 'dataprovider', routeConfigurator]);

function routeConfigurator($routeProvider, routes, dataprovider) {


    routes.forEach(function (r) {
        $routeProvider.when(r.url, r.config);
    });

    $routeProvider.when("/app/:appid", {
        redirectTo: function (routeParams, path, search) {
            $routeProvider.when("/appview/" + routeParams.appid, {
                templateUrl: 'app/apps/'+routeParams.appid+'/html/index.html',

            });


            dataprovider.getData(routeParams.appid);

            return "/appview/" + routeParams.appid;
        }
    });
    $routeProvider.otherwise({ redirectTo: '/dashboard' });
}


function getRoutes() {
    return [
        {
            url: '/dashboard',
            config: {
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: '<i class="fa fa-dashboard"></i> Dashboard'
                }
            }
        }
    ];
}

When i run the code, app stopped and gives following error.

Uncaught object localhost:6406/scripts/angular.js:3809

That particular line in angular.js file says this.

throw $injectorMinErr('modulerr', "Failed to instantiate module {0} due to:\n{1}",

But when I removed the parameter 'dataprovider' from second config, the app runs properly. but then I cant use dataprovider to download files to the server.

after removing the 'dataprovider' line looks like this.

app.config(['$routeProvider', 'routes',  routeConfigurator]);

function routeConfigurator($routeProvider, routes) {....

Can anyone show me what am I missing here?

Answer 1

You would need to suffix the provider name with 'Provider' string.

app.config(['$routeProvider', 'routes', 'dataproviderProvider', routeConfigurator]);

function routeConfigurator($routeProvider, routes, dataproviderProvider) {

}

Notice that the dataprovider provider is injected into the config function. This injection is done by a provider injector which is different from the regular instance injector, in that it instantiates and wires (injects) all provider instances only.