4
respostas

Erro ao carregar as fotos do banco

Alguém pode me ajudar? Adicionar os comandos puxando os dados do banco, o sistema não carregou. O controller ---------------

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

  $scope.fotos = [];

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

no index ------------

<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="man in fotos"class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">{{man.titulo}} </h3>
              </div>
              <div class="panel-body">
                <img class="img-resposive center-block" src="{{man.url}}" alt="{{man.titulo}}">
              </div>
          </div><!-- fim painel -->

      </div> <!-- fim container -->
    </body>

no console ---------

%7B%7Bman.url%7D%7D Failed to load resource: net::ERR_FILE_NOT_FOUND
angular.js:14299 TypeError: $http.get(...).sucess is not a function
    at new <anonymous> (fotos-controller.js:6)
    at Object.invoke (angular.js:5314)
    at S.instance (angular.js:10610)
    at n (angular.js:8146)
    at g (angular.js:7475)
    at g (angular.js:7481)
    at angular.js:7424
    at angular.js:1795
    at m.$eval (angular.js:17747)
    at m.$apply (angular.js:17764)
(anonymous) @ angular.js:14299
angular.min.js:108 XMLHttpRequest cannot load file:///Users/usuario/Documents/alura/alurapic/public/v1/fotos. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ angular.min.js:108
angular.js:14299 Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"v1/fotos","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}
4 respostas

Olá meu aluno! A mensagem de erro indica:

TypeError: $http.get(...).sucess

Você escreveu errado, cometendo um erro de sintaxe. O correto é success, com dois c. Acontece.

O erro ainda persiste angular.js:14299 TypeError: $http.get(...).success is not a function at new (fotos-controller.js:6) at Object.invoke (angular.js:5314) at S.instance (angular.js:10610) at n (angular.js:8146) at g (angular.js:7475) at g (angular.js:7481) at angular.js:7424 at angular.js:1795 at m.$eval (angular.js:17747) at m.$apply (angular.js:17764)

o codigo refiz igual o da aula escrita do video.

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

    $scope.fotos = [];

    $http.get('/v1/fotos')
    .success(function(retorno) {
        console.log(retorno);
        $scope.fotos = retorno; // não precisa fazer retorno.data
    })
    .error(function(erro) {
        console.log(erro);
    });

});

Você atualizou a lib do Angular? Mais de 2000 alunos passaram dessa parte sem problema algum. Vamos descobrir.

Da versão 1.5 para a 1.6 o método $http.success e $http.error foram depreciados.

Nos cursos de angular.js é utilizada a versão 1.5.

Já peguei esse erro ao tentar implementar essa função depois de atualizar.

https://docs.angularjs.org/guide/migration#migrate1.5to1.6-ng-services-$http

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software