Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Fotos não carregam a partir de 'v1/fotos'

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">
          <div class="jumbotron">
            <h1 class="text-center">Alurapic</h1>
          </div>
          <div ng-repeat="foto in fotos" class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">{{foto.titulo}}</h3>
            </div>
            <div class="panel-body">
              <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
            </div>
          </div> <!-- fim panel -->
        </div> <!-- fim container -->
    </body>
</html>

fotos-controller.js

angular.module('alurapic').controller('FotosController', function($scope, $http) {
  $scope.fotos = [];

  $http.get('v1/fotos')
  .success(function(fotos) {
    $scope.fotos = fotos;
  })
  .error(function(erro) {
    console.log(erro);
  });
});

Erros na console

GET file:///C:/Users/Antonio%20Rogerio/Downloads/ALURA/102%20Angular%201%3B%20crie%20webapps%20poderosas/ferramentas/alurapic/public/%7B%7Bfoto.url%7D%7D net::ERR_FILE_NOT_FOUND
angular.js:9866 XMLHttpRequest cannot load file:///C:/Users/Antonio%20Rogerio/Downloads/ALURA/102%20Angular%201%3B%20crie%20webapps%20poderosas/ferramentas/alurapic/public/v1/fotos. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
8 respostas

Tente substituir $http.get('v1/fotos') por $http.get('/v1/fotos').

O '/' vai sobrescrever a url para 'localhost:3000/v1/fotos' se não tiver barra vai concatenar com a url atual: localhost:3000/fotos/v1/fotos

erro permanece, abaixo display da console:

index.html:23 GET file:///C:/Users/Antonio%20Rogerio/Downloads/ALURA/102%20Angular%201%3B%20crie%20webapps%20poderosas/ferramentas/alurapic/public/%7B%7Bfoto.url%7D%7D net::ERR_FILE_NOT_FOUND
angular.js:9866 XMLHttpRequest cannot load file:///C:/v1/fotos. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ angular.js:9866
n @ angular.js:9667
f @ angular.js:9383
(anonymous) @ angular.js:13248
$eval @ angular.js:14466
$digest @ angular.js:14282
$apply @ angular.js:14571
(anonymous) @ angular.js:1455
e @ angular.js:4203
d @ angular.js:1453
uc @ angular.js:1473
Jd @ angular.js:1367
(anonymous) @ angular.js:26304
a @ angular.js:2762
c @ angular.js:3032
fotos-controller.js:9 null
solução!

Você esta acessando a página direto pelo seu navegador e não pelo servidor como faço no vídeo. Aliás, a mensagem de erro mostra isso, pois exibe o caminho completo da página em seu filesystem.

Suba o servidor e acesse a página através de http://localhost:3000 que tudo estará resolvido.

Angular faz requisições ajax e para isso é necessário um servidor. Por isso eu explico isso no vídeo e levanto o servidor.

Sucesso e bom estudo meu aluno!

ok. Resolvido.

Excelente notícia! Agora é continuar com os estudos! Abraço Antonio!

Quando crio a rota para o "principal.html" angular.module('alurapic', ['minhasDiretivas', 'ngAnimate', 'ngRoute']) .config(function ($routeProvider) { $routeProvider.when('/fotos', { templateUrl: 'partials/principal.html', controller: 'FotosController' }); });

O Navegador abre o URL dessa forma: http://localhost:3000/#!#%2Ffotos

Estou me quebrando aqui mas alguém sabe porque isso acontece? Alguém passou por isso? Vlw!

Thiago coloca sua pergunta em outro topico, acho que posso te ajudar