Importante

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!

1
resposta

Nao carrega a foto

Nao carrega a foto e no console nao tira nenhum erro!

Este é meu 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-contoller.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> <!-- fim container -->        
    </body>
</html>

Este é meu main.js

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

Este é meu fotos-controller.js

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

    var foto = {
        url: 'http://www.fundosanimais.com/800x600/gato.jpg',
        titulo: 'Gato'
    };
});
1 resposta

Fala ai Janile, tudo bem? Você precisa usar o $scope para que a foto esteja acessível no HTML.

Você precisa receber ele na função do controller e adicionar a foto dentro dele:

angular.module('alurapic').controller('FotosController', function($scope) {
    $scope.foto = {
        url: 'http://www.fundosanimais.com/800x600/gato.jpg',
        titulo: 'Gato'
    };
});

Outro detalhe, porque você está fazendo o curso de AngularJS? O mesmo já foi descontinuado e não é mantido mais pela Google.

Isso porque eles lançaram uma nova versão do framework.

Você precisa dar manutenção em algum projeto antigo? Algum uso específico dele?

Caso não, sugiro pausar esse curso e começar o novo.

Lembrando que o novo curso vai exigir alguns pré requisitos, principalmente saber TypeScript.

Espero ter ajudado.