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

wpApp.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
<span ng-bind-html="post.content | sanitize"></span>

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.

dataFactory.getPost = function(postId){
        return $http.get(urlBase + '/posts/' + postId).success(function(data){
            return cleanResult(data);
        });
    }

    function cleanResult(result) {
        result.excerpt = $sce.trustAsHtml(result.excerpt);
        result.content = $sce.trustAsHtml(result.content);
        return result;
    }

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.

$scope.isActive = function (viewLocation) {
   return viewLocation === $location.path();
};

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

#version longue
function MyCtrl($scope, $http) { ... };
MyCtrl.$inject = ['$scope', '$http'];
MyApp.controller('MyCtrl', MyCtrl);

# version courte
MyApp.controller('MyCtrl', ['$scope', '$location', function ($scope, $location) { ... }]);

Références

wpAngular sur GitHub

AngularJS’ developper guide

WordPress’ REST API ressources

Bootstrap