Démo avancée – Angular Motion

Cet article n’est pas un tutoriel mais plus une démo de ce qu’il est possible de réaliser avec AngularJS.

La démo en question est une page web qui permet de rechercher et de lire des vidéos Dailymotion, d’où le nom Angular Motion (héhé). L’UI est composée de 3 parties :

  • Le player Dailymotion. La vidéo continue à tourner même pendant la recherche
  • La barre de recherche. A chaque fois que l’on tape un caractère, les résultats sont mis à jour
  • La zone de résultats. Affiche 12 vignettes par défaut, et à chaque fois que l’on scroll jusqu’en bas, on recharge 12 vignettes de plus

Angular-Motion-demo-angularjs

 

DemoTélécharger la source

 

Les commentaires dans le codes sont en anglais car je pense que cette démo peut intéresser beaucoup de monde, mais ci-dessous j’ai relevé les points qui me semblaient importants.

Présentation générale de l’appli

Tout d’abord niveau technos :

Concernant l’architecture :

  • L’appli est relativement petite, donc tout est contenu dans un seul fichier javascript, app.js
  • Un contrôleur, MainCtrl, pour gérer toute l’appli
  • Un filtre toHHMMSS, qui permet de convertir des secondes dans un format HH:MM:SS

L’API Dailymotion

Pour être plus précis, il s’agit de l’API data, celle qui permet de récupérer des informations sur les vidéos de Dailymotion. Voici un exemple de requête qui retourne du JSON :

https://api.dailymotion.com/videos?fields=duration,title,id,description&sort=relevance&limit=12&page=1&search=madeon+pop+culture

Dans cet exemple on demande :

  • fields : Les champs « duration », « title », « id, « description »
  • limit : 12 résultats
  • page : 1ère page de résultats (donc de 1 à 12)
  • search : Pour les mots clés « madeon pop culture »

Voilà, c’est tout ce dont on se sert dans l’appli.

Récupérer les données de l’API

Si vous débutez sur AngularJS, vous serez sans doute tenté d’utiliser la function ajax de jQuery (ou de votre lib préférée), mais sachez que si vous procédez de cette manière, AngularJS ne saura pas quand les données seront récupérées. C’est-à-dire que les données seront bien là, mais comme on est en dehors du domaine d’AngularJS, la view ne se mettra pas à jour. Il est possible de résoudre le problème en utilisant $scope.$apply() pour forcer AngularJS à prendre en compte les données, mais la meilleure solution est d’utiliser le service $http que propose le framework. Dans ce cas là, plus de problème de mise à jour de la view, car on reste dans le domaine d’AngularJS.

Vider la searchbar quand on clique dessus

Même si c’est généralement déconseillé, sachez qu’il est possible de mettre du code côté template (html). Par exemple pour vider la searchbar ; plutôt que de créer une fonction dans le contrôleur, on peut simplement vider la variable directement dans le tag :

<input type="text" ng-model="searchTerms"  ng-click="searchTerms=''">

Ça ne concerne pas vraiment la logique de l’application, donc on peut se le permettre.

Utilisation de la directive ng-cloak

Comment masquer les horribles {{ }} qui apparaissent parfois pendant qu’AngularJS charge ? Avec le directive ng-cloak.

ng-cloak se place sur un tag et peut être utilisé en tant qu’attribut ou classe CSS :

<!-- Attribut -->
<div ng-cloak>{{someVar}}</div>
<!-- Classe -->
<div class="ng-cloak">{{someVar}}</div>

Mais il y a plusieurs choses à savoir sur cette directive :

  • Vous pouvez la mettre sur la balise <body>, mais cela risque de ralentir légèrement votre application. Préférez une utilisation locale
  • Pour que ng-cloak fonctionne, il faut qu’AngularJS soit importé en début de document
  • Si malgré tout vous préférez importer AngularJS en fin de document, utilisez ng-cloak en tant que classe CSS, et ajoutez le code suivant à votre CSS
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
    }

Création et utilisation d’un filtre

L’API Dailymotion revoit la durée des vidéos en secondes, mais pour l’utilisateur on préfèrera un format HH:MM:SS. J’ai trouvé sur Stack Overflow cette fonction, et j’en ai fait un filtre AngularJS. Voilà à quoi ça ressemble :

function toHHMMSS(){
	return function(value){
		var sec_num = parseInt(value, 10);
		var hours   = Math.floor(sec_num / 3600);
		var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
		var seconds = sec_num - (hours * 3600) - (minutes * 60);
		if (hours   < 10) {hours   = "0"+hours;}
		if (minutes < 10) {minutes = "0"+minutes;}
		if (seconds < 10) {seconds = "0"+seconds;}
		var time    = hours+':'+minutes+':'+seconds;
		return time;
	}
}

On indique à l’application que la fonction toHHMMSS() est un filtre de la manière suivante (notez que le nom du filtre peut être différent du nom de la fonction) :

angular
	.module('angularMotion', [])
	.filter('toHHMMSS', toHHMMSS);

Enfin, côté template on utilise le filtre comme ceci :

{{video.duration | toHHMMSS}}

A suivre…

La suite de l’article se trouve ici Angular Motion – Bonus

Share Button

3 thoughts on “Démo avancée – Angular Motion

  1. Oussss

    super exemple d’application 😉

  2. Jérôme

    Bravo pour les différents articles ! La présentation et les explications sont claires et précises. On peut commencer à développer sereinement 🙂

  3. defsdfsdgfs

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>