Tutoriel AngularJS : afficher le flux RSS

Alex Young

Traducteur

vermine

Cet article est la traduction de AngularJS: Rendering Feeds publié sur DailyJS.

Commentez

- Titre : Tutoriel AngularJS : afficher le flux RSS

- Auteur : Alex Young

- Traducteur : vermine

- Parution : 11 juin 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant-propos

- II. Workflow

- III. Composants principaux : contrôleurs et vues

- IV. Directives et data binding

- V. Fournisseurs de router

- VI. Lire le flux

- VII. Affichier les éléments du flux

- VII-A. Conclusion

- VIII. Remerciements

I - Avant-propos

- Partie 1 : Google, Twitter, et AngularJS

- Partie 2 : créer un lecteur de flux RSS

- Partie 3 : afficher le flux RSS

- Partie 4 : gérer les flux RSS

- Partie 5 : tests

- Partie 6 : ajouter des dépendances

- Partie 7 : validation d'un formulaire

- Partie 8 : itérateurs et filtres

- Partie 9 : installation

Dans le précédent tutoriel, j'ai présenté Yeoman et nous avons créé un modèle de projet qui inclut AngularJS. Vous pouvez obtenir la source sur alexyoung / djsreader en version 2e15d97.

II - Workflow

Le workflow de Yeoman est basé autour de Grunt. Avant Yeoman, beaucoup de développeurs avaient adopté une approche semblable. Un serveur Web léger était démarré à l'aide de Node et Connect et un observateur du système de fichiers était utilisé pour reconstruire l'actif côté client chaque fois qu'un fichier était modifié.

Yeoman regroupe tout cela pour vous, alors vous n'avez pas besoin de réinventer la roue. Lorsque vous travaillez sur un projet Yeoman, tapez grunt server pour démarrer un serveur Web en mode de développement.

Cela devrait ouvrir une fenêtre du navigateur à l'adresse http://localhost:9000/#/ avec un message de bienvenue. Maintenant le serveur Web est en cours d'exécution, vous pouvez modifier les fichiers du répertoire app/, et Grunt reconstruira votre projet selon les besoins.

III - Composants principaux : contrôleurs et vues

Le but de ce tutoriel est de faire un outil qui peut télécharger un flux et l'afficher en utilisant du code côté client. AngularJS peut faire tout cela avec l'aide de YQL pour convertir un flux RSS/Atom en JSON.

Cet exemple est une excellente introduction « simple » pour découvrir AngularJS parce qu'elle implique plusieurs composants clés :

- les contrôleurs, permettant de combiner les données et les vues ;

- les vues, pour l'affichage des articles retournés par le service ;

- les services, pour aller chercher les données JSON.

Le projet de template Yeoman contient déjà une vue et un contrôleur. Le contrôleur peut être trouvé dans le fichier app/scripts/controllers/main.js et la vue est dans le fichier app/views/main.html.

Si vous jetez un œil à ces fichiers, ce qui s'y passe est assez évident : le contrôleur définit des valeurs qui sont ensuite utilisées par le template. Le template est capable d'itérer sur les valeurs qui sont définies en utilisant la directive de ng-repeat.

IV - Directives et data binding

Les directives peuvent être utilisées pour transformer le DOM, donc le fichier main.html est un template dynamique qui est interpolé à l'exécution.

La façon dont les données sont liées à un template se fait au travers de scopes. L'objet $scope, qui est transmis au contrôleur, provoquera la mise à jour du template lorsqu'il est modifié. Il agit en fait de manière asynchrone :

Le scope est la colle entre le contrôleur de l'application et la vue. Au cours de la phase de liaison du template, les directives mettent en place les expressions $watch sur le scope. Le $watch permet aux directives d'être informées des modifications de la propriété, ce qui permet aux directives de restituer la valeur mise à jour dans le DOM.

Remarquez comment l'affichage est mis à jour lorsque les propriétés sont modifiées. Cela signifie que l'attribution de la propriété à $scope dans l'application du modèle est reflétée par le template.

Si vous êtes de nature curieuse, vous vous demandez probablement comment le contrôleur est instancié et associé à la vue. Il y a une pièce manquante à l'histoire que je n'ai pas encore mentionnée : le routage.

V - Fournisseurs de router

Le MainCtrl (le contrôleur principal) est lié au fichier views/main.html dans le fichier app/scripts/app.js :

angular.module('djsreaderApp', [])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});

Le $routeProvider utilise une API pour mapper les URL des contrôleurs et des templates. Ce fichier est un fichier de configuration centralisée qui met en place l'application.

La ligne angular.module met en place un nouveau « module » appelé djsreaderApp. Ce n'est pas techniquement la même chose qu'un module Node ou RequireJS, mais c'est très similaire. Les modules sont inscrits dans un espace de noms global, donc ils peuvent être référencés dans toute l'application. Cela inclut les modules tiers également.

VI - Lire le flux

Pour charger les flux, nous pouvons utiliser le service $http. Mais mieux encore… il supporte JSONP, qui est la manière utilisée par l'API Yahoo! pour fournir l'accès interdomaines aux données que nous voulons aller chercher. Ouvrez le fichier app/scripts/controllers/main.js et modifiez-le pour charger l'URL YQL (très longue) :

angular.module('djsreaderApp')
.controller('MainCtrl', function($scope, $http) {
var url = "http://query.yahooapis.com/v1/public/yql?q=select * from xml where url='http://dailyjs.com/atom.xml' and itemPath='feed.entry'&format=json&diagnostics=true&callback=JSON_CALLBACK";

$http.jsonp(url).
success(function(data, status, headers, config) {
$scope.feed = {
title: 'DailyJS',
items: data.query.results.entry
};
}).
error(function(data, status, headers, config) {
console.error('Error fetching feed:', data);
});
});

La deuxième ligne a changé pour inclure une référence à $http. Cela nous permet d'accéder au module HTTP de AngularJS.

Le $scope est maintenant mis à jour avec le résultat de la requête JSONP. Lorsque $scope.feed est défini, AngularJS met automatiquement à jour l'affichage avec les nouvelles valeurs.

La vue doit maintenant être mise à jour pour afficher les éléments de flux.

VII - Affichier les éléments du flux

Pour restituer les éléments du flux, ouvrez le fichier app/views/main.html et utilisez la directive ng-repeat afin d'itérer sur chaque élément et l'afficher :

<h1></h1>
<ul>
<li ng-repeat="item in feed.items"></li>
</ul>

Maintenant, cela rendra le titre de chaque entrée du flux. Si vous êtes en train d'exécuter grunt server, vous devriez apercevoir que chaque fois qu'un fichier est enregistré, cela entraine un rafraîchissement du navigateur. Cela signifie que vos modifications devraient être visibles et vous devriez voir les articles récents de DailyJS.

VII-A - Conclusion

Dans ce bref tutoriel, vous avez vu les contrôleurs, les vues, les directives, la liaison de données et même le routage de AngularJS. Si vous avez beaucoup codé en Backbone.js ou Knockout auparavant, alors vous devriez commencer à voir comment AngularJS met en œuvre des concepts similaires. Il adopte une approche différente. J'ai trouvé $scope un peu confus au début, par exemple, mais la courbe d'apprentissage initiale est principalement vers le bas pour apprendre la terminologie.

Si vous avez des difficultés à obtenir le résultat final, regardez ma source sur GitHub. La version pour ce tutoriel est la 73af554.

VIII - Remerciements

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original AngularJS: Rendering Feeds du site DailyJS.

Je remercie également ClaudeLELOUP pour sa relecture attentive et assidue.