Tutoriel AngularJS : afficher le flux RSS

• Partie 1 : Google, Twitter, et AngularJSPartie 1t
• Partie 2 : créer un lecteur de flux RSSPartie 2
• Partie 3 : afficher le flux RSSPartie 3
• Partie 4 : gérer les flux RSSPartie 4
• Partie 5 : testsPartie 5
• Partie 6 : ajouter des dépendancesPartie 6
• Partie 7 : validation d'un formulairePartie 7
• Partie 8 : itérateurs et filtresPartie 8
• Partie 9 : installationPartie 9

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.

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.

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-repeatng-repeat.

Les directivesdirectives 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 scopesscopes. 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.

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 modulesmodules 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.

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.

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▲

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.