Error using $http Angularjs

Asked

Viewed 103 times

2

I’m trying to call the $http method from Angularjs to get information from a REST Webservice, but the following error appears:

Error: [$injector:modulerr] http://errors.angularjs.org/1.2.23/$injector/modulerr?p0=contatosApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.23%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.23%252F%2524injector%252Fnomod%253Fp0%253DngRoute%250Ax%252F%253C%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A6%253A443%250AZc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A21%253A1%250AZc%252Fb.module%253C%252F%253C%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A20%253A376%250Ae%252F%253C%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A33%253A265%250Ar%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A7%253A288%250Ae%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A33%253A207%250Ae%252F%253C%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A33%253A273%250Ar%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A7%253A288%250Ae%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A33%253A207%250Agc%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A36%253A307%250Afc%252Fc%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A18%253A168%250Afc%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A18%253A380%250AXc%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A17%253A422%250A%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fangular.min.js%253A214%253A144%250AjQuery.Callbacks%252Ffire%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fjquery-1.11.1.js%253A3119%253A1%250AjQuery.Callbacks%252Fself.fireWith%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fjquery-1.11.1.js%253A3231%253A7%250A.ready%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fjquery-1.11.1.js%253A3443%253A38%250Acompleted%2540file%253A%252F%252F%252Fdados%252FProjetos%252FEclipse%252FangularJSTutorial%252Fweb%252Fjs%252Fjquery-1.11.1.js%253A3474%253A3%250A%0Ax%2F%3C%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A6%3A443%0Ae%2F%3C%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A34%3A97%0Ar%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A7%3A288%0Ae%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A33%3A207%0Ae%2F%3C%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A33%3A273%0Ar%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A7%3A288%0Ae%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A33%3A207%0Agc%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A36%3A307%0Afc%2Fc%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A18%3A168%0Afc%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A18%3A380%0AXc%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A17%3A422%0A%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fangular.min.js%3A214%3A144%0AjQuery.Callbacks%2Ffire%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fjquery-1.11.1.js%3A3119%3A1%0AjQuery.Callbacks%2Fself.fireWith%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fjquery-1.11.1.js%3A3231%3A7%0A.ready%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fjquery-1.11.1.js%3A3443%3A38%0Acompleted%40file%3A%2F%2F%2Fdados%2FProjetos%2FEclipse%2FangularJSTutorial%2Fweb%2Fjs%2Fjquery-1.11.1.js%3A3474%3A3%0A

My app.js is like this:

var myApp = angular.module("contatosApp", [ 'ngRoute' ]);

myApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/contatos', {
    templateUrl : 'listContatos.html',
    controller : 'contatosController'
}).when('/addContatos', {
    templateUrl : 'createContato.html',
    controller : 'contatosController'
}).when('/deleteContato', {
    templateUrl : 'listContatos.html',
    controller : 'contatosController'
}).otherwise({
    redirectTo : '/contatos'
});
} ]);

myApp.config([ '$httpProvider', function($httpProvider) {
  $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
} ]);

myApp.service("contatosService", function($http, $rootScope) {

this.getContatos = function(callback) {

    var url = 'http://localhost:8080/agendaws/api/v1/contato/json/getAll';
    $rootScope.contatos = $http.get(url).success(callback);

};

});

myApp.run(function($rootScope, contatosService) {

contatosService.getContatos(function(data) {
    $rootScope.contatos = data;
});
});


myApp.controller("contatosController", function contatosController($scope, contatosService) {

});

1 answer

2


You need to include the ngRoute file (angular-route.js) because the module comes in a separate file.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.min.js">

Here a Jsbin with your code working.

Tip: During development it is best to use the not minimized version of Angular, so errors are more descriptive.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.