Desde o começo do curso as imagens não carregam, já verifiquei todo o código, está tudo conforme o vídeo..
Solucionado (ver solução)
Solucionado
(ver solução)
42
respostas
respostas
2. Tornando nossa aplicação mais próxima de uma aplicação real
Com certeza tem algo que não está igual ao vídeo :) Falo com tanta certeza porque vários alunos já terminaram o treinamento sem problema algum.
Para descobrir o que está acontecendo, é necessário que eu vejo todo o seu código aqui (main.js, fotos-controller.js, index.html, etc.).
Sou igual a São tomé, só acredito vendo :)
Porém, quando você rodar a aplicação, a foto não é exibida, você em algum momento abriu o console do seu navegador para ver se alguma mensagem de erro é exibida? É essa mensagem que precisa ver.
Outro ponto que é recorrente aqui é que alguns alunos gravam os arquivos em pastas diferentes ou linkam o arquivo errado no index.html.
Enfim, tudo isso é especulação. Para ajudá-lo bem, preciso do seu código e da mensagem exibida no console.
Quando mais rápido você enviar, mais rápido descobriremos o problema.
Aguardo seu feedback.
Abro meu console do navegador e nenhum erro é exibido, como se tudo estivesse ok, segue os códigos:
/* index.html */
<!DOCTYPE html>
<html lang="pt-br" np-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>
</head>
<body ng-controller="FotosController">
<div class="container">
<div clas="jumbotron">
<h1 class="text-center">Alurapic</h1>
</div>
<div ng-repeat="foto in fotos" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{foto.titulo}}</h3>
</div>
<div class="panel-body">
<img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
</div>
</div><!-- fim panel -->
</div> <!-- fim container -->
</body>
</html>
/*main.js*/
angular.module ('alurapic', []);
/*fotos-controller.js*/
angular.module('alurapic').controller('FotosController', function($scope, $http) {
$scope.fotos = [];
$http.get('v1/fotos')
.sucess(function(fotos){
$scope.fotos = fotos;
})
.error(function(erro) {
console.log(erro);
})
});Só me tira uma dúvida, a Angular expression é exibida ou a foto fica em branco?
Valdemir, acredito que o erro esteja no método .success do $http, no seu código está:
$http.get('v1/fotos')
.sucess(function(fotos){
$scope.fotos = fotos;
})Faltou um c no .success.
Veja se isso resolve. Qualquer coisa só dar um toque.
É exibida a Angular expression porém a imagem não carrega, ele sabe que tem uma imagem ali tanto que tem um ícone de img com o {{foto.titulo}}, porém ela não carrega.
Olha, olhando seu código vi que você escreveu errado:
$http.get('v1/fotos')
.sucess(function(fotos){
$scope.fotos = fotos;
})Veja que o correto é success, são dois c. Tem certeza que não havia nenhuma mensagem de erro no console?
Por isso que eu sou igual a São Tomé, só acredito vendo :)
Tente e depois me diga. A ideia é você ficar ainda melhor no Angular quando chegar no final do curso.
Olá Fabrício, agradeço por encontrar esse erro, eu logo o corrigi e continua da mesma maneira..
Opa! O Fabrício postou o problema primeiro do que eu, quando submeti já estava resposta dele. Não deixe de dar os créditos para ele se for apenas isso.
Agora que você corrigiu, tenha certeza de ter recarregado a página. Agora dá uma olhada no log do seu navegador. E ai, o que aparece?
Pois bem Flávio, mesmo antes de eu corrigir o console do Chrome não indicava nenhum erro, assim como após eu corrigi-lo.. Atualizei e nada muda.
O que é exibido na sua tela é a {{foto.algumacoisa}} certo? Desse jeito? Se for, tem que ter mensagem de erro no console do Chrome. Se não tem, complica. Recarrega a página e faz novamente.
Alias, você checou 10 vezes se os arquivos estão na pasta correta? Se você gravou o main.js e o fotos-controller.js onde é para gravar?
Será que você está abrindo o console do Chrome, mas não está olhando a aba CONSOLE? Verifique isso para mim.
A pasta alurapic está na raiz C:, o index.html está em alurapic/public , o main.js está em alurapic/public/js , o fotos-controller.js está em alurapic/public/js/controllers.
Creio que está tudo ok, porém não consigo entender porque meu navegador não carrega a imagem.. Desde o começo do curso está assim, quando eu especificava na tag o src="link da foto" ele ia, porém quando assimilei à uma Angular expression não roda.
Aguardando seu feedback. Uma hora a gente descobre o que você fez. É até legal porque você já fica blindado quando isso acontecer novamente.
Valdemir, se no lugar da foto ele exibe a angular expression, tem que haver uma mensagem no console do seu navegador. Você esta abrindo o console e está clicando na aba console?
Sim, eu rodo a página e depois F12 pra abrir o console no Chrome, e lá embaixo no Console apenas fica um > com o ponto de inserção piscando p/ digitar.
Quando teu console abrir, vai na aba (REDE/NETWORK) e recarrega a página com ele aberto. Várias arquivos serão listados. Tem algum na cor vermelha?
Você abriu o console correto, mas se ver, tem um monte de opção que oculta ou mostra infos do console. Tenha certeza de que ALL esteja marcada. Você pode ter desmarcado sem querer.
Cara, não faz sentido não funcionar. Mais de 200 pessoas já terminaram esse treinamento, Não sei o que há com seu código. Você vai compactar a sua pasta alurapic e me enviar por e-mail agora. OK? Raramente faço isso, mas é a melhor coisa a se fazer agora.
Estou aguardando seu arquivo:
flavio.almeida@caelum.com.br
Enviou lá?
Nenhum da cor vermelha Flávio, porém teve um request estranho.. :
%7B%7Bfoto.url%7D%7D 304 text/html (index):25 242 B 9 ms
angular.min.js 304 script (index):9 244 B 9 ms
bootstrap-theme.min.css 304 stylesheet (index):8 243 B 11 ms
bootstrap.min.css 304 stylesheet (index):7 244 B 6 ms
favicon.ico 304 text/html Other 242 B 5 ms
fotos-controller.js 304 script (index):11 241 B 9 ms
localhost 304 document Other 242 B 4 msmain.js
Esses foram os 8 requests, esse primeiro que achei estranho, tem haver com a {{foto.url}}, porém não está nada em vermelho, como eu disse, o Console não me apresenta nenhum erro.
Então, envie para mim seu projeto. Vou olhar com carinho.
Opa, envia o projeto para mim. Vou ver agora, neste instante e te falo.
Envie zipado para flavio.almeida@caelum.com.br
Foi enviado Flávio, confere o recebimento do e-mail. Aguardo seu feedback.
Ainda não chegou. Voltou?
Nada ainda.
Vou tentar enviar por outro e-mail, um instante por gentileza.
Quando me enviar, me envia sem a pasta node_modules. Ok? Pode apagar.. eu baixo ela aqui.
Não consigo enviar o arquivo compactado por nenhum e-mail... Eles me bloqueiam de enviar
Sim, os e-mails sempre bloqueiam, mas é fácil resolver: compacta o arquivo .zip. Depois de compactar, troque a extensão para .txt e me envia com .txt. No final eu mudo aqui. Isso é velho já, é uma política de segurança dos e-mails.
Mas me envia sem a pasta node_modules.
Aguardo seu arquivo.
Enviou lá?
Ainda não recebi.
Oi Valdemir, faz o lance de renomear o arquivo que não tem erro. Mas cuidado: se você usa windows, se alterar o nome do arquivo ele ficará projeto.txt.zip, porque o Windows esconde a extensão do arquivo. Para conseguir renomear tem que habilitar no Windows para conseguir ver a extensão de arquivos conhecidos. Ou pelo prompt de comando. Vai até a pasta onde está o arquivo e mande um:
ren projeto.zip projeto.txtConfere se o e-mail chegou Flávio.
Olhei seu projeto e ele está muito diferente. Há um executável do Node.js dentro dele e outros arquivos. O que é isso? npm, npm.cmd....
Talvez quando eu fui subir o servidor.. Fiz pelo cmd do Windows o npm install e depois o npm start
solução!
Descobri o problema. Não sei o motivo pelo qual você instalou o Node dentro da pasta do projeto. Os arquivos estão todos zuados! Aquele executável do Node.exe jamais deveria estar lá. Você realizou algum procedimento que mexeu nos arquivos que você criou (main.js, index.html) e não faço ideal do que seja.
A solução é simples: só baixar o projeto e fazer o exercício novamente. Eu baixei o projeto e fui fazendo e funciona perfeito. Porém, qualquer alteração que eu faço nos seus arquivos nada funciona.
No exercício do primeiro capítulo vem explicando como instalar o Node.js na plataforma windows.
CUIDADO: não aproveite o que você já digitou no seu projeto antigo, faça do zero novamente.
Com o node instalador é só rodar os comandos no terminal, porque ele fica instalado globalmente.
Nunca vi isso acontecer, aliás, nem uso a plataforma windows, por isso não sei o que aconteceu com seus arquivos.
Só deixar claro que dentro da pasta do projeto não deve existir arquivos do Node.exe, npm e nada do tipo. A instalação do Node disponibiliza o npm e o interpretador do Node em qualquer diretório do seu terminal. Não use seus arquivos, faça tudo do zero......e vai funcionar.
Ok Flávio, então independente do local onde eu instale o Node, só não posso dentro da pasta do meu projeto correto?
Segundo.. Devo deletar os arquivos existentes e voltar o curso do zero?
O Node é um runtime, necessário para você rodar aplicações JavaScript no backend (servidor). Quando você instalar o Node, nunca é dentro da pasta do projeto. Desinstale o Node.js e faça a instalação deixado o diretório padrão. Aliás, em nenhum momento no vídeo ou no exercício de instalação peço para mudar o diretório da instalação. Se você instalou o Node na pasta do projeto, provavelmente isso é a razão de todo o problema. O instalador mexeu nos seus arquivos e zuou a pasta do seu projeto.
A sugestão é tirar fora do Node.js, reinstalar o Node.js, baixar o projeto e ser feliz.
O node depois de instalado pode ser chamado em qualquer pasta do seu sistema operacional, porque ele fica no path.
Vai lá e me diz o resultado depois.
OBS: deixa o node ser instalado na pasta padrão dele, mudar por quê?
Ok, agradeço a atenção Flávio!!
Bom, agora é correr atrás do tempo perdido e cair dentro do Angular. Tenho certeza que agora tudo fluirá perfeitamente e que você vai gostar bastante do treinamento.
E ai Valdemir? Gostando do treinamento? Já terminou? Qualquer coisa posta uma nova dúvida! Abraço e bom estudo!