Angular 2 – introduction – Dr. Ali EDDBALI

Le framework Angular 2 (successeur de AngularJS de Google) est un framework JavaScript pour créer des applications monopages (SPA: Signle Page Application), web et mobiles.

Types d’applications développées avec Angular ?

De petits widgets interactifs pour un site web existant (moteur de recherche, module de réservation). Exemple : virginamerica.com
Site web complet. Exemple : weather.com
Application mobile. Exemple : posse.com

Angular 2 (même en Release Candidate en date de mai 2016) est en production chez de gros fournisseurs. Voir angularexpo.com.

Tout savoir sur Angular : angular.io

Structure d’un projet Angular 2 créé à l’aide de la commande ng new test1NG (le framework arrive avec des commandes de angular-cli – Angular Command Line Interface) :

src : répertoire qui contient les sources de l’application. Il est conseillé d’avoir un « composant » par répertoire. app accueille le 1er composant. La page principale affichée est src/index.html. La balise <app-root> constitue le point d’entrée de l’affichage. Cette balise est définie dans le 1er composant.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test1NG</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

<app-root>Loading...</app-root>

</body>

</html>

Remarque : aucune introduction de fichier JS n’est opérée dans le fichier index.html. Ceci est fait lors de phase de compilation avec les commandes de angular-cli.

Au lancement, c’est avec le fichier src/main.ts que tout démarre. Ce fichier (comme tous les autres programmes) est écrit avec le langage Typescript. C’est un sur-ensemble de javascript. Les programmes écrits en ts sont compilés vers Javascript dans sa version ES5 ou ES6 sachant que la ES6 n’est pas encore entièrement supportée par tous les navigateurs.

Remarque : on peut également développer sous Angular avec le langage Dart !

Source de main.ts :

import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

import './polyfills.ts';

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

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

import { environment } from './environments/environment';

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

if (environment.production) {

enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule);

Le programme main.ts, exécuté en 1er, amorce (du verbe bootstrap) l’application en commençant parle module AppModule. Un module sous Angular est une collection de composants. Chaque composant se charge d’une tache particulière. Dans notre cas, AppModule contient un seul composant nommé AppComponent. AppModule est une classe décrite dans le fichier src/app/app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

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

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

HttpModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

On remarque la dépendance de AppModule du composant AppComponent. AppModule amorce (bootstrap) donc AppComponent. Le tag imports énumère les modules utilisés par notre AppModule. Ici, le seul module vraiment utile est BrowserModule. Les autres ne sont utiles que si on traite des données en input (FormsModule) ou des requêtes HTTP (HttpModule) ce qui n’est pas le cas dans notre exemple jouet.

Un composant est la brique principale dans la construction d’une application. Toutes les zones d’une application sont produites par des composants :

AppComponent est donc la racine de l’application. Un petit coup d’oeil sur ce composant (fichier src/app/app.component.ts) :

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app works!';

}

Le décorateur @Component a un paramètre JSON qui doit contenir au moins les 2 premiers tags : selector et templateUrl. Le sélecteur (qui peut être n’importe quel sélecteur comme les sélecteurs CSS) défini le tag HTML qui agit sur la page web qui le référence. Remarquons la balise <app-root> dans le fichier index.html plus haut. Le templateUrl indique le fichier HTML qui remplacerait le tag rencontré dans la page qui le contient. Voici le contenu de app.component.html :

<h1>{{title}}</h1>

1	<h1>{{title}}</h1>

Ici, Angular remplace dans le fichier index.html le texte <app-root>Loading…</app-root> par le contenu du fichier app.component.html après avoir évalué la propriété title de la classe AppComponent.

