TOC

Front-End AngularJS simples para uma API REST

Front-End AngularJS simples para uma API REST

1. Visão geral

Neste tutorial rápido, aprenderemos como consumir uma API RESTful a partir de um front-end AngularJS simples.

Vamos exibir dados em uma tabela, criar um recurso, atualizá-lo e, finalmente, excluí-lo.

2. A API REST

Primeiro, vamos dar uma olhada rápida em nossa API simples - expondo um recursoFeed com paginação:

  • ser paginado - * GET * / api / myFeeds? Page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}

  • crio - * POST * / api / myFeeds

  • atualização - * PUT * / api / myFeeds / {id}

  • deletar - * DELETE * / api / myFeeds / {id}

Uma observação rápida aqui é que a paginação está usando os seguintes 4 parâmetros:

  • page: índice da página solicitada

  • size: número máximo de registros por página

  • sort: o nome da propriedade usada na classificação

  • sortDir: a direção de classificação

E aqui está um exemplo de como é o recursoFeed: 

{
    "id":1,
    "name":"example feed",
    "url":"/feed"
}

3. A página de feeds

Agora, vamos dar uma olhada na nossa página de feeds: 






Add New RSS Feed


    

        {{row.name}}
        {{row.url}}
        
            Edit
            Delete

Observe que usamosng-table para exibir dados - mais sobre isso nas seções a seguir.

4. Um Controlador Angular

A seguir, vamos dar uma olhada em nosso controlador AngularJS: 

var app = angular.module('myApp', ["ngTable", "ngResource"]);
app.controller('mainCtrl', function($scope, NgTableParams, $resource) {
    ...
});

Observe que:

  • Injetamos o módulongTable para usá-lo para exibir nossos dados em uma tabela amigável e lidar com operações de paginação / classificação

  • Também injetamos o módulongResource para usá-lo para acessar nossos recursos da API REST

5. Um AngularJS DataTable

Vamos agora dar uma olhada rápida no módulong-table - aqui está a configuração: 

$scope.feed = $resource("api/myFeeds/:feedId",{feedId:'@id'});
$scope.tableParams = new NgTableParams({}, {
    getData: function(params) {
        var queryParams = {
            page:params.page() - 1,
            size:params.count()
        };
        var sortingProp = Object.keys(params.sorting());
        if(sortingProp.length == 1){
            queryParams["sort"] = sortingProp[0];
            queryParams["sortDir"] = params.sorting()[sortingProp[0]];
        }
        return $scope.feed.query(queryParams, function(data, headers) {
            var totalRecords = headers("PAGING_INFO").split(",")[0].split("=")[1];
            params.total(totalRecords);
            return data;
        }).$promise;
    }
});

A API espera um certo estilo de paginação, portanto, precisamos personalizá-lo aqui na tabela para corresponder a ele. Estamos usandoparams deng-modulee criamos nosso próprioqueryParams aqui.

Algumas notas adicionais sobre paginação:

  • params.page() começa em 1, portanto, também precisamos ter certeza de que se torna zero indexado ao se comunicar com a API

  • params.sorting() retorna um objeto - por exemplo\{“name”: “asc”}, então precisamos separar a chave e o valor como dois parâmetros diferentes -sort,sortDir

  • extraímos a contagem total de elementos de um cabeçalho HTTP da resposta

6. Mais operações

Por fim, podemos realizar muitas operações usando o módulongResource -$resource cobre toda a semântica HTTP em termos de operações disponíveis. Também podemos definir nossa funcionalidade personalizada.

Usamosquery na seção anterior para obter a lista de feeds. Observe quegetequery fazemGET - masquery é usado para lidar com uma resposta de array.

6.1. Adicionar um NovoFeed

Para adicionar um novo feed, usaremos o método$resourcesave - da seguinte forma: 

$scope.feed = {name:"New feed", url: "http://www.example.com/feed"};

$scope.createFeed = function(){
    $scope.feeds.save($scope.feed, function(){
        $scope.tableParams.reload();
    });
}

6.2. Atualize umFeed

Podemos usar nosso próprio método personalizado com$resource - da seguinte maneira: 

$scope.feeds = $resource("api/myFeeds/:feedId",{feedId:'@id'},{
    'update': { method:'PUT' }
});

$scope.updateFeed = function(){
    $scope.feeds.update($scope.feed, function(){
        $scope.tableParams.reload();
    });
}

Observe como configuramos nosso próprio métodoupdate para enviar uma solicitaçãoPUT.

6.3. Exclua umFeed

Finalmente, podemos excluir um feed usando o métododelete: 

$scope.confirmDelete = function(id){
    $scope.feeds.delete({feedId:id}, function(){
        $scope.tableParams.reload();
    });
}

7. Diálogo AngularJs

Agora, vamos ver como usar o módulongDialog para exibir um formulário simples para adicionar / atualizar nossos feeds.

Aqui está o nosso modelo, podemos defini-lo em uma página HTML separada ou na mesma página:

E então abriremos nossa caixa de diálogo para adicionar / editar um feed: 

$scope.addNewFeed = function(){
    $scope.feed = {name:"New Feed", url: ""};
    ngDialog.open({ template: 'templateId', scope: $scope});
}
$scope.editFeed = function(row){
    $scope.feed.id = row.id;
    $scope.feed.name = row.name;
    $scope.feed.url = row.url;
    ngDialog.open({ template: 'templateId', scope: $scope});
}
$scope.save = function(){
    ngDialog.close('ngdialog1');
    if(! $scope.feed.id){
        $scope.createFeed();
    } else{
        $scope.updateFeed();
    }
}

Observe que:

  • $scope.save() é chamado quando o usuário clica no botãoSave em nossa caixa de diálogo

  • $scope.addNewFeed() é chamado quando o usuário clica no botãoAdd New Feed na página de feeds - ele inicializa um novo objetoFeed (semid)

  • $scope.editFeed() é chamado quando o usuário deseja editar uma linha específica na tabela Feeds

8. Manipulação de erros

Finalmente, vamos verhow to handle response error messages usando AngularJS.

Para lidar com as respostas de erro do servidor globalmente - em vez de por solicitação - vamos registrar um interceptador para$httpProvider: 

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($q,$rootScope) {
        return {
            'responseError': function (responseError) {
                $rootScope.message = responseError.data.message;
                return $q.reject(responseError);
            }
        };
    });
}]);

E aqui está nossa representação de mensagem em HTML: 


    {{message}}

9. Conclusão

Essa foi uma rápida descrição do consumo de uma API REST do AngularJS.

Ofull implementation deste tutorial pode ser encontrado emthe github project - este é um projeto baseado em Eclipse, portanto, deve ser fácil de importar e executar como está.

Related