Components inheritance

Since Angular 2.3, we can use Components inheritance. The feature improve code reusability and desgin of our applications. This feature covers all of the following : Metadata : You can herit of parent properties or override them. So, we can inherit from @NgModule, @Host, @Self @SkipSelf, @Inject, @Optionnal, @Attribute, @ContentChild, @ContetnChildren, @ViewChild ……

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 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

Les directives

Dans l'architecture Angular, les directives sont finalement partout. Les Components sont des directives à la seule différence qu'ils possèdent une fonctionnalité de templating. En TypeScript, une directive est une classe à laquelle on applique le décorateur @Directive. Il existe deux sortes de directives : Les directives structurelles : Elles ont pour but…

lire la suite

Vos premiers Components

Suite à l'article précédent, vous avez pu générer votre premier projet et lancer un serveur HTTP grâce à la commande ng serve. Je vous propose maintenant d'étudier de plus près notre premier component AppComponent présent dans src/app. En voici le code : Le selector est préfixé par app par défaut….

lire la suite

Démarrer avec Angular-Cli

Maintenant que vous êtes familier avec la notion de Component, j'imagine que vous désirez, vous aussi, créer vos propres Components. Avec Angular, vous pouvez développer vos applications avec TypeScript comme nous l'avez vu dans le précédent article, mais également en « Vanilla JavaScript ». Vanilla JavaScript ? Ce que l'on appelle…

lire la suite

De la théorie à la pratique

 Nous connaissions AngularJS, le fameux framework de Google permettant la réalisation d’applications web dites « SPA » pour Single Page Application.   Pour ceux qui seraient passés à côté de ce concept, une SPA est une application ne disposant que d'une seule page : index.html. Ce type d'architecture Web permet…

lire la suite

Un peu d’histoire …

Côté HTML   La norme HTML 5 a été finalisée en octobre 2014. Elle a mis beaucoup de temps à accoucher (pour mémoire, HTML 4 date de 1997), mais HTML 5 n’est pas une simple évolution du HTML mais plus une Révolution ! Il a permis d'étendre le HTML et…

lire la suite