Remarque : Si on n’a pas trop de texte dans notre fichier template ou dans nos fichiers CSS, on peut utiliser du HTML et des ordre CSS directement en-ligne en les entourant par des anti-apostrophes : `

Le fichier app.component.ts contiendrait alors :

@Component({
  selector: 'app-root',
  template: `
    <h1>Texte en direct</h1>
    `,
  styles: [`h1 {color : red;}`]
})

@Component({

selector: 'app-root',

<h1>Texte en direct</h1>

styles: [`h1 {color : red;}`]

})

Ajout d’un autre composant

L’ajout d’un autre composant se fait facilement en ligne de commande par :

ng generate component nom_composant ou ng g c nom_composant

Ceci crée l’arborescence src/app/nom_composant avec les fichiers canonique d’un composant comme pour notre AppComponent.

Exemple : ng g c autre

Crée src/app/autre/autre.component.ts et autres fichiers :

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-autre',
  templateUrl: './autre.component.html',
  styleUrls: ['./autre.component.css']
})
export class AutreComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-autre',

templateUrl: './autre.component.html',

styleUrls: ['./autre.component.css']

})

export class AutreComponent implements OnInit {

constructor() { }

ngOnInit() {

}

Le fichier autre.component.html contient par exemple :

<p>
  autre works!
</p>

<p>

autre works!

</p>

Sachant que AppComponent est le composant racine et que le tag <app-root> utilisé dans index.html interagit avec le composant racine, il faut utiliser le nouveau composant dans AppComponent mais directement dans index.html. Autrement dit, rien ne se passera si on décide que index.html contiendra :

<app-root>Loading...</app-root>
<app-autre>Blabla...</app-autre>

1 2	<app-root>Loading...</app-root> <app-autre>Blabla...</app-autre>

Le tag <app-autre> ne sera pas interprété !

Exemple d’utilisation dans app.component.ts :

@Component({
  selector: 'app-root',
  template: `
    <h1>Texte en direct</h1>
    <app-autre></app-autre>
    `,
  styles: [`h1 {color : red;}`]
})

@Component({

selector: 'app-root',

<h1>Texte en direct</h1>

<app-autre></app-autre>

styles: [`h1 {color : red;}`]

})

Après compilation, la page racine affiche le h1 suivi du paragraphe « autre works! ». Les dépendances sont gérées automatiquement lors de l’exécution de la ligne de commande de création du nouveau composant. Ainsi, le fichier app.module.ts devient :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AutreComponent } from './autre/autre.component';
@NgModule({
  declarations: [
    AppComponent,
    AutreComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

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

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { AutreComponent } from './autre/autre.component';

@NgModule({

declarations: [

AppComponent,

AutreComponent

imports: [

BrowserModule,

FormsModule,

HttpModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Remarques :

A chaque fois qu’on crée un composant à l’aide de : ng g c nom_composant, on crée un répertoire pour ce nouveau composant. On peut ne pas compliquer l’arborescence de notre projet en se plaçant au bon endroit (répertoire de nos composants) et ajouter l’option --flat. Les fichiers seront ajoutés dans le même répertoire.
Si on veut créer un composant sans fichier template ni fichier styles, on ajoute les option -is (pour inline-styles) et -it (inline-template) :
ng g c --flat -is -it nom_composant
Si la page contient plusieurs tags de même nature (ex <p>), le style défini dans un composant agit uniquement sur les tags de son template. Angular crée des attributs à ces tag et utilise ces attributs dans les styles CSS généré.

Si le composant AppComponent insère du texte dans le tag d’un autre composant comme ici :

@Component({
selector: 'app-root',
template: `
  <h1>Texte en direct</h1>
  <app-autre>
    <h2>Un sous titre</h2>
    <p>Blabla...</p>
  </app-autre>
`,
styles: [`h1 {color : red;}`]
})

@Component({

selector: 'app-root',

<h1>Texte en direct</h1>

<app-autre>

<h2>Un sous titre</h2>

<p>Blabla...</p>

</app-autre>

styles: [`h1 {color : red;}`]

})

Le texte à l’intérieur de <app-autre> n’apparaitra pas !
Il faut pour cela utiliser le tag <ng-content> dans le template autre.compnent.html de AutreComponent. Exemple :

<article>
  <ng-content></ng-content>
</article>

<ng-content></ng-content>

</article>

Dr. Ali EDDBALI

Maître de conférences | Université d'Orléans

Maître de conférences | Université d'Orléans

Angular 2 – introduction

Ajout d’un autre composant

Laissez un commentaire Annuler la réponse.