Unknown $http Provider in Angular

Question

I need to use $http service in config method. But I can't use $http in config, I am getting unknown Provider error message.

My code :

.config(function($http, $routeProvider, $provide) {
    $http.get("sampleslist.js").success(function(data) {
        var loop = 0, currentRoute;

        for (loop = 0; loop < data[loop].pages.length; loop++) {
            currentRoute = data[loop].pages;

            var routeName = "/" + currentRoute[loop].name;
            $routeProvider.when(routeName, {
                templateUrl:"/" + currentRoute.name + ".html",
            })
        }
    })

    app = {controller: $controllerProvider.register}
})

Can you please provide the solution for this?

Well, as you said, you can't use $http in the config phase. You can use it in the run phase, though. — JB Nizet, Aug 16 '16 at 07:28
Possible duplicate of [Inject service in app.config](http://stackoverflow.com/questions/15937267/inject-service-in-app-config) — scokmen, Aug 16 '16 at 07:30

score 4 · Answer 1 · answered Aug 16 '16 at 08:00

4

It's not a good practice to use $http in the .config. One can use it either in .run or can make use of the service using either .service or .factory.

answered Aug 16 '16 at 08:00

Shashank

2,010
2
18
38

It is not about the practice. We can not inject $http in .config. – Akash Bhandwalkar Sep 24 '16 at 19:19

score 3 · Answer 2 · answered Aug 16 '16 at 07:38

If just need to make AJAX request you can actually retrieve $http server from the new injector:

.config(function($routeProvider, $provide) {
    var $http = angular.injector(['ng']).get('$http');
    $http.get("sampleslist.js").success(

        function(data) {

            var loop = 0,
                currentRoute;

            for (loop = 0; loop < data[loop].pages.length; loop++) {

                currentRoute = data[loop].pages;

                var routeName = "/" + currentRoute[loop].name;

                $routeProvider.when(routeName, {

                    templateUrl: "/" + currentRoute.name + ".html",

                })
            }
        })

    app = {
        controller: $controllerProvider.register,
    }
})

$routeProvider.when(routeName, { }) This function not hitting, why? — Gokul Kumar, Aug 16 '16 at 08:56
I wouldn't even suggest the OP circumvent the (intentional) limitation that Angular have put in; even then, `success` is a deprecated method and should not be used. Accessing `$http` in this way seems dangerous... — Dan, Aug 16 '16 at 11:39

score 3 · Answer 3 · edited May 23 '17 at 11:45

3

We cannot use http in config. For more details please check this link:

use $http inside custom provider in app config, angular.js

edited May 23 '17 at 11:45

Community

1
1

answered Aug 16 '16 at 07:40

Mohan P

422
3
16

Akash Bhandwalkar · Answer 4 · 2016-08-16T12:08:20.140

3

You can inject only providers in .config file. but $http is not provider, your angular app is searching for provider named $http but it is not able to find it so it threw error.

How to resolve this??

If you want any ajax call before your angular controller loading you can do it in .run

edited Aug 16 '16 at 12:08

answered Aug 16 '16 at 07:42

Akash Bhandwalkar

901
5
19

as per my knowledge/reading this is he flow of angular work. Above I meant to say is, You can run something before your controller loading. I should have mention data rather than page loading. app.config() app.run() directive's compile functions (if they are found in the dom) app.controller() directive's link functions (again, if found) – Akash Bhandwalkar Aug 16 '16 at 12:07

Krzysztof Atłasik · Answer 5 · 2016-12-20T14:43:40.103

1

Do you have control over sampleslist.js ? If yes, maybe just download it using tag and assign values to variables.

//sampleslist.js
var samplelist = {...}

//index.html
<script src="samplelist.js"></script>

Then you could inject this values to angular using angular.constant or just use variable samplelist

edited Dec 20 '16 at 14:43

answered Aug 16 '16 at 12:31

Krzysztof Atłasik

21,985
6
54
76

Unknown $http Provider in Angular

5 Answers5