Utilizando HATEOAS com Angular

Da uma olhada no https://github.com/jmarquis/angular-hateoas

Ele realiza as transformações necessarias. Eu nunca o utilizei mas sei que o povo gosta dele.

Mas a parte de construção da resposta é do seu server. Sua pergunta sai do âmbito do angular e cai em questões arquiteturais. Mas é bacana pensar nelas mesmo.

Sobre modal angular não faz milagres, a não ser que você use diretivas de terceiros. Todas usam css e criação de modal via css. Saber criar um modal, pelo menos a lógica do css é fundamental. Segue um exemplo

http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/

Aliás esse é um dos motivos que zilhoes de empresas se afundaram em angular. Ele abstrai o dom, mas não o conhecimento de js e css.

Mas como qualquer tecnologia é uma decisão arquitetural. Tem seus trade offs.

Muito obrigado Flavio.

Eu ja estou expondo os links dos recursos como mencionei na mensagem acima. Onde se acessar o recurso ( /clientes/1/produtos ), expoe os produtos deste cliente.

Até sobre a caixa modal, eu fiz ela, e ao clicar na linha da tabela consigo chamar ela normalmente, a dúvida ficou na navegação de recursos (hateoas).

Vou ver esse link que me passou e analisar, se é interessante colocar este recurso direto na tabela, ou criar uma pesquisa p/ buscar.

Flavio eu fiz de outra maneira, não sei se é a mais politicamente "correta" ou "indicada" ...kkkk, mas funcionou.

Fiz da seguinte maneira, utilizei o "angular.copy", assim quando clico no botão Editar da tabela, ele copia aquele dados do cliente em específico e preenche os campos da janela modal:

"partials/clientes.html":

<a href="#" data-toggle="modal" data-target="#modalEditar"  title="Editar" ng-click="vm.showCliente(cliente)">
    <i class="fa fa-pencil-square-o text-warning"></i>
</a>

"controllers/clientes-controllers.js":

vm.showCliente = copyShowCliente;

function copyShowCliente(cliente){            
    vm.cliente = angular.copy(cliente);
};

Assim eu ja tenho os dados, junto com o link do hateoas, ai faço a requisição para preencher somente os dados dos produtos. Deu certo editar, fiz vários testes, e depois que teve sucesso eu atualizo a tabela, sem fazer outra requisição ao back-end:

.success(function(){

    for(var i = 0; i < vm.clientes.length; i++) {
        if(vm.clientes[i].id === vm.cliente.id) {
            vm.clientes[i] = vm.cliente;
        }
    }
    vm.mensagem = 'Cliente editado com sucesso';                
})
.error(function(erro){
    console.log(erro);
    vm.mensagem = 'Não foi possível editar o cliente';
});

Só fiquei em dúvida se é a maneira mais indicada. Esta certo dessa maneira que fiz?

Outra coisa Flavio, que é somente dúvida mesmo, gosto de usar o Lite-Server, que o John Papa desenvolveu, quando estou desenvolvendo em Angular e tenho que consumir APIs Rest de vários lugares.

Mas fiquei pensando e em uma situação assim, vamos imaginar que a empresa tem várias API Rest, ja em ambiente de homologação, algumas utilizando spring rest, outras Jersey, outras Node.js e por ai vai, mas todas expondo endpoint e dados em JSON.

E o front-end em Angular seja totalmente desacoplado dessas API. Quando for fazer deploy da aplicação em Angular em uma instancia EC2 da AWS por exemplo, acredito que a aplicação em angular deve ficar rodando em algum servidor só p/ ele, é dessa maneira?

Se for assim, qual você mais indica p/ uma situação dessa como eu disse, onde tenho vários microserviços com responsabilidades únicas e o front-end totalmente desacoplado de todos eles.

Abraços Flavio