Le but de TP est de créer votre première application web angulaire.
On a vu en cours les différentes briques d’une application angular. Le développement pratique est facilité par l’outil CLI (Command line interpréter) de angular.
Pour créer votre première application suivez les étapes suivantes :
1. Installer Nodejs
À partir du lien https://nodejs.org/en/ .
2. installer CLI
Tapez la commande
npm install -g @angular/cl
3. Créer un répertoire de votre choix par exemple d:/angular
4. Créer un projet angular en tapant
ng new monpremierprojet
noter que la forme générale de la commande est ng new <nom-de-projet>
5. Entrer dans le répertoire monpremierprojet
6. Lancer l’application en tapant
ng serve -o
7. Édition de notre premier composant angulaire.
La CLI a créé pour nous par défaut dans ./src/app/
1. un composant Angular app-root qu’on peut trouvé dans ./src/app/ app-component.ts et son contenu est
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'bonjour ';
}
2. Un module AppModule . le fichier du module est ./src/app/app.module. son contenu est
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
3. Changer le contenu HTML du fichier en /src/app/app.component.html à
<H1>
premiere page, la valeur qui suit vient du composant: {{title}}
</H1>
Ouvrez le fichier de composant et modifiez la propriété title de Welcome to app!! A bonjour , c’est ma première app angular . Le navigateur se recharge automatiquement avec le titre révisé.
Activité 2
Maintenant on va voir comment créer une application composée de deux composants.
Création d’un nouveau composant nommé time (<app-time></app-time>)
1. On se place dans la racine du projet et on tape
ng generate component time
ou
ng g c time
Dans le répertoire src/app du
projet, le CLI crée un répertoire time. Le contenu de
ce repertoire est :
/timetime.component.ts# Classe du composant
time.component.html# Template du composant
time.component.css# Styles CSS du composant
time.component.spec.ts# Tests unitaires du composant
Q1. modifier le composant pour qu’il ressemble à ceci (modifier le Template et la classe)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-time',
template: '<h1>{{ minutes }}:{{ seconds }} </h1>',
styleUrls: ['./time.component.css']
})
export class TimeComponent implements OnInit {
minutes: number;
seconds: number;
constructor(){
this.minutes = 24;
this.seconds = 59;
}
ngOnInit(): void {
}
}
À ce point on a crée un composant en créant une classe TimeComponent. Décorée avec @Component.
Maintenant consulter le module de l’application ./src/app/app.modules.ts pour voir que angular a enregistré votre composant en utilisant la proprieté Declaractions du module. Maintenat il est reconnu par d’autres éléments de module. Il devient disponible à leur template /templateURL. Ceci veut dire qu’on peut mettre le module timecomponent à l’interieur de appcomponent.
9. ouvrer le fichier du module AppComponent (.src/app/app.component.ts) et modifier le template à :
<H1>
premiere page, la valeur qui suit vient du composant: {{title}} et ici le temps(time)<H1><app-time></app-time></H1>
</H1>
Comme vous voyez nous référençant le composant par son sélecteur (app-time).
Maintenant
Tapez
Ng serve -o
2) maintenat on va dynamiser la page. On va créer une montre reelle
On va modifier le composant pour qu’il gere la montre
On ajoutant les méthodes suivantes
constructor() {
this.reset();
setInterval(() => this.tick(), 1000);
}
reset() {
this.minutes = 24;
this.seconds = 59;
}
private tick() {
if(--this.seconds < 0) {
this.seconds = 59;
if(--this.minutes < 0) {
this.reset();
}
}
}
Ajouter de l’interactivité au composant
Angular fournit un support parfait pour gérer les événements via une interface déclarative. Cela signifie qu'il est facile d’attacher les méthodes de gestion aux événements. Il est également facile de lier des données au template HTML.
1. Modifier le template comme suit :
@Component({
selector: 'timer',
template: `
<h1>{{ minutes }}: {{ seconds }} </h1>
<p>
<button (click)="togglePause()"> {{ buttonLabel }}</button>
</p>
`
})
Et modifiant la classe en ajoutant les attributs
isPaused: boolean;
buttonLabel: string;
et la méthode
togglePause() {
this.isPaused = !this.isPaused;
// if countdown has started
if(this.minutes < 24 || this.seconds < 59) {
this.buttonLabel = this.isPaused ? 'Resume' : 'Pause';
}
}
Cette methode change la valeur de ispaused.