Ola,
Qual a explicação para o funcionamento do código abaixo do exercício 1 ? Eu retirei a tag "<img" do corpo da diretiva do angular (ng-controller="FotosController"), e mesmo assim a imagem carregou.
eta
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Ola,
Qual a explicação para o funcionamento do código abaixo do exercício 1 ? Eu retirei a tag "<img" do corpo da diretiva do angular (ng-controller="FotosController"), e mesmo assim a imagem carregou.
eta
O código que você colocou ou arquivo não veio na sua pergunta. Tem como postar novamente?
Poste o código para que eu possa ver. Uma coisa é certa: tem que ter uma tag img no seu html ou na sua diretiva ainda para a imagem ser exibida. Por isso preciso do codigo para ver.
Ola Flavio, abaixo o codigo solicitado. Lembrado que eu retirei a Tag img do corpo da diretiva controller do angular e mesmo assim ainda funciona. Qual o motivo? Não deveria funcionar somente no corpo ng-controller="FotosController" ?
''' <!DOCTYPE html>
Não está vindo o html. Você precisa usar backstick e não aspas simples como você está utilizando. O alura processa como html. Isso aqui é backstick `````````
<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>
``
<!-- Tag img removido do corpo da diretiva do angular -->
<img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
<body ng-controller="FotosController">
<div class="container">
<h1 class="text-center">Alurapic</h1>
</div><!-- fim container -->
</body>
</html>
Eu preciso do seu código O comportamento que você me relata ou eu não entendi ou tem ainda uma img em algum lugar. Por isso a importância deu ver seu código.
Agora o código apareceu! Vou ver assim que chegar em casa.
Valeu Jovem! Desculpe o amadorismo no "backstick ". Tinha esquecido desse detalhe rssrrs.
Você colocou a tag fora de body. O navegador entrou em quircks Mode e considerou a tag html o body. Isso não é coisa só angula, mas do html/browser. Se quiser fazer o teste, mova a diretiva do controller para outra tag e deixe a img dentro de body, mas o body sem o controller. Entende o problema? Seu navegador viu que você colocou indevidamente uma tag html (diretivas viram tags html) fora de body e o navegador a jogou para dentro de body para te ajudar, daí, como a tag fica dentro de body ele acha seu controller.
Aguardo seu feedback e teste.
Isso com base no html que você me passou. Você passou ele inteiro? Se eu abro seu arquivo eu vejo ele assim? Quero o html final do jeito que você diz que está, sem alteração sua ou comentário para me ajudar. Acho que esse html não é o completo. Digo isso porque não tem tag de fechamento head.
<!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>
tag image fora da diretiva ng-controller="FotosController"
<img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
<body ng-controller="FotosController">
<div class="container">
<h1 class="text-center">Alurapic</h1>
</div><!-- fim container -->
</body>
tag image fora da diretiva ng-controller="FotosController"
<img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
</html>Parece que é o que disse mesmo. Compreende?
Compreendo sim. Mas não esperava tamanha habilidade do navegador em tentar corrigir. Obrigado Flavio. abs
É Av, por isso que chamamos isso de quicks mode. Seu navegador tenta te ajudar, por exemplo, o Chrome faz isso, mas não quer dizer que outros façam. Mas eu quero que você veja isso com mais clareza. Por exemplo, se você tem esse HTML:
<html>
<head></head>
<img src="logo.png">
<body>
</body>
</html>Quando ele é carregado e a árvore DOM do navegador é construída ela fica assim:
<html>
<head></head>
<body>
<img src="logo.png">
</body>
</html>Como você pode ver isso? Basta criar essa página simples (ou usar a sua mesmo do angular) e usar o inspect do Google Chrome para visualizar a estrutura do DOM.
No fim, é sempre recomendado seguir o padrão da W3C da estrutura mínima de um HTML para que essas coisas não aconteçam. No seu caso, sei que fez isso para testar o escopo do controller, mas como jogou para fora do body, ocorreu o que acabei de explicar.
Abraço e bom estudo!