Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Erro com importação do Angular

Referente ao curso AngularJS: crie webapps poderosas

por Nilson Pereira da Silva Neto
| 332.2k xp | 16 posts

Estou tentando criar uma aplicação que utiliza Angular, com base em um servidor feito com SpringBoost.

Porém, não consigo carregar o Angular e tomo o seguinte erro no console do navegador:

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=registerpic&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Fmodulerr%3Fp0%3DservicosGerais%26p1%3DError%253A%2520%255B%2524injector%253Amodulerr%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.3.15%252F%2524injector%252Fmodulerr%253Fp0%253D%252524http%2526p1%253DError%25253A%252520%25255B%252524injector%25253Anomod%25255D%252520http%25253A%25252F%25252Ferrors.angularjs.org%25252F1.3.15%25252F%252524injector%25252Fnomod%25253Fp0%25253D%25252524http%25250A%252520%252520%252520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A8080%25252Fjs%25252Flib%25252Fangular.min.js%25253A6%25253A417%25250A%252520%252520%252520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A8080%25252Fjs%25252Flib%25252Fangular.min.js%25253A21%25253A412%25250A%252520%252520%252520%252520at%252520a%252520(http%25253A%25252F%25252Flocalhost%25253A8080%25252Fjs%25252Flib%25252Fangular.min.js%25253A21%25253A53)%25250A%252520%252520%252520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A8080%25252Fjs%25252Flib%25252Fangular.min.js%25253A21%25253A296%25250A%252520%252520%252520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A8080%25252Fjs%25252Flib%25252Fangular.min.js%25253A35%25253A46%25250A%252520%252520%252520%252520at%252520r%252520(http%25253A%25252F%25252Flocalhost%25253A8080%25252Fjs%25252Flib%25252Fangular.min.js%25253A7%25253A302)%25250A%252520%252520%252520%252520at%252520g%252520(http%25253A%25252F%25252Flocalhost%25253A8080%25252Fjs%25252Flib%25252Fangular.min.js%25253A34%25253A399)%25250A%252520%252520%252520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A8080%25252Fjs%25252Flib%25252Fangular.min.js%25253A35%25253A63%25250A%252520%252520%252520%252520at%252520r%252520(http%25253A%25252F%25252Flocalhost%25253A8080%25252Fjs%25252Flib%25252Fangular.min.js%25253A7%25253A302)%25250A%252520%252520%252520%252520at%252520g%252520(http%25253A%25252F%25252Flocalhost%25253A8080%25252Fjs%25252Flib%25252Fangular.min.js%25253A34%25253A399)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252Fjs%252Flib%252Fangular.min.js%253A6%253A417%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252Fjs%252Flib%252Fangular.min.js%253A35%253A320%250A%2520%2520%2520%2520at%2520r%2520(http%253A%252F%252Flocalhost%253A8080%252Fjs%252Flib%252Fangular.min.js%253A7%253A302)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A8080%252Fjs%252Flib%252Fangular.min.js%253A34%253A399)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252Fjs%252Flib%252Fangular.min.js%253A35%253A63%250A%2520%2520%2520%2520at%2520r%2520(http%253A%252F%252Flocalhost%253A8080%252Fjs%252Flib%252Fangular.min.js%253A7%253A302)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A8080%252Fjs%252Flib%252Fangular.min.js%253A34%253A399)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252Fjs%252Flib%252Fangular.min.js%253A35%253A63%250A%2520%2520%2520%2520at%2520r%2520(http%253A%252F%252Flocalhost%253A8080%252Fjs%252Flib%252Fangular.min.js%253A7%253A302)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A8080%252Fjs%252Flib%252Fangular.min.js%253A34%253A399)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fjs%2Flib%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fjs%2Flib%2Fangular.min.js%3A35%3A320%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Flib%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Flib%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fjs%2Flib%2Fangular.min.js%3A35%3A63%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Flib%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Flib%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Flib%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Flib%2Fangular.min.js%3A17%3A381)%0A%20%20%20%20at%20uc%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Flib%2Fangular.min.js%3A18%3A179)
    at angular.js:38
    at angular.js:4138
    at r (angular.js:323)
    at g (angular.js:4099)
    at ab (angular.js:4025)
    at d (angular.js:1452)
    at uc (angular.js:1473)
    at Jd (angular.js:1367)
    at angular.js:26304
    at HTMLDocument.a (angular.js:2762)

