Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe


Poster un commentaire

Angular 1: les directives

Après les services, le binding et les routes, les directives sont le dernier grand pilier de l’architecture Angular. Partons à leur découverte ce qui clôturera ma série de tutoriel Angular 1 avant d’attaquer Angular 2.

Pour des raisons que j’ignore, la majorité des exemples que je trouve sur le net sont, me semble t’il, très compliqués. Je préfère nettement faire 10 démos très simples, plutôt qu’une seule qui démontre 10 concepts en même temps.

 

Alors c’est quoi?

Les sites modernes ne se contentent plus d’utiliser HTML comme un langage statique de description de pages. On a besoin de transformer HTML en véritable langage et notamment disposer d’un support pour l’extensibilité.

En attendant l’arrivée future des Web Component, les directives Angular fournissent une alternative qui a le mérite de fonctionner pour tous les navigateurs ou presque.

De façon très simple, les directives sont un outil pour étendre les fonctionnalités d’HTML.

Lire la suite

Publicités


Poster un commentaire

Controller As en Angular

La syntaxe controller As est une nouvelle syntaxe qui offre une alternative à $scope depuis la version 1.2.0 d’Angular et permet de remplacer une construction Angular en code JavaScript un peu plus standard.

On va se faire la main sur un contrôleur très simple, celui du menu trouvé dans le projet de routage déjà présenté:

https://plnkr.co/edit/LjiLN6jT9fKso4nWkslC?p=info

Lire la suite


Poster un commentaire

Angular 1: le routage

Je continue ma série Angular avec le routage. Un outil indispensable pour écrire des Single Page Applications (SPA).

Angular propose un service de navigation dans une application SPA appelée ngRoute. Une route est simplement une correspondance entre une url de l’application et un couple vue/contrôleur.

 

NgRoute met à notre disposition un gestionnaire de routes Angular qui permet de configurer la table de routage.

Celle-ci est normalement mise en place dans un bloc de code Angular (une configuration) pour être chargée dès le démarrage de l’application. Ainsi chaque fois qu’une route est réclamée, en général en cliquant sur un lien, Angular sera capable de ‘rediriger’ l’application vers le lien associé.

Souvenez vous bien que dans tous les cas on reste en fait sur la même page, c’est juste l’expérience utilisateur qui donne l’illusion d’une navigation sur le site.

Lire la suite


Poster un commentaire

Angular 1: les services

Les services sont des éléments clefs de l’architecture Angular et très peu d’applications peuvent s’en passer puisque $scope ou $rootScope en sont.

Pour l’essentiel, un service est un singleton. Il sera disponible partout où l’application en a besoin: contrôleur, directive, filtre… Il sert à implémenter la logique métier de l’application.

 

Il est important de bien comprendre la différence entre un service et un contrôleur.

Le service a en particulier vocation à renvoyer les données de la page et les persister d’une requête à l’autre. Ce travail n’a pas sa place dans le contrôleur qui est instancié uniquement lorsque c’est nécessaire via la directive ng-controller. En conséquence chaque fois que l’on change de route ou recharge la page le contrôleur sera réinitialisé.

Angular fournit un service de cache que l’on peut utiliser directement dans le contrôleur, mais dans l’idée des architectures MVC, il est sain de garder le contrôleur le plus léger possible. Donc le plus souvent on va plutôt créer un service personnalisé qui va savoir récupérer les données et ira peut-être les pousser dans le cache

 

Au programme:

  • Créer un service Angular
  • Etude d’un service natif: $http
  • Etude de $resource
  • Surcharge d’un contrôleur

Lire la suite


1 commentaire

La directive ng-options dans Angular

Cette directive est utilisée pour prendre en charge des listes déroulantes en Angular.

Elle est puissante, mais se paye au prix d’une syntaxe assez complexe. J’ai pas mal galéré dessus. J’ai donc décidé de faire un article avec tous les cas de figure auxquels j’ai pu penser afin d’avoir une petite référence.

 

Un projet récapitulatif sur Plnk:

https://plnkr.co/edit/ExnVZviqoEaR0sDDywvl

Lire la suite


Poster un commentaire

Angular 1: les bases

Angular (AngularJS) est un de ces frameworks JavaScript que j’aime utiliser et que je recommande fortement. Vous trouverez le site officiel ici:

https://angularjs.org/

 

Angular est un outil de la famille MV*. Son intention est donc de mettre à votre disposition une plomberie qui permet de gérer les interactions entre une vue (une page HTML) et des données basées sur le modèle MVC.

Les interactions cela peut être aussi bien de l’affichage que de la saisie ou du routage…

 

Le point intéressant est que vous n’avez pas à manipuler directement le DOM, c’est Angular qui s’en occupe à votre place et je trouve que c’est un progrès par rapport à JQuery. JQuery est un excellent outil, pas de débat là dessus, mais depuis que j’ai découvert Angular je m’en sers assez peu.

L’autre point est que l’outil est très orienté productivité. Evidemment le prix à payer – et certains le reprochent – est que les coulisses sont un peu boîte noire.

Pour finir Angular est prévu dès l’origine pour être testable. c’est quelque chose d’assez nouveau en JavaScript, mais vu le poids que commencent à prendre le côté client d’une appli, le sujet va se développer forcément.

 

Angular est un framework à opinion. C’est un terme je pense plus précis que dire « un moule » qui embarque par ailleurs une connotation négative que je n’aime pas trop. Un Framework à opinion vous demande donc d’adhérer à une certaine philosophie, des pratiques et des contraintes.

Je voudrai ajouter qu’Angular dispose d’une communauté très riche, il est très bien bordé par la littérature et c’est Google qui est à la manœuvre.

Vous ne devriez donc pas prendre un risque technologique fort en l’adoptant.

Au programme:

  • Versions d’Angular
  • Outillage
  • Première page
  • Contrôleurs Angular
  • Le binding
  • Afficher/masquer
  • Autres directives
  • La directive de liste
  • Les filtres
  • Réagir aux événements du modèle
  • Autres syntaxes

 

Pour finir vous trouverez sur Plnker un projet de démonstration qui reprend et approfondit un peu les notions présentées dans cet article:

http://plnkr.co/edit/ZjjM6f97MQOwH0VOff2O

Lire la suite