HttpClient, une refonte du module historique

L'arrivée de la version 4.3 d'Angular sonne (enfin) l'arrivée d'un nouveau client HTTP ! Rassurez-vous, le client actuel existe toujours dans le package '@angular/http'. Ce nouveau client se situe dans un autre package : '@angular/common/http'.  Cette nouvelle mouture se base sur un bien meilleur design et des nouvelles fonctionnalités intéressantes;…

lire la suite

Les pipes

Le principe d'un pipe est de prendre en entrée une donnée et de la transformer comme vous le désirez dans le but de l'afficher à l'utilisateur. Un exempale courant d'utilisation des pipes est le formatage des dates. Si vous devez afficher un objet Date dans votre template en utilisant l'interpolation, vous…

lire la suite

Le module HttpModule

Le module HTTP est un module optionnel d'Angular qui vous permet de requêter vos API à l'aide du protocole HTTP. Pour l'utiliser cela implique deux choses : La dépendence @angular/http doit être déclaré comme dépendance NPM. Le module doit être déclaré dans les métadonnées du décorateur @NgModule. Angular a fait…

lire la suite

Comprendre RxJS

Reactive extensions for JavaScript (RxJS) est une librairie de flux reactifs qui vous permet de travailler avec des flux de données asynchrones. La programmation réactive est un paradime de programmation orienté flux de données et propagation des changements. RxJS peut être utilisé aussi bien dans un navigateur que côté serveur…

lire la suite

L’injection de dépendances Angular

Nous allons parler dans cet article d'un des piliers du framework Angular : L'injection de dépendance. L'injection de dépendance est une notion importante à bien comprendre et à bien implémenter. Déjà présent dans AngularJS, cette notion est toujours présente dans le nouveau framework de Google mais à bien changé. Nous…

lire la suite

Les interactions entre components

Dans une application Angular, les components passent leur temps à s'échanger des données à l'aide de différents mécanismes d'interraction. Cet article est là pour faire le point sur les différents mécanismes : permettant de transmettre une donnée d'un component parent vers un component enfant. permettant de transmettre une donnée d'un component…

lire la suite

Le routage avec Angular

L'un des rôles d'une application Web est de pouvoir servir des pages HTML au travers de liens HyperText. La balise responsable de ce routage est <a href="…">. Lorsque l'on clique sur un lien HyperText, le navigateur intercepte cette action et va charger la nouvelle page. Il en résulte la perte…

lire la suite

Le cycle de vie d’un Component

Nous allons maintenant étudier le cycle de vie d'un Component Angular. Pour ceux qui ne connaissent pas le terme de cycle de vie, il s'agit simplement de la définition de toutes les étapes de la naissance du Component à sa mort. Sur le schéma de gauche, vous pouvez voir toutes…

lire la suite

Les modules Angular

L'équipe Angular a travaillé dur pour nous offrir un framework à l'architecture robuste et évolutive. Et comme ils sont également bons en dessin, ils nous ont offert ce magnifique dessin en guise de spécification :   On retrouve ainsi les différents concepts que sont le data binding, les components, les directives, les…

lire la suite

Le Data Binding Angular

Le Data Binding est un élément essentiel dans les frameworks de Single Page Application. Il permet de synchroniser la vue au modèle JavaScript sous-jacent. Voici un schéma général du fonctionnement du Data Binding :      Angular a défini quatre sortes de Data Binding pour synchroniser le template et le Component….

lire la suite