Alguém pode me ajudar ?

4 respostas
por Nilson Pereira da Silva Neto
| 332.2k xp | 16 posts

Meu código da front-end é o seguinte:

main.js:

angular.module('registerpic', ['servicosGerais']);

servicos-gerais.js (services):

angular.module('servicosGerais', ['$http'])
.factory('notaService', function($http){
 //Restante do Código
});

nota-controller.js :

angular.module('registerpic').controller('notaController', ['notaService', function($scope, notaService){ 
    //Restante do código
}]);

index.html:

<!DOCTYPE html>
<html lang="pt-br" ng-app="registerpic">
    <head>
        <meta charset="UTF-8">
        <title>Alurapic</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <script src="js/lib/angular.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/services/servicos-gerais.js"></script>
        <script src="js/controllers/nota-controller.js"></script>
    </head>
    <body>
        <div class="jumbotron">
          <h1 class="text-center">Registerpic</h1>
          <h6 class="text-center">Registro de Receitas e Despesas</h6>
        </div>

        <div ng-controller="notaController">
          <table>
              <tr>
                  <td width="100">ID:</td>
                  <td><input type="number" id="id" ng-model="nota.id" /></td>
              </tr>
              <tr>
                  <td width="100">Name:</td>
                  <td><input type="number" id="tipo" ng-model="nota.tipo" /></td>
              </tr>
              <tr>
                  <td width="100">Descicao:</td>
                  <td><input type="text" id="descricao" ng-model="nota.descricao" /></td>
              </tr>
              <tr>
                  <td width="100">Valor:</td>
                  <td><input type="number" id="valor" ng-model="nota.valor" /></td>
              </tr>
          </table>

          <a class="btn btn-primary" ng-click="pegaNota(nota.id)">Carregar</a>
          <a class="btn btn-primary" ng-click="atualizaNota(nota.id, nota.tipo, nota.descricao, nota.valor)">Atualizar</a>
          <a class="btn btn-primary" ng-click="adicionaNota(nota.tipo, nota.descricao, nota.valor)">Adicionar</a>
          <a class="btn btn-danger" ng-click="removeNota(nota.id)">Remover</a>

          <a class="btn btn-primary" ng-click="buscaTodasNotas()">Carregar Todos</a><br/><br/>
          <div ng-repeat="nota in notas">
            Tipo: {{nota.tipo}}, Descrição: {{nota.descricao}}, Valor: {{nota.valor}}
          </div>
    </body>
</html>
solução!
por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team Desenvolvedor e Instrutor

Oi Nilson,

Lá em servicos-gerais.js vc pede o módulo $http como dependência do módulo servicosGerais.

O erro diz que o módulo $http não existe. Vou explicar o porquê.

No Angular1, $http não é um módulo separado, mas sim, um serviço que já vem embutido no angular.

Então quando vc faz:

angular.module('servicosGerais', ['$http'])
.factory('notaService', function($http){
 //Restante do Código
});

o angular procura um módulo chamado $http, e não um serviço. Como vc precisa do serviço $http dentro da factory 'notaService', basta pedir como parâmetro nessa factory. O código fica assim:

angular.module('servicosGerais', [])
.factory('notaService', function($http){
 //Restante do Código
});

O angular sabe pelo nome do parâmetro que vc colocou que ele deve injetar o serviço $http na sua factory notaService.

por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team Desenvolvedor e Instrutor

Outra coisa Nilson,

Vou te falar como que achei esse erro no seu código, porque pode te ajudar no futuro =)

Eu achei esse erro no seu código por causa da mensagem de erro que vc postou. Ela é meio medonha, mas diz bastante coisa. No geral, os erros do Angular1 vem acompanhados de um link que te direciona pra uma msg de erro um pouco mais agradável. No caso do erro no seu código, ele continha esse link aqui.

Nesse link, a msg de erro continha outro link, e nesse link, mais uma mensagem de erro, com mais um link. A trilha de links de erro toda chegou nesse erro:

https://code.angularjs.org/1.3.15/docs/error/$injector/nomod?p0=$http

Aí eu consegui ter uma ideia de onde olhar, e enxerguei o problema que estava acontecendo :)

por Nilson Pereira da Silva Neto
| 332.2k xp | 16 posts

Muito obrigado, ajudou bastante! E sobre a dica, ela caiu como uma luva! Será bastante útil! Mais uma vez, obrigado, tenhauma boa noite!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software