Simple AngularJS Front-End pour une API REST

REST

Simple AngularJS Front-End pour une API REST

1. Vue d'ensemble

Dans ce rapide tutoriel, nous allons apprendre à utiliser une API RESTful à partir d'un simple front-end AngularJS.

Nous allons afficher les données dans un tableau, créer une ressource, la mettre à jour et enfin la supprimer.

2. L'API REST

Tout d'abord, jetons un coup d'œil à notre API simple - exposant une ressourceFeed avec pagination:

être paginé - * GET * / api / myFeeds? Page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
créer - * POST * / api / myFeeds
mise à jour - * PUT * / api / myFeeds / {id}
effacer - * SUPPRIMER * / api / myFeeds / {id}

Une remarque rapide ici est que la pagination utilise les 4 paramètres suivants:

page: index de la page demandée
size: nombre maximum d'enregistrements par page
sort: le nom de la propriété utilisée dans le tri
sortDir: le sens de tri

Et voici un exemple de ce à quoi ressemble la ressourceFeed:

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

3. La page des flux

Regardons maintenant notre page de flux:






Add New RSS Feed

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

Notez que nous avons utiliséng-table pour afficher les données - plus d'informations à ce sujet dans les sections suivantes.

4. Un contrôleur angulaire

Ensuite, jetons un œil à notre contrôleur AngularJS:

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

Notez que:

Nous avons injecté le modulengTable pour l'utiliser pour afficher nos données dans un tableau convivial et gérer les opérations de pagination / tri
Nous avons également injecté le modulengResource pour l'utiliser pour accéder à nos ressources API REST

5. Une table de données AngularJS

Jetons maintenant un rapide coup d'œil au moduleng-table - voici la configuration:

$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;
    }
});

L'API attend un certain style de pagination, nous devons donc le personnaliser ici dans le tableau pour le faire correspondre. Nous utilisonsparams surng-module et créons nos propresqueryParams ici.

Quelques notes supplémentaires sur la pagination:

params.page() commence à 1 donc nous devons également nous assurer qu'il devient indexé à zéro lors de la communication avec l'API
params.sorting() renvoie un objet - par exemple\{“name”: “asc”}, nous devons donc séparer la clé et la valeur en deux paramètres différents -sort,sortDir
nous extrayons le nombre total d'éléments à partir d'un en-tête HTTP de la réponse

6. Plus d'opérations

Enfin, nous pouvons effectuer de nombreuses opérations en utilisant le modulengResource -$resource couvre toute la sémantique HTTP en termes d'opérations disponibles. Nous pouvons également définir nos fonctionnalités personnalisées.

Nous avons utiliséquery dans la section précédente pour obtenir la liste des flux. Notez queget etquery fontGET - maisquery est utilisé pour gérer une réponse de tableau.

6.1. Ajouter un nouveauFeed

Afin d'ajouter un nouveau flux, nous utiliserons la méthode$resourcesave - comme suit:

$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. Mettre à jour unFeed

Nous pouvons utiliser notre propre méthode personnalisée avec$resource - comme suit:

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

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

Notez comment nous avons configuré notre propre méthodeupdate pour envoyer une requêtePUT.

6.3. Supprimer unFeed

Enfin, nous pouvons supprimer un flux en utilisant la méthodedelete:

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

7. Boîte de dialogue AngularJs

Voyons maintenant comment utiliser le modulengDialog pour afficher un formulaire simple pour ajouter / mettre à jour nos flux.

Voici notre modèle, nous pouvons le définir dans une page HTML séparée ou dans la même page:

Et ensuite, nous ouvrirons notre boîte de dialogue pour ajouter / modifier un flux:

$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();
    }
}

Notez que:

$scope.save() est appelé lorsque l'utilisateur clique sur le boutonSave dans notre boîte de dialogue
$scope.addNewFeed() est appelé lorsque l'utilisateur clique sur le boutonAdd New Feed dans la page des flux - il initialise un nouvel objetFeed (sansid)
$scope.editFeed() est appelé lorsque l'utilisateur souhaite modifier une ligne spécifique dans la table des flux

8. La gestion des erreurs

Enfin, voyonshow to handle response error messages utilisant AngularJS.

Afin de gérer les réponses aux erreurs du serveur globalement - au lieu de par requête - nous allons enregistrer un intercepteur auprès des$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);
            }
        };
    });
}]);

Et voici notre représentation de message en HTML:


    {{message}}

9. Conclusion

Il s’agissait d’un bref résumé de la consommation d’une API REST d’AngularJS.

Lesfull implementation de ce didacticiel se trouvent dansthe github project - il s'agit d'un projet basé sur Eclipse, il devrait donc être facile à importer et à exécuter tel quel.

TOC

Simple AngularJS Front-End pour une API REST