Découverte d'AngularJS avec WordPress

J’ai souhaité découvrir AngularJS avec un projet ludique mais couvrant les concepts de base. Après réflexion, afficher dans un site utilisant Bootstrap des données prévenant d’un blog WordPress en utilisant l’API REST me semblait convenir.

Présentation

Le blog actuel est motorisé par WordPress. Une API REST permet de travailler avec les données de ce dernier. Le site proposera un affichage en se basant sur les composants Bootstrap. La page d’accueil affiche les 10 derniers articles. Le menu de navigation permet de parcourir les pages par catégorie.

wpAngular
Schéma des composants

Ce projet m’a permis de découvrir des fonctions fondamentales d’AngularJS :

– le databinding

– les expressions

– les directives

– les vues et les routes

– les services

Découverte d’AngularJS

AngularJS illustre très bien le principe de Pareto – aussi connu sous le nom de principe du 80/20. Au début de la découverte, j’étais ébloui de voir avec quelle facilité j’ai pu obtenir un résultat visible. 80% du projet était du pur plaisir.

Par contre quand il s’agit de peaufiner certains points, je me suis rapidement retrouver à me retourner le cerveau pour comprendre la logique d’AngularJS. Heureusement j’ai toujours trouvé des réponses sur les blogs de développeurs AngularJS ou le site Stack Overflow.

Majoritairement positif, c’est découverte comporte un peu de frustration

http://blog.ghislain-lerda.com/wpAngular/index.html

Quelques astuces

Afficher une donnée HTML proprement

Option 1 – Appliquer un filtre à l’affichage

Option 2 – Préparer les données dans le service

les données peuvent être nettoyée au niveau du service lors de la récupération.

Faire fonctionner le lien actif dans le menu de navigation

L’idée est de s’avoir si la route passé en paramètre correspond au chemin courant.

Dans le contrôleur en charge du menu, ajouter une fonction qui renvoie un booléen si la route passée correspond au chemin courant.

Dans le menu, les éléments du menu sont créés en boucle, au passage la classe CSS active est appliquée si la fonction renvoie vrai.

Soucis de notations

Références

wpAngular sur GitHub

AngularJS’ developper guide

WordPress’ REST API ressources

Bootstrap

Related Post

Logger des événements client avec JSNLog Continuons l'exploration des solutions de log et voyons comment logger des événements client dans une application web. Prenons une application web Ang...
Débuter avec NodeJS, Express et MongoDB Un collègue m’a parlé de différents projets personnels orientés web et de son dilemne sur le choix des techologies. Curieux j’ai voulu essayer NodeJS,...
Jekyll – formulaires, coloration syntaxique ... Quelques manipulations et fonctionnalités qu’il est bon d’utiliser avec Jekyll : Formulaire soumis par mail Coloration syntaxique SEO avec ...
Migrer de WordPress vers Jekyll – partie 2 Quelques manipulations et fonctionnalités qu’il est bon d’utiliser avec Jekyll : Utilisation d’un nom de domaine avec GitHub Pages Commentaire...

Laisser un commentaire

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