Nao carrega a foto | AngularJS: crie webapps poderosas | Alura

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'
    };
});

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.