Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Dúvida no Ex. 6 da Aula 3 - Minimizando a complexidade do nosso HTML

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Minimizando a complexidade do nosso HTML e atividade Colocando em prática

por João Guilherme dos Santos Graczyk
| 26.1k xp | 4 posts
Analista de Sistemas

Minha página esta apresentando o seguinte erro no console quando inclui a diretiva no meu projeto:

13:16:44.292 SyntaxError: expected expression, got '<'1 minhas-diretivas.js:2:0

13:16:44.321 Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.2/$injector/modulerr?p0=alurapic&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.2%2F%24injector%2Fmodulerr%3Fp0%3DminhasDiretivas%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.5.0-rc.2%252F%2524injector%252Fnomod%253Fp0%253DminhasDiretivas%250AK%252F%253C%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A6%253A421%250Aie%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A25%253A147%250Ab%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A24%253A211%250Aie%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A24%253A1%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A39%253A287%250An%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A7%253A364%250Ag%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A39%253A135%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A39%253A304%250An%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A7%253A364%250Ag%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A39%253A135%250Agb%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A43%253A164%250AAc%252Fc%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A20%253A463%250AAc%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A21%253A274%250Ade%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A20%253A83%250A%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A306%253A372%250Ab%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A183%253A159%250APf%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A36%253A475%250AOf%252Fd%2540http%253A%252F%252Flocalhost%253A3000%252Fjs%252Flib%252Fangular.min.js%253A36%253A424%250A%0AK%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A6%3A421%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A40%3A60%0An%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A7%3A364%0Ag%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A39%3A135%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A39%3A304%0An%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A7%3A364%0Ag%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A39%3A135%0Agb%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A43%3A164%0AAc%2Fc%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A20%3A463%0AAc%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A21%3A274%0Ade%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A20%3A83%0A%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A306%3A372%0Ab%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A183%3A159%0APf%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A36%3A475%0AOf%2Fd%40http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A36%3A424%0A
K/<() angular.min.js:6
g/<() angular.min.js:40
n() angular.min.js:7
g() angular.min.js:39
gb() angular.min.js:43
Ac/c() angular.min.js:20
Ac() angular.min.js:21
de() angular.min.js:20
<anônima> angular.min.js:306
b() angular.min.js:183
Pf() angular.min.js:36
Of/d() angular.min.js:36
1 angular.min.js:6:421


13:16:44.924 O uso de document.createAttribute() está obsoleto. Use element.setAttribute() no lugar.1 imtranslatorOverlay.js:2352:10


13:16:44.924 O uso de setAttributeNode() está obsoleto. Use setAttribute() no lugar.1 imtranslatorOverlay.js:2354:1

Atualizei a versão do angular mas não funcionou.

7 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Relaxe, bilhões de alunos passaram dessa parte sem problema. Só te peço uma coisa: volte com a biblioteca anterior, você atualizou seu projeto com a versão 1.5 RC que ainda está cheia de problemas, sequer é a versão final. Até te dou uma dica, jamais faça isso em qualquer projeto seu, usar uma lib instável.

Então, quando voltar com as bibliotecas originais do projeto, realize o teste novamente e cole aqui a nova mensagem do Chrome que ele exibir para você.

Massssss..além disso, cole em separado o código do seu arquivo de diretivas, o código main.js, o código do controller usada na página que usa a diretiva e o código do template, nessa ordem.

Ou você digitou algo errado, ou esqueceu de importar algo, ou ou ou.. por isso preciso ver :) Parece que é erro de digitação, pela primeira mensagem de erro apresentada.

Vi também que você aqui no Alura não fez nenhum curso de Javascript antes, apenas o de HTML. Você tem uma base sólida de Javascript? Angular tem uma carga de programação pesada que necessita traquejo com JS, por isso lógica de programação e Javascript são pré-requisitos do treinamento.

Aliás, quando sair Angular 2, a carga de programação é 15 vezes mais pesada!

por João Guilherme dos Santos Graczyk
| 26.1k xp | 4 posts
Analista de Sistemas

Retornei a versão do angular original do projeto.

Segue a mensagem de erro do Chrome.

Uncaught SyntaxError: Unexpected token <
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=alurapic&p1=Error%…0d%20(http%3A%2F%2Flocalhost%3A3000%2Fjs%2Flib%2Fangular.min.js%3A17%3A381)

Código de diretiva :

angular.module('minhasDiretivas', [])
    .directive('meuPainel', function() {

        var ddo = {};

        ddo.restrict = "AE";
        ddo.transclude = true;

        ddo.scope = {
            titulo: '@'
        };

        ddo.templateUrl = 'js/directives/meu-painel.html';           

        return ddo;
    });

Código do main: 

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

Código do controller:

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

    $scope.fotos = [];

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

});

Código do template:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center">{{titulo}}</h3>
    </div>
    <div class="panel-body" ng-transclude>
    </div>
</div>
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Opa, faltou index.html. Cole também :) Ah, e também da parcial que usa a diretiva que você criou. Tudo bem?

por João Guilherme dos Santos Graczyk
| 26.1k xp | 4 posts
Analista de Sistemas

Desculpe, segue o fonte do index.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="js/main.js"></script>
        <script src="js/controllers/fotos-controller.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
    </head>
    <body ng-controller="FotosController">
        <div class="container">
            <div class="jumbotron">
                <h1 class="text-center">Alurapic</h1>
            </div>
            <div class="row">
                <meu-painel class="col-md-2" ng-repeat="foto in fotos" titulo="{{foto.titulo}}">
                   <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
                </meu-painel>
            </div><!-- fim row -->
        </div><!-- fim container -->
    </body>
</html>
solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Opa! :)

Esse arquivo existe?

<script src="js/directives/minhas-diretivas.js"></script>

Tem certeza absoluta? Uma dica: abre o Chrome e roda a aplicação. Depois abre o console e tem uma aba chamada Rede(ou network). Clique nela e recarregue a página. O que estiver em vermelho é o que não foi encontrado.

por João Guilherme dos Santos Graczyk
| 26.1k xp | 4 posts
Analista de Sistemas

O arquivo estava com o nome errado era, "directiva". Obrigado

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Excelente jogui13!

Sabe pq eu sabia que só podia ser esse arquivo? Por que a mensagem de erro (do you speak english?) alegava que não foi possível injetar um módulo. Como você havia criado o módulo minhasDiretivas seu script precisava ser carregado para que ele pudesse ser injetado em main.js.

Jogui, vai uma dica aqui: toda vez que você postou seu código ele veio sem formatação. Como sou moderador, eu alterei seus posts para que ficassem bonitos. Quando for postar um código, dê uma olhada em dica de formatação na caixa perto onde vc escreve a resposta. Valeu? Dessa forma.. fica mais fácil para a gente.

Se tiver dúvida em saber como fiz isso, pede para alterar um post seu e veja como envolvi seu código em um sintaxe especial.

Bom estudo e atenção redobrada, viu! :)

Abraço do Flávio Almeida