Angular

1.      Introduction. 1

2.      Module. 3

.. 3

3.      Composant 5

Un composant =Classe en typescript (.Ts) + Template. 6

Afficher un composant Angular. 8

4.      Template. 9

5.      Data binding (liaison de données). 11

6.      Directives. 14

7.      Service. 15

8.      Dependency injection(injection de dépendance). 15

 

1.    Introduction

Angular est un framework(cadriciel) pour développer des applications web. Le cadre se compose de plusieurs bibliothèques, certaines d'entre elles sont basique (core) et les autres sont  facultatives.

Vous écrivez des applications angulaires en composant des Template HTML avec un balisage angulaire, vous écrivez  des classes de composants (components) pour gérer ces templates, vous mettez la logique applicative  dans les services. Vous mettez  ces composants et ces services dans des modules.

Ensuite, vous lancez l'application en (bootstrapping the root module) amorçant le module racine. Angular  se charge de la presentation du  contenu de votre application dans un navigateur et répond aux interactions des utilisateurs selon les instructions que vous avez fournies.

Les sections suivantes Vous apprend  les détails.

 Il faut que comprend bien ces concepts pour maitriser le développement avec angular.

Pour l'instant, jetez un coup d’œil  sur l’architecture d’une application angular  présenté par la figure suivante :

.

 

Une  application Angular se compose des  briques suivante :

• Modules
• Components(composants)
• Templates
• Metadata
• Data binding(liaison de données)
• Directives
• Services
• Dependency injection
• Application Angular minimale = 1 module + 1 composant
• Outils de développent+ exemple

 

 

 

 

 

2.   Module

Définition : Un module Angular est outil de structuration et  d’organisation du  code de l’application. Chaque composant et chaque service doit être rattaché à un module.

Tous les éléments  crées  par le développeur  doivent être enregistré dans un module. Le module joue le rôle d’une façade avec le monde exterieur. Techniquement il est une classe décorée avec @NgModule. Le décorateur  @NgModule  prend un objet littéral comme paramètre.

Les proprioetés de cet objet décrit le  module. Les plus importantes sont :

·         declarations - the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.

·         exports - the subset of declarations that should be visible and usable in the component templates of other modules.

·         imports - other modules whose exported classes are needed by component templates declared in this module.

·         providers - creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.

·         bootstrap - the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.

Pour enregistrer un composant dans un module  on doit ajouter le nom du composant  aux valeurs du tableau declarations.  Declarations est un attribut de l’objet littéral passé comme argument au décorateur  @NgModule  .   

 

A ce point le module angular est informé sur le composant. On ajoute une autre propriété à notre module bootstrap.  Le mot clé bootstrap indique que tout ce qui est placé ici sert de composant d'entrée pour l'application entière. Parce que nous n'avons qu'un seul composant, jusqu'à présent, il est logique d'enregistrer notre composant avec ce mot clé bootstrap:

Exemple

import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

