Quelques retours sur l’utilisation d’AngularJS.

Il y a quelques temps, j’ai publié un article sur « Mes premiers pas avec AngularJS« , à ce moment c’était de la simple curiosité. Depuis j’ai eu l’occasion de travailler sur un vrai projet basé sur AngularJS. Voici mes retours suite à cette première expérience.

Cet article n’est pas un guide technique, ni un didacticiel, il a pour unique but de présenter les différents aspects du Framework.

Utilisation des controllers pour piloter les vues.

Les controllers permettent de gérer le comportement d’un tronçon de code HTML.

Par exemple ils peuvent servir à gérer la soumission d’un formulaire, ou encore de trier les résultats d’un tableau de données.

Il suffit de définir votre controller comme une fonction Javascript basique et de lui donner la responsabilité d’un noeud HTML.

<div ng-controller="ListCtrl">
  <span>{{items.length}} items</span>
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
  <form ng-submit="addItem()">
    <input type="text" ng-model="itemText" size="30" placeholder="add new item">
    <input class="btn-primary" type="submit" value="add">
  </form>
</div>

Un controller possède automatiquement un scope. Le scope permet de binder des données à votre controller pour qu’elles soient automatiquement mises à jour dans la vue.

function ListCtrl($scope) {
    // Liste d'items par défaut
    $scope.items = ["hello", "world"];

    // Ajouter un item (bindé sur le submit)
    $scope.addItem = function() {
        $scope.items.push($scope.itemText);
        $scope.itemText = '';
    };
}

On peut également injecter d’autres dépendances dans un controller, peu importe l’ordre. Vous pouvez ainsi injecter celles qui vous intéressent :

function ListCtrl($http, $scope) {

    $scope.items = ["hello", "world"];
    $scope.addItem = function() {
        $scope.items.push($scope.itemText);

        // Utilisation du service $http injecté dans le controller
        $http.post('/items', $scope.itemText);

        $scope.itemText = '';
    };
}

Améliorer les vues HTML avec les directives.

Les directives permettent, en quelque sorte, de créer une extension de html, à votre sauce.

En effet, vous pouvez créer vos propres balises, attributs ou commentaires html à qui vous donnerez un comportement spécifique.

Prenons un exemple concret :

Nous avons une balise <img src= »http://domain.com/mon-image.jpg »&gt; mais nous ne sommes pas sûrs que l’image est toujours disponible.

Ici une directive de type attribut qu’on appellera fallback-src semble appropriée, si le chargement de l’image échoue, son rôle sera de la remplacer par une image par défaut.

var fallbackSrcDirective = {
    link: function postLink(scope, element, attributes) {
        element.bind('error', function() {
            angular.element(this).attr("src", attributes.fallbackSrc);
        });
    }
};
module.directive('fallbackSrc', require("directives/fallback-src"));

Vous pouvez faire de même sur les balises html, celles-ci pourront aisément prendre le rôle des partials et bien plus encore.

Rester DRY avec des services injectables.

Le service est un nom plutôt générique, il couvre donc beaucoup de possibilités.

Il existe par exemple des services comme Restangular, qui permettent de simplifier vos appels de webservices.

Personnellement je m’en suis surtout servi lorsque plusieurs controllers utilisaient les mêmes fonctionnalités, j’ai sorti ces dernières dans des services (autrement dit, des petites libs).

Retrouvez quelques plusieurs articles en Français sur le blog FrAngular.

Architecturer votre application avec les modules.

AngularJS propose une vraie solution en terme d’architecture du code grâce aux modules.

Ainsi vous pouvez découper votre application en plusieurs modules indépendants.

Prenons pour exemple une simple application qui utilise un chat :

// Initialisation du module de chat
var chat = angular.module('chat', []);
chat.controller('ChatCtrl', function(){
    // Code du controller
});
chat.directive('chatInput', function(){
    // Code de la directive
});

// Votre application utilise le module chat
var app = angular.module('app', ['chat']);
app.controller('AppCtrl', function() {
    // Code du controller principal
});

// Démarrage d'AngularJS
angular.bootstrap(document, ['app']);

Ressources

Ce n’était qu’un rapide aperçu, AngularJS vous réserve bien d’autres secrets.

Je vous conseille de prendre le temps de parcourir les guides mais également d’autres sources d’enseignements, telles que :

Advertisements


Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s