Exibir fotos baixadas do servidor de outra forma

Olá, isso não tem muita relação com o Angular apesar de você pode implementar essa solução com ele. Precisa mais de conhecimento de JavaScript e o conceito de paginação do que o Angular em si.

Digamos que o somatório de diversos conhecimentos para conseguir implementar isso.

Você já fez paginação ou carrousel em JavaScript?

Eu encontrei uma diretiva do Angular que faz isso, mas ela não é mais mantida, mas pode ser um norte para passar esses conceitos.

https://github.com/revolunet/angular-carousel

Fala, Flavio. Obrigado por responder minha pergunta.

E onde posso obter esse conhecimento? Fiz todos os cursos de JS do Aula (Menos o avançado II, pois já estava me perdendo no I por falta de conhecimento de JS intermediário).

Essa diretiva também funcionaria para formulários e perguntas? Por exemplo, na primeira tela um cadastro e nas demais 1 pergunta de múltipla escolha por tela (baixadas de um server para no final subir o cadastro e resultados e armazenar no mongoDB.)

Grande abraço, Flavio. Continue com o bom trabalho!

Bom, é por ai. Vou te passar aqui, uma solução (a ideia...) e você tenta implementar ai em Angular, sem precisar de grandes outros conceitos.

A ideia é o seguinte: você terá uma lista de fotos em $scope.fotos, assim como você aprendeu no curso certo?

Só que além dela, você terá $scope.foto que guardará a foto que será exibida no momento. Até ai tudo bem?

Então, assim que seu controller carregar..você busca as fotos do servidor e faz o seguite:

$scope.fotos = ...... aqui é o resultado da pesquisa, você já sabe fazer isso.
$scope.foto = $scope.fotos[0] // pega a primeira foto e joga para `$scope.foto`. CUIDADO, essa linha tem que ser executada no success que busca as fotos do servidor.

É $scope.foto que vai estar associado a sua view para exibir a foto.

Daí, na mesma view que você exibe a foto, uma só, você colocado dois botões: "ANTERIOR" e "PROXIMO".

Esses botões chamaram, cada uma, uma ação no seu controller. Segue aqui um esboço do código:

$scope.anterior = function() {
    var posicaoDaFotoAtual = $scope.fotos.indexOf($scope.foto);
    posicaoDaFotoAtual--; pega a posição anterior
    $scope.foto = $scope.fotos[posicaoDaFotoAtual];
}

$scope.proxima = function() {
    var posicaoDaFotoAtual = $scope.fotos.indexOf($scope.foto);
    posicaoDaFotoAtual++; pega a próxima posição
    $scope.foto = $scope.fotos[posicaoDaFotoAtual];
}

É claro que o código não esta completo, se você ficar clicando em ANTERIOR a posição mínima não pode passar de 0, e se você clicar em PROXIMA a posição máxima não pode passar to tamanho do array da foto menos um. Toda vez que $scope.foto mudar, a view será atualizada e a nova foto exibida.

A ideia aqui é mostrar uma prova de conceito. Copie seu projeto do Angular existente, abra principal.html, remova a diretiva ng-repeat e deixe apenas um painel.

Consegue pegar, em linhas gerais o que você será feito?

Quando conseguir, você pode usar a mesma estratégia para mostrar questões de provas, etc.

Espero ter ajudado lançado uma luz sob esse problema.

Vou colocar o código completo, só não vai ficar organizado bonito na tela, isso você vê depois.

Pegue o projeto final do curso, ou pelo menos o projeto que você exibe uma lista de fotos. Copie ele para outra pasta e altere-o da seguinte forma:

principal.html ficará assim:

<div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>
</div>

<p ng-show="mensagem.length" class="alert alert-info">
    {{mensagem}}
</p>

<div class="row">
    <div class="col-md-12">
        <form>
            <div class="input-group">
                <span class="input-group-btn">
                    <a href="/fotos/new" class="btn btn-primary" type="button">
                        Nova foto
                    </a>
                </span>
                <input class="form-control" placeholder="filtrar pelo título da foto" 
                    ng-model="filtro" ng-model-options="{ debounce: 500 }">
        </form>
    </div> <!-- fim col-md-12 -->
</div> <!-- fim row -->

<div class="row">
    <meu-painel class="col-md-6 painel-animado">
        <minha-foto url="{{foto.url}}" alt="{{foto.titulo}}"></minha-foto>

        <a class="btn btn-primary btn-block" href="/fotos/edit/{{foto._id}}">
            Editar
        </a>
        <meu-botao-perigo nome="Remover" acao="remover(foto)">Remover</meu-botao-perigo>
    </meu-painel>
    <button class="btn btn-primary" ng-click="anterior()">Anterior</button>
    <button class="btn btn-primary" ng-click="proxima()">Proxima</button>
</div>
<meus-titulos></meus-titulos>

Agora, FotosController.js ficará assim:

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

    $scope.foto = {} // aqui é foto que será exibida no momento
    $scope.fotos = [];
    $scope.filtro = '';
    $scope.mensagem = '';

    recursoFoto.query(function(fotos) {
        $scope.fotos = fotos;
        $scope.foto = $scope.fotos[0]; // pego a primeira foto da lista que video do servidor, ela que será exibida.
    }, function(erro) {
        console.log(erro);
    });

    $scope.anterior = function() {
        var posicaoDaFotoAtual = $scope.fotos.indexOf($scope.foto);
        if(posicaoDaFotoAtual > 0) {
            posicaoDaFotoAtual--; 
            $scope.foto = $scope.fotos[posicaoDaFotoAtual];
        }
    }

    $scope.proxima = function() {
        var posicaoDaFotoAtual = $scope.fotos.indexOf($scope.foto);
        if(posicaoDaFotoAtual < $scope.fotos.length -1) {
            posicaoDaFotoAtual++ 
            $scope.foto = $scope.fotos[posicaoDaFotoAtual];
        }
    }

    $scope.remover = function(foto) {

        recursoFoto.delete({fotoId: foto._id}, function() {
            var indiceDaFoto = $scope.fotos.indexOf(foto);
            $scope.fotos.splice(indiceDaFoto, 1);
            $scope.mensagem = 'Foto ' + foto.titulo + ' removida com sucesso!';
        }, function(erro) {
            console.log(erro);
            $scope.mensagem = 'Não foi possível apagar a foto ' + foto.titulo;
        });
    };

});

Eu peguei o projeto final, completo do curso para fazer essas alterações. Vai funcionar bonitão. Você vai clicar em anterior e próximo e ele vai mudar a foto.

É uma prova de conceito, espero ter ajudado. (OBS: só fica ligado, quando vc remover uma foto, ela não pode ser mais a foto atual...a foto atual tem que ser a proxima ou anterior. dai esses detalhes você ataca).

Blz?

Grande, Flavio. Entendi sim. Muito obrigado pelas dicas.

Vi no seu Twitter que você vai lançar o curso de Angular 2 quando este estiver em versão definitiva. Sendo assim, fico no aguardo hehehe.

Fica também a dica para colocarem mais cursos de JS com nivel antes do avançado.

Grande abraço