@NgModule({

  imports:      [ BrowserModule ],

  providers:    [ Logger ],

  declarations: [ AppComponent ],

  exports:      [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

 

le lancement d’une application se fait par bootstrapping le root module (AppModule). Cette activité se fait sur le fichier  a main.ts  situé dans /src

src

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

 

 

Quand utiliser un module ?

On peut  mettre tous les composants et services de l’application dans un unique module Angular, mais il est préférable de  découper son application en plusieurs modules .

 

3.     Composant

Définition : Avec angular on voit que l’application web, qui est servi par une seule page((Single page application ), est    divisée en parties (composants). Ces composants peuvent être liées par exemple par une liaison hiérarchique.

Un composant Angular représente une partie  d’interface (une vue) de l’application. On trouve  aussi cette idée dans les framework emberjs et reactjs.

Un composant =vue (ce qui est visible à l’utilisateur)+code métier pour gérer  la gérer ( par exemple on cas des click, réception de données du serveur etc).

Un composant à 3 caractéristiques :

1. C’est une partie d’interface de votre application.

Il peut contenir d’autres composants : on peut imbriquer  imbriqués les composants.  Noter que  le point de départ de toute application Angular, c’est un composant “racine ” qui va contenir tous les autres composants et qui représente l’ensemble de l’interface. ce composant racine est nommé (convention)  AppComponent.

2. Il peut être affiché dynamiquement  soit

. En utilisant  son sélecteur.

• En utilisant  le routeur Angular.

Si on affiche en utilisant  son sélecteur, on peut  lui appliquer des directives comme *ngIf ou *ngFor  (on va les détaillées dans les sections suivantes).

• *ngIf  pour afficher ou cacher  un composant en fonction d’une condition.
• *ngFor  pour  répéter l’affichage du même composant en fonction d’une collection.

On peut affichez un composant via le routeur, on lui associant à  à une URL spécifique de l’application qui va déclencher son affichage à chaque fois qu’elle sera visitée.

On peut dire par exemple :

• À l’URL http://monsite.com/login, affiche le composant LoginComponent.
• À l’URL http://monsite.com/articles, affiche le composant ArticleListComponent.

 

 

Techniquement

Un composant =Classe en typescript (.Ts) + Template

• La classe. Contient la logique métier du composant et les données.
• Le template. C’est la vue                              qui sera affichée à l’utilisateur.

 

Exemple : Le code ci-dessus présente un exemple de composant qui affiche “Bonjour ” à l’écran.

Exemple

@Component({

selector: 'app',

template: `<h1>{{ title }}</h1>`

})

export class AppComponent {

title: string = 'bonjour’ ;

}

la classe AppComponent  possède un attribut titre  de type string et dont la valeur est initialisée à “bonjour ”.

Pour que Angular  considère notre classe comme un composant et puisse construire la vue associée, nous devons lui ajouter des metadata on utilisant le décorateur @Component qui prend en paramètre les metadata qui vont décorer notre classe : selector et template.

L’attribut selector permet d’associer le  composant à une balise HTML personnalisé (son nom est donné par le développeur). Dans notre cas, chaque fois que la balise <app></app> sera utilisée dans l’application, angular  créer une instance du composant et l’affiche sur la page.

L’attribut template quant à lui contient le code HTML du composant qui sera présenté à l’utilisateur (`<h1>{{ title }}</h1>` ici {{ title }} sera remplacé par la valeur de l’attribut title de la class appComponent  ). Il est possible de charger le code HTML depuis un fichier en utilisant la propriété templateUrl.

 

On trouve parfois des fichiers supplémentaires, mais ils sont facultatifs :

• On peut avoir un fichier .css pour les styles du composant.
• On peut avoir un fichier .spec.ts pour les tests unitaires du composant.

 

Afficher un composant Angular

Pour afficher ce composant à l’écran, il suffit d’utiliser une balise HTML nommée d’après ce sélecteur. En l’occurrence :<salut></salut>

 

Un composant Angular peut être de grand taille ( une page entière)  ou tout petit( comme un bouton ou une image) voir la figure 1.  On peut aussi imbriquer les composant.

Le développeur décide de contenu  du  composant ; ((aller d’un simple bouton à un écran entier).

 

 

4.    Template

on définit  la vue à  gérer par un composant en utilisant  Template.

Un Template est une forme de code html qui informe angular sur comment il présente le composant.

Il est similaire a html mais avec quelques diffrences. L’exemple suivant est un exemple de template de composnat  ListproduitComponent:

src/app/hero-list.component.html

1.      <h2>liste de producth2>

2.       

3.      <p><i>selectionner un produit de la liste</i></p>

4.      <ul>

5.        <li *ngFor="let prod of product" (click)="selectprod(prod)">

6.          {{prod.designation}}

7.        </li>

8.      </ul>

9.       

10.  <prod-detail *ngIf="selectedprod" [prod]="selectedprod"></prod-detail>

 

Alors que ce Template utilise[a1]  des éléments html (h2 , p), il  y a des différences. De code comme  *ngFor, {{prod.name}}, (click), [prod], and <prod-detail> utilise la syntaxe de Template  Angular.

Dans la dernière ligne du  Template, la balise  <prod-detail>  est une balise personnalisée et représente un nouveau composant  ProdDetailComponent.

Le composant  ProdDetailComponent est fils de  ProdListComponent.

 

 

 

 

 

 

 

 

 

 

 

5.    Data binding (liaison de données)

Sans Framework, tu doit programmer   la communication, dans  n’importe quel sens ,  entre vue (template)  et données (typescript et/ou js). (l'introduction des valeurs de données HTML et de la transformation des  réponses des utilisateurs en actions et la mises à jour des valeurs)  Écrire une telle logique push / pull manuellement est une tache fastidieuse (posez l question expert jQuery ).

Cette coordination entre les parties de Template et les parties de composants se nomme data binding.

  Angular  fournit l’outil data binding (figure suivante)  pour faciliter la gestion de  DOM  de manière dynamique.

Ajouter des ,marques de liaison au Template pour indiquer à angular comment il doit connecter les deux cotés.

Comme montré par la figure suivante il 4  formes de syntaxe de data binding:

Chaque forme à une direction 

Vers le DOM, à partir du DOM ou dans les deux directions.

Les formes :

• les informations venant de votre code qui doivent être affichées dans le navigateur, comme par exemple des informations que votre code a calculé ou récupéré sur un serveur.  Les deux principales méthodes pour cela sont le "string interpolation" et le "property binding" ;
• les informations venant du template qui doivent être gérées par le code : l'utilisateur a rempli un formulaire ou cliqué sur un bouton, et il faut réagir et gérer ces événements.  On parlera de "event binding" pour cela.

Par exemple le template de  composant ProdListComponent  à trois formes

/hero-list.component.html (binding)

<li>{{prod.design}}</li>

<prod-detail [prod]="selectedHero"></ prod -detail>

<li (click)="selectprod (prod)"></li>

• L’interpolation (String interpolation) {{prod.design}}  affiche la valeur de la  proprieté  prod.design  du  composant avec un element  <li>. (comme élément d’une liste).
• La liason de proprieté (property binding) [hero] passe  la valeur de selectedprod property binding passes the value of selectedprod du pere ProdListComponent à la proprieté prod  du fils  ProdDetailComponent.
• La lianson d’evenement(event binding)  (click)  appelle la méthode  selectprod du composant quand l’user click sur le nom du produit .

 

 

 

Il existe également des situations comme les formulaires, par exemple, où l'on voudra une communication à double sens : on parle donc de "two-way binding".

Two-way data binding  une forme importante qui combine  property and event binding en une seule notation en utilisant la directive  ngMode. Ici il ya communication à double sens. Par exemple

<input [(ngModel)]="prod.name">

La liaison de donnée joue un rôle important entre composant et vue 

Et ausii dans la communication entre composant père et composant  fils

 

 

 

6.    Directives

Les Templates angular sont dynamique. C.à.d. quand angula  les affiche, ils  transforment le DOM selon les  instructions données par les directives.

Une directive est une classe décoré avec @Directive. Un composant est techniquement une directive+template.  Alors le décorateur @Component est un décorateur  @Directive  étendue par des caractéristiques de Template.

Il y ‘a deux  types de directives : structural et attribut. Il apparaissent dans  une balise  comme attributs. Dés fois , en utilisant un nom mais souvent comme cible d’une affectation ou liaison.

Directive Structurelle: modifie la forme par l’ajout, suppression et remplacement des elements DOM.

L’exemple suivant utilise deux directives structurelles.

<li *ngFor="let prod of products"></li>

<prod-detail *ngIf="selectedprod"></prod-detail>

·         *ngFor informe angular pour qu’il crée un élément e <li>  pour chaque produit de la lise des products.

·         *ngIf  fait inclure le composant prodDetail seulement si le produit sélectionné existe.

Attribute: modifie l’apparence ou le comportement d’un élément existant. Dans les templates elles ont la forme d’un attribut html d’où vient le nom..

La directive  ngModel qui implémente  two-way data binding est un exemple de ce type. ngModel modifie le comportement d’un élément existant ( souvent  <input>) en mettant à jour son valeur  et en répondant aux évènements de  changements.

exemple

<input [(ngModel)]="prod.deignation">

On peut écrire nos propres directives.

 

 

 

7.    Service

Définition : Un service Angular représente une partie  de la  logique applicative partagé entre plusieurs codes. Il est utilisé pour  éliminer les duplications en rendant  le  elements (code et /ou data)  redondant accessible à tous  comme un service.

Exemple de service :  un service qui gère la communication avec la base de données. Un service pour gérer  l’authentification.

8.    Dependency injection(injection de dépendance)

Dependency injection (DI)  est  technique pour avoir une nouvelle instance d’une classe avec toutes ses dépendances. Angular utilise  DI pour fournir  aux  nouveaux composant les services  dont ils ont besoin.

Angular peut connaitre les service requis par un composant en examinant les types des paramètres de constructeur. Par exemple  l’analyse de la signature du constructeur  de composant  ListComponent 

 constructor(private service: prodService) {

indique qu’il à besoin de prodService:

quand angular crée un composant , il demande les services requis par ce composant à un injecteur . cet injecteur maintien une liste qui contient les instances des services déjà crées. Si le service demandé n’existe pas dans la liste, l’injecteur crée un et l’ajoute à la liste.

Le processus injection  ProdService  est similaire au suivant:

 

Si l’injecteur n’a pas l’ instance du service s par exemple prodservice, comment sait  il comment il crée un ?

La solution  est qu’il faut que tu as enregistré un fournisseur (provider) de service prodservice avec l’injecteur.

Le provider est une entité qui crée et retourne un service. Typiquement la classe du service lui-même.

On peut enregistrer un provider dans les modules ou les composants.

Mais généralement les providers sont ajouter à root module  pour que l’instance soit disponible partout.

providers: [

  BackendService,

  prodService,

  Logger

],

Une autre alternative est d’enregistrer au niveau de composant en utilsant la propriété  providers du   @Component metadata:

@Component({

  selector:    'prod-list',

  templateUrl: './prod-list.component.html',

  providers:  [ prodService ]

})