Existe alguma dependência do projeto? algum arquivo que precisa ser baixado? Venho acompanhando as aulas e estava dando tudo certo, porém ao substituir os endereços das imagens pela Angular expressions "{{foto.url}}" ele não funciona! Já revi todo o código e está tudo igual!
Solucionado (ver solução)
Solucionado
(ver solução)
11
respostas
respostas
Dúvida Capítulo 1 - Construindo Alicerce da aplicação
Respondendo sua pergunta: não há dependência nenhuma, tudo tem que funcionar, aliás, olhando no próprio fórum podemos notar que outros alunos passaram dessa parte sem problema.
Será que está tudo igual mesmo? Só posso afirmar isso vendo seu código. Aliás, você abriu o console do seu navegador para ver qualquer mensagem de erro?
Cole seu index.html e o código do seu main.js e do seu FotosController.js aqui, mas please, use a formatação e texto para que eu possa compreender melhor o código.
Aguardo seu feedback.
Obrigado Flavio pelo retorno rápido. segue o código!
/* Controller */
angular.module('alurapic').controller('FotosController', function($scope) {
$scope.foto = {
titulo : 'Leão',
url : 'http://www.fundosanimais.com/Minis/leoes.jpg'
};
});
/* fim controller */
/* 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>
</head>
<body ng-controller="FotosController">
<div class="container">
<h1 class="text-center">Alurapic</h1>
<img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
</div>
</body>
</html>
/* fim html */
/* main.js */
angular.module('alurapic', []);minha tela aparece O nome Alurapic mas na foto não aparece nada apenas {{foto.titulo}}..
/* Main.js */
angular.module('alurapic', []);
/* fim Main.js */
/*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>
</head>
<body ng-controller="FotosController">
<div class="container">
<h1 class="text-center">Alurapic</h1>
<img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
</div>
</body>
</html>
/*fim index.html */
/*controller */
angular.module('alurapic').controller('FotosController', function($scope) {
$scope.foto = {
titulo : 'Leão',
url : 'http://www.fundosanimais.com/Minis/leoes.jpg'
};
});Quando você diz que não funciona, ele não existe foto alguma, certo? Abriu o navegador o console F12 e viu a mensagem que está sendo exibida em vermelho? Se você está visualizando {{foto.titulo}} é porque há um erro de digitação em seu código ou alguma configuração capenga (arquivos podem estar sendo gravados em diretórios que não é o que está no seu src da tag script).
Abra o console, lá terá uma mensagem em vermelho, clique nela que te levará para a página do angular. Copie a URL que aparece no navegador e cole aqui. Se não tiver URL nenhuma, cole aqui a mensagem de erro do console.
Chuto que você gravou os arquivos em pastas diferentes do que é pedido, mas é chute. Só vendo seu log mesmo.
não aparece nenhuma foto, apenas {{foto.titulo}}
https://docs.angularjs.org/error/ng/areq?p0=FotosController&p1=not%20a%20function,%20got%20undefined
Só aparece essa mensagem? Não tem outra acima, não? Isso acontece quando o controller não é enxergado pela aplicação. Você salvou os arquivos nos locais corretos?
Sua tag
<script src="js/controllers/fotos-controller.js"></script>
aponta para um arquivo que tem que existir dentro desta pasta.
Não adianta o código estar correto e o controller não foi carregado, por isso é importante verificar os diretórios e os arquivos.
Flávio, o meu está dando o mesmo erro do dele, mas parece essa mensagem. Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=FotosController&p1=not%20a%20function%2C%20got%20undefined at Error (native)
Olá. Veja a importação dos seus arquivos. Ele não acha a declaração de FotosController.
Tudo certo?
solução!
Deu certo, Flávio. Esqueci var antes do $scope. Valeu!
Se pintar uma nova dúvida Post em um novo Post. Fica mais fácil para ajudar.
Abraço para vocês.