2
respostas

Mensgem de erro: ReferenceError: angular is not defined ao incluir minhasDiretivas

Inclui a diretiva minhasDiretivas e agora dá o erro no console


ReferenceError: angular is not defined  ( para o arquivo main.js ) 
ReferenceError: angular is not defined  ( para o arquivo fotos-controler.js )

Segue os arquivos

inde.html

<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <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="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" >
        <script src="js/directives/minhas-diretivas.js"></script>
        <script src="js/main.js"></script>
         <script src="js/controllers/fotos-controller.js"></script>

    </head>
    <body ng-controller="FotosController">

        <div class="container">
            <div class="jumbotron">
                <h1 class="text-center">Alurapic</h1>
            </div>  

            <!-- -------------------------------------------------------------------------  -->
            <!-- Esse trecho de codigo repete as fotos do arquivo fotos-controller-->
            <!-- ng-repeat="foto in fotos" explicacao
                 ng-repeat: diretiva do bootstrap
                 foto: apelido para ser usado na pagina
                 fotos: nome dado no arrray do arquivo fotos-controller.js --> 
            <meu-painel ng-repeat="foto in fotos" titulo="{{foto.titulo}}">
                     <img class="img-responsive center-block"  src="{{foto.url}}" alt="{{foto.titulo}}">
            </meu-painel>    
            <!-- -------------------------------------------------------------------------  -->

        </div> <!-- fim container -->        
    </body>
</html>

main.js

angular.module("alurapic", ["minhasDiretivas"]);

foto-controler.js

angular.module("alurapic").controller("FotosController", function($scope, $http) {


        $scope.fotos = [ ];    

        $http.get('v1/fotos')
            .success(function(fotos){
                $scope.fotos = fotos;
            })
            .error(function(erro){
                console.log(erro);
            }); 



});

Alguém sabe como solucionar isso ?

Obrigado.

2 respostas

Oi Marco,

O arquivo do angular não está sendo carregado. Faltou fechar a tag <script>:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>

Boa Arthur,

realmente a tag nao estava fechada. Mas não era isso, eu inclui essa tag, porque já estava com erro antes.

Mesmo assim, agradeço pelo auxilio prestado.

Na tela aparece assim

{{foto.titulo}}

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