can't use $httpProvider and locationProvider in angular.js

1
votes

I am new to angular.js. And I used the $httpProvider and $locationProvider

  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular/angular-route.min.js"></script>
  <script src="lib/angular/angular-cookies.min.js"></script>
angular.module('myApp', [
  'ngRoute','ngCookies'  
]).config(['$routeProvider' , '$locationProvider', '$httpProvider' ,function($routeProvider) {
  $httpProvider.defaults.timeout = 5000;  // error
  $locationProvider.html5Mode(true);  // error
}])

when the app runs, it came out with a error : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.2/$injector/modulerr?p0=myApp&p1=Ref/localhost/lib/angular/angular.min.js)

My angular-min.js, angular-route.js, angular-cookie.js are all in 1.3.0 beta.2, don't know why it is happening?

4
angularjs

4 Answers

3
votes

I think that you forgot to add the $locationProvider and the $httpProvider as arguments of our config function.

Try this:

  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular/angular-route.min.js"></script>
  <script src="lib/angular/angular-cookies.min.js"></script>
   angular.module('myApp', [
  'ngRoute','ngCookies'  
   ]).
   config(['$routeProvider' , '$locationProvider', '$httpProvider', 
   function($routeProvider, $locationProvider, $httpProvider) {
   $httpProvider.defaults.timeout = 5000;  
   $locationProvider.html5Mode(true);  
   }])
1
votes

You forgot to inject $locationProvider and $httpProvider as arguments.

var app = angular.module('myApp', ['ngRoute','ngCookies']);

app.config(['$routeProvider' , '$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) {
      $httpProvider.defaults.timeout = 5000;  // error
      $locationProvider.html5Mode(true);  // error
}]);
1
votes

First you should add the following scripts:

<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="lib/angular/angular-cookies.min.js"></script>

Then you should configure:

var app = angular.module('myApp', ['ngRoute','ngCookies']);

app.config(['$routeProvider' , '$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) {
      $httpProvider.defaults.timeout = 5000;
      $locationProvider.html5Mode(true); 
}]);

NOTE: To avoid error: [$location:nobase] $location in HTML5 mode requires a tag to be present!) Don't forget to add:

<head>
...
...
<base href="/">
...
</head>
0
votes

The strings you add before the callback function (in config, controllers or directives) are here in case of minification of your JS to allow angular to match the minified variables and their signification.

Therefore, you should add the variables you need as parameters:

angular.module('myApp', [
  'ngRoute','ngCookies'  
]).config(
['$routeProvider' , '$locationProvider', '$httpProvider',
function($routeProvider,  $locationProvider, $httpProvider) {
    $httpProvider.defaults.timeout = 5000;  
    $locationProvider.html5Mode(true);  
}])