Em primeiro lugar, parabenizar o instrutor. Em segundo lugar, tentei encontrar a minha dúvida, mas são muitos tópicos sem a função de procurar por palavra-chave, então... lá vai minha dúvida: - Acompanhei o vídeo passo a passo e ao final, no lugar da imagem tenho o texto {{foto.titulo}} - Os arquivos .js não são carregados (posso ver na aba networks)
Onde errei?
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 scr="js/lib/angular.min.js"></script>
<script scr="js/main.js"></script>
<script scr="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> <!-- fim container -->
</body>
</html>fotos-controller:
angular.module('alurapic')
.controller('FotosController',
function($scope){
$scope.foto = {
titulo: 'Leão',
url: 'http://www.fundosanimais.com/Minis/leoes.jpg'
};
});main.js:
angular.module('alurapic',[]);Estrutura de diretórios:
alurapic/public:
├── css
│ ├── bootstrap.min.css
│ └── bootstrap-theme.min.css
├── index.html
├── js
│ ├── controllers
│ │ └── fotos-controller.js
│ ├── directives
│ ├── lib
│ │ ├── angular-animate.min.js
│ │ ├── angular-animate.min.js.map
│ │ ├── angular.min.js
│ │ ├── angular.min.js.map
│ │ ├── angular-resource.min.js
│ │ ├── angular-resource.min.js.map
│ │ ├── angular-route.min.js
│ │ └── angular-route.min.js.map
│ ├── main.js
│ └── services
└── partials
