Scribd
Upload
83 views

TP Angular

The document discusses exercises for an AngularJS tutorial. Exercise 1 involves initializing a cars variable with brands and colors, and displaying the cars using ng-repeat. Exercise 2 creates a shopping list table binding item names and prices. Exercise 3 builds a table to display people entered via two text fields that updates on input. The correction provides the code for each exercise, demonstrating ng-init, ng-repeat, filters, and controllers.

Uploaded by

olfa jabri
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
83 views

TP Angular

The document discusses exercises for an AngularJS tutorial. Exercise 1 involves initializing a cars variable with brands and colors, and displaying the cars using ng-repeat. Exercise 2 creates a shopping list table binding item names and prices. Exercise 3 builds a table to display people entered via two text fields that updates on input. The correction provides the code for each exercise, demonstrating ng-init, ng-repeat, filters, and controllers.

Uploaded by

olfa jabri
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 35

1MP IDM

Angular Responsable:Olfa Jabri


Institut Supérieur de Installation
Gabes

: npm install -g @angular/cli


Institut Supérieur de 1MP IDM
Tp2:Angularjs
Gabes
Année Universitaire Responsable:Olfa Jabri
2021/2022

EXERCICE 1:

créer le document HTML suivant:


<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></
script>
</head>
<body>
<div>
<label>Nom:</label>
<input type="text" ng-model="votreNom" placeholder="Veuillez entrer votre nom">
<hr>
<h1>Bonjour {{votreNom}}!</h1>
</div>
</body>
</html>
expliquer les effets suivant:
 ng-app:...........................
 ng-model:........................
 {{ }}:...............................
EXERCICE 2:
Ajouter un script Angular qui permet d'initialiser une variable "nom" (en utilisant la directive ng-init) et
ensuite de l'afficher.

EXERCICE 3:
Modifier le code script de l'exercice2 en utilisant la notion de controller.

EXERCICE 4:
donner le code d'un script qui permet d'additionner deux nombres.
 en utilisant deux lignes de saisie (input)
 en utilisant deux variables initialiser
correction tp1
exercice 2
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, Angular</title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
<label>Name</label>
<input ng-model="name" />
<span>Hello, {{ name }}!</span>
<p ng-bind="name"></p>
</body>
</html>

exercice 3

<!DOCTYPE html>
<html ng-app="exemple">
<head>
<title>Hello, Angular</title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body >
<script>
var app=angular.module('exemple', [])
app.controller('ExampleController', function($scope) {
$scope.nom = 'madame';
});
</script>
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="nom"></label><br>
Hello <span ng-bind="nom"></span>!
</div>
</body>
</html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">


{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
exercice 4

<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>My First Angular</title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

</head>

<body ng-init="a = 1;b=2">


<h1>Helloggg {{"somme de "+ (a*1+ b*1)}} !</h1>
<h1>somme de {{a+b}}</h1>
<h1></h1>
</body>
</html>
Institut Supérieur de Tp3:Angularjs 1MP IDM
Gabes
Année Universitaire Responsable:Olfa Jabri
2021/2022

Exercice 1
donner le script qui permet d'initialiser une variable users qui contient un ensemble d'utilisateur et puis
l'afficher en utilisant la directive nb-repeat .

 salah
 ali
 mohamed

a- afficher les utilisateurs en majuscule


b- afficher les utilisateurs qui possède la lettre 'l'
c-afficher les utilisateurs en ordre croissant
Exercice 2
écrire un script qui permet de saisir deux nombres a et b. et afficher le resultat d'une addition et
multiplication.
correction
tp2 -exercice 1
<div ng-init="users=['marc','xxxx','yyyy']">
<ul><li ng-repeat="user in users"> {{user|uppercase}}</li></ul>
</div>

{{users|filter:'m'}}
{{users|orderBy:+users}}
tp2- exercice2
<!doctype html>
<html ng-app="exemple">
<head>
<meta charset="UTF-8">
<title>Example - example-controller-scope-inheritance</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></
script>

</head>
<body >
<script>
var app=angular.module('exemple', [])
app.controller('MyController', ['$scope', function($scope) {
$scope.title='Module Simple';
$scope.result = 0;
$scope.add = function(a,b) {
$scope.result = a+b;
};
$scope.multiple = function(a,b) {
$scope.result = a*b;
};
}])

</script>
<div ng-controller="MyController">
<br>
<h1>Demo {{title}}</h1>
<div>
<p>
<label for="valA">Valeur de A:</label>
<input type="number" id="valA" ng-model='valA'>
</p>
<p>
<label for="valB">Valeur de B:</label>
<input type="number" id="valB" ng-model='valB'>
</p>
<p>
Result: {{ result }}</p>
</p><button ng-click="add(valA,valB)">Additionner</button>
<button ng-click="multiple(valA,valB)">Multiplier</button>
</p>

</div>
</div>
</body>
</html>

Institut Supérieur de Tp4:Angularjs 1MP IDM


Gabes
Année Universitaire Responsable:Olfa Jabri
2021/2022

Exercice 1
donner le script qui permet d'initialiser une variable voiture dont on fixe la marque et couleur (type
intervalle) d'un ensemble de voiture.
a- afficher toutes les voitures

b- en utilisant la directive ng-show, afficher seulement les voitures de couleur rouge.


Exercice 2
Le but est de construire un tableau de courses à faire avec les noms des articles et leur prix.

Exercice 3
Le but est de construire un tableau qui affiche des personnes avec leur nom et leur âge. On prévoit deux
zones de texte pour entrer les informations. On veut que le tableau s'actualise à mesure :
correction
exercice 1

a) <div ng-app>
<div ng-init="voitures = [
{marque:'Renault', couleur:'verte'},
{marque:'Mercedes', couleur:'rouge'},
{marque:'Rolls', couleur:'or'},
{marque:'Ferrari', couleur:'rouge'}]">
J'ai {{voitures.length}} voitures :
<ul><li ng-repeat="voiture in voitures">
Une {{voiture.marque}} {{voiture.couleur}}.</li></ul>
</div></div>
b) J'ai des voitures rouges :
<ul><li ng-repeat="voiture in voitures" ng-show="voiture.couleur == 'rouge'">
Une {{voiture.marque}}.</li></ul>

exercice 2

<div ng-app>
<div ng-init="articles = [
{nom:'Farine', prix:2.3},
{nom:'Sucre', prix:1.35},
{nom:'Gâteaux', prix:3.9},
{nom:'Huile', prix:5.25}
]">
<table>
<caption>J'ai {{articles.length}} articles à acheter</caption>
<tr>
<th>Article</th>
<th>Prix</th>
</tr>
<tr ng-repeat="article in articles">
<td>{{article.nom}}</td>
<td>{{article.prix | currency:"€ "}}</td>
</tr>
<tr>
</table> </div></div>

exercice 3
<div ng-app ng-controller="Controleur">
<form ng-submit="ajouter(nom, age)">
Nom : <input type="text" name="nom" ng-model="nom">
Age : <input type="number" name="age" ng-model="age">
<br>
<button type="submit">Ajouter</button>
</form>
<table>
<caption>Personnes</caption>
<tr>
<th>Nom</th>
<th>Age</th>
</tr>
<tr ng-repeat="personne in personnes">
<td>{{personne.nom}}</td>
<td>{{personne.age}}</td>
</tr>
</table>
<script>
function Controleur($scope) {
$scope.personnes = new Array();
$scope.ajouter = function(nom, age) {
$scope.personnes.push({'nom': nom, 'age': age});
};
}
</script>
</div>

La seule difficulté réside dans le fait que cette fois la méthode du contrôleur comporte des paramètres. La
déclaration ngSubmit permet d'intercepter la soumission du formulaire et de l'orienter sur la méthode du contrôleur. Nous
n'avons rien prévu dans notre code concernant la validité des données saisies, si ce n'est de préciser le type des zones, en
particulier number pour l'âge. Si vous regardez le code généré vous allez trouver de nouvelles classes :

Nom : <input class="ng-valid ng-dirty" name="nom" ng-model="nom" type="text">

Age : <input class="ng-dirty ng-invalid ng-valid-number" name="age" ng-model="age"


type="number">

Ce sont : ng-valid, ng-dirty et ng-valid-number. Ce sont des classes de travail d'AngularJS. On se rend compte qu'elles
ont à voir avec la validation des données. Entrez autre chose qu'un nombre pour l'âge et vous verrez que la valeur ne s'inscrit
pas dans le tableau. La classe ng-valid-number se transforme alors en ng-invalid-number. Tout ça est géré par le
contrôleur de formulaire d'AngularJS.
Institut Supérieur de Tp4:Angularjs 1MP IDM
Gabes
Année Universitaire Responsable:Olfa Jabri
2021/2022

Exercice 1
ecrire un script qui permet de rechercher par nom et par tous autre champs dans un tableau qui contient
des personnes .

Exercice 2
on voudrait faire une recherche par âge. donner le script qui permet d'afficher les personnes dont leurs âges
>40
tp4
exercice 1

<div ng-app="monApplication">
<div ng-controller="Controleur">
<div class="form-group">
<label for="nom">Entrez un nom :</label>
<input type="text" class="form-control" id="nom"
placeholder="Entrez un nom ici" ng-model="recherche.nom">
</div>
<div class="form-group">
<label for="nom">Entrez un mot pour la recherche sur tous
les champs :</label>
<input type="text" class="form-control" id="nom"
placeholder="Entrez un mot ici" ng-model="recherche.$">
</div>
<table class="table table-bordered">
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Age</th>
<th>Sexe</th>
</tr>
<tr ng-repeat="personne in personnes | filter:recherche">
<td>{{ personne.nom }}</td>
<td>{{ personne.prenom }}</td>
<td>{{ personne.age }} ans</td>
<td>{{ personne.sexe }}</td>
</tr>
</table>
</div>
<script>
var monModule = angular.module('monApplication', []);
monModule.factory('Personnes', function() {
var Personnes = [
{ nom:'Dupont', prenom:'Albert', age:25, sexe:'M' },
{ nom:'Durand', prenom:'Leon', age:40, sexe:'M' },
{ nom:'Saulvit', prenom:'Paul', age:50, sexe:'M' },
{ nom:'Ragout', prenom:'Martine', age:42, sexe:'F' },
{ nom:'Bernard', prenom:'Valérie', age:27, sexe:'F' },
{ nom:'Tolout', prenom:'Jacques', age:63, sexe:'M' },
];
return Personnes;
});
monModule.controller('Controleur', ['$scope', 'Personnes',
function ($scope, Personnes) {
$scope.personnes = Personnes;
}
]);
</script>
</div>
<div ng-init="friends = [{name:'John', phone:'555-1276'},

{name:'Mary', phone:'800-BIG-MARY'},

{name:'Mike', phone:'555-4321'},

{name:'Adam', phone:'555-5678'},

{name:'Julie', phone:'555-8765'},

{name:'Juliette', phone:'555-5678'}]"></div>

<label>Search: <input ng-model="searchText"></label>

<table id="searchTextResults">

<tr><th>Name</th><th>Phone</th></tr>

<tr ng-repeat="friend in friends | filter:searchText">

<td>{{friend.name}}</td>

<td>{{friend.phone}}</td>

</tr>

</table>

<hr>

<label>Any: <input ng-model="search.$"></label> <br>

<label>Name only <input ng-model="search.name"></label><br>

<label>Phone only <input ng-model="search.phone"></label><br>

<label>Equality <input type="checkbox" ng-model="strict"></label><br>

<table id="searchObjResults">

<tr><th>Name</th><th>Phone</th></tr>

<tr ng-repeat="friendObj in friends | filter:search:strict">

<td>{{friendObj.name}}</td>

<td>{{friendObj.phone}}</td>

</tr>

</table>

exercice 2
<div ng-app="monApplication">
<div ng-controller="Controleur">
<table class="table table-bordered">
<caption>Personnes filtrées pour un âge supérieur à 40 ans</caption>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Age</th>
<th>Sexe</th>
</tr>
<tr ng-repeat="personne in personnes | Age:40">
<td>{{ personne.nom }}</td>
<td>{{ personne.prenom }}</td>
<td>{{ personne.age }} ans</td>
<td>{{ personne.sexe }}</td>
</tr>
</table>
</div>
<script>
var monModule = angular.module('monApplication', []).
factory('Personnes', function() {
var Personnes = [
{ nom:'Dupont', prenom:'Albert', age:25, sexe:'M' },
{ nom:'Durand', prenom:'Leon', age:40, sexe:'M' },
{ nom:'Saulvit', prenom:'Paul', age:50, sexe:'M' },
{ nom:'Ragout', prenom:'Martine', age:42, sexe:'F' },
{ nom:'Bernard', prenom:'Valérie', age:27, sexe:'F' },
{ nom:'Tolout', prenom:'Jacques', age:63, sexe:'M' },
];
return Personnes;
}).
filter('Age', function () {
return function (items, age) {
var out = [];
angular.forEach(items, function (item) {
if(item.age > age) out.push(item);
});
return out;
}
}).
controller('Controleur', ['$scope', 'Personnes',
function ($scope, Personnes) {
$scope.personnes = Personnes;
}
]);
</script>
</div>

<button ng-click="count = count + 1" ng-init="count=0">


Increment
</button>
<span>
count: {{count}}

</span>
div ng-init="friends = [{name:'John', phone:'555-1276'},

{name:'Mary', phone:'800-BIG-MARY'},

{name:'Mike', phone:'555-4321'},

{name:'Adam', phone:'555-5678'},

{name:'Julie', phone:'555-8765'},

{name:'Juliette', phone:'555-5678'}]"></div>

<label>Search: <input ng-model="searchText"></label>

<table id="searchTextResults">

<tr><th>Name</th><th>Phone</th></tr>

<tr ng-repeat="friend in friends | filter:searchText">

<td>{{friend.name}}</td>

<td>{{friend.phone}}</td>

</tr>

</table>

<hr>

<label>Any: <input ng-model="search.$"></label> <br>

<label>Name only <input ng-model="search.name"></label><br>


<label>Phone only <input ng-model="search.phone"></label><br>

<label>Equality <input type="checkbox" ng-model="strict"></label><br>

<table id="searchObjResults">

<tr><th>Name</th><th>Phone</th></tr>

<tr ng-repeat="friendObj in friends | filter:search:strict">

<td>{{friendObj.name}}</td>

<td>{{friendObj.phone}}</td>

</tr>

</table>
1MP IDM
Les components Responsable:Olfa Jabri
Institut Supérieur de
Gabes

Afin d'assurer un bon fonctionnement de votre projet angular en tant que style on doit ajouter
le BOOTSTRAP et scss.

1) créer un nouveau dossier

ng new mon-projet-angular --style=scss --skip-tests=true

cd mon-projet-angular

2)pour intégrer Bootstrap dans package.json de votre projet .

ng add @ng-bootstrap/ng-bootstrap

si vous avez plusieur projet on utilise:


ng add @ng-bootstrap/ng-bootstrap --project mon-projet-angular

3) Ouvrez le fichier angular.json du dossier source de votre projet. Dans


"architect/build/options", modifiez l'array styles comme suit :

"styles": ["./node_modules/bootstrap/dist/css/bootstrap.css",
],
"src/styles.scss"

4) lancer le serveur ng serve --o

5) pour créer un nouveau composant

ng generate component mon-premier

6) Regardez maintenant le fichier mon-premier.component.ts

utiliser ce sélecteur "app-mon-premier" dans notre code pour y insérer ce component.


7) Revenez dans app.component.html et modifiez-le comme suit :

8) pour modifier le contenue du component créer ouvrir "mon-premier.component.html"

1MP IDM
Responsable:Olfa Jabri
Le datbindinag
Institut Supérieur de
Gabes

L'intérêt d'utiliser Angular est de pouvoir gérer le DOM (Document Object Model : les éléments
HTML affichés par le navigateur) de manière dynamique, et pour cela, il faut utiliser la liaison
de données, ou "databinding".

le databinding, c'est la communication entre votre code TypeScript et le template HTML qui
est montré à l'utilisateur. Cette communication est divisée en deux directions :

 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".

1- String interpolation
L'interpolation est la manière la plus basique d'émettre des données issues de votre code
TypeScript.

Exemple1

1) créer un nouveau composant "appareil"

2) ajouter deux variables appareilName et appareilStatus dans le fichier type script

3) afficher le contenue des variables dans le template du composant concerner.(en utilisant les
methodes)

2- Property binding
La liaison par propriété ou "property binding" est une autre façon de créer de la communication
dynamique entre votre TypeScript et votre template : plutôt qu'afficher simplement le contenu
d'une variable, vous pouvez modifier dynamiquement les propriétés d'un élément du DOM en
fonction de données dans votre TypeScript.

Exemple2

Pour votre application des appareils électriques, imaginez que si l'utilisateur est authentifié, on lui
laisse la possibilité d'allumer tous les appareils de la maison.

1) Puisque l'authentification est une valeur globale, ajoutez une variable "isAuth"

boolean dans AppComponent , votre component de base.

2) ajouter un bouton dans le composant principale

3) si l'authentification de l'utilisateur est fausse(invalide) alors le bouton est désactivé.

4)modifier le script de tel façon après un certain temps en seconde le bouton devient actif en
changent l'etat de la variable " isAuth"

3- Event binding
Avec le string interpolation et le property binding, vous savez communiquer depuis votre code
TypeScript vers le template HTML. le Event binding réagit dans votre code TypeScript aux
événements venant du template HTML.

Exemple3

le bouton ajouter sur votre template dans l'exemple2 s'active au bout de 4 secondes. Vous allez
maintenant lui ajouter une fonctionnalité liée à l'événement "click" (déclenché quand l'utilisateur
clique dessus).

4- Propriétés personnalisées

Il est possible de créer des propriétés personnalisées dans un component afin de pouvoir lui
transmettre des données depuis l'extérieur. Pour ce faire, il faut utiliser le décorateur
@Input().

Exemple4

chaque instance d' AppareilComponent ait un nom différent qu'on puisse régler depuis
l'extérieur du code.
1) importer Input depuis @angular/core
2) modifier la déclaration de la variable appareilName en utilisant le décodeur @Input().
3) creer les variables dans le composant principales ensuite lier ces variables au composant
appareil

correctionExemple1
correctionExemple2
correctionExemple3
correction exemple4
1MP IDM
Responsable:Olfa Jabri
FORMULAIRE
Institut Supérieur de
Gabes

Dans Angular on peut distinguer deux types de création des formulaires.

Template-Driven Forms : souvent est la méthode la plus utilisée pour la création et la gestion
des formulaire.

Reactive Forms: C’est la moins utilisées mais la plus façonnable et flexible.

A- Template-Driven Forms
On a un formulaire HTML et dans le background, Angular utilise sa propre collection “Form” qui
regroupe les valeurs des inputs dans le formulaire.

Cette approche se base essentiellement sur deux directives “ngModel” et “ngForm”.

 “ngForm”
Elle est utilisée dans la balise HTML <form ngForm=“...”></form> pour exporter les valeurs saisies
et les états “ngForm” des validateurs vers la partie background.

 “ngModel”
Cette directive est utilisé à l'intérieur de la balise HTML <input ngModel=“”></input> .Elle est
utilisées pour exposer la valeur de cet input ou même autre control. Donc son rôle est
d’enregistrer ce champ en utilisant l’attribut “name”. “NgModel” permet aussi de définir comment
ce champ est exposé (OneWay, TwoWay).

il faut ajouter le module 'FormsModule' dans 'app.module.ts'

1) créer un nouveau dossier 'formulaire'

2) ajouter le bootstrap

2) créer un composant 'ajout-apparreil'


3) créer le formulaire suivant:

4)ajouter le directive ngmodel pour récupéré le contenue des inputs

<input type="text" id="name" class="form-control" name="name" ngModel>

<select id="status" class="form-control" name="status" ngModel >

5) pour préparer la gestion de la soumission de ce formulaire, déclarer le bouton de type submit ,


et ajouter le code suivant dans la balise <form> :

<form (ngSubmit)="onSubmit(f)" #f="ngForm">


<button class="btn btn-primary" type="submit">Enregistrer</button>

6) dans le fichier type script 'login-form.component.ts', créer la méthode onSubmit()afin de


recevoir les informations venant du formulaire.
import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.scss']
})
export class LoginFormComponent implements OnInit {
constructor() { }
ngOnInit(): void { }
onSubmit(form: NgForm) {
console.log(form.value);
}
}
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>

<div class="form-group">
<label for="name">
Nom de l'appareil
</label>
<input type="text" id="name" class="form-control" name="name" ngMode
l>
</div>
<div class="form-group">
<label for="status">
État de l'appareil
</label>
<select id="status" class="form-control" name="status" ngModel>
<option value="allumé">Allumé</option>
<option value="éteint">Éteint</option>
</select>
</div>
<button class="btn btn-primary" type="submit">Enregistrer</button>

</form>
</div>
</div>

exemple1
exemple 2

remarque :
exemple 3

Validez les données


Le champ est obligatoire, mais le formulaire peut encore être soumis, car vous n'avez pas encore intégré
l'état de validation du formulaire. Pour accomplir cela, vous allez lier la propriété disabled du bouton à
la propriété invalid du formulaire, qui est mise à disposition par Angular :

<button class="btn btn-primary" type="submit" [disabled]="f.invalid">Enregistrer</button>


Vous employez la référence locale f pour avoir accès à l'objet NgForm , et donc à sa propriété
invalid , désactivant le bouton si elle retourne true .
Il serait intéressant de déclarer l'appareil éteint par défaut afin de ne pas laisser ce champ vide. Pour déclarer
une réponse par défaut, vous allez créer une variable TypeScript et la lier à la propriété ngModel du
contrôle :
export class EditAppareilComponent implements OnInit {

defaultOnOff = 'éteint';

constructor() { }

<select id="status" class="form-control" name="status" [ngModel]="defaultOnOff">


<option value="allumé">Allumé</option>
<option value="éteint">Éteint</option>
</select>

Ainsi, le formulaire ne pourra être soumis que si le champ "Nom de l'appareil" n'est pas vide, et l'option
choisie par défaut empêche le deuxième champ d'être vide également.
Il ne reste plus qu'à exploiter ces données et en créer un nouvel appareil !

Exploitez les données


Dans la méthode onSubmit() , vous allez récupérer les données et les attribuer à deux constantes pour
les envoyer à AppareilService :

onSubmit(form: NgForm) {

const name = form.value['name'];

const status = form.value['status'];

}
Puisque vous savez que le formulaire comportera forcément un champ name et un champ status , vous
savez que vous pouvez utiliser cette syntaxe sans problème.
Créez maintenant la méthode dans AppareilService qui générera le nouvel appareil :

addAppareil(name: string, status: string) {

const appareilObject = {

id: 0,

name: '',

status: ''

};

appareilObject.name = name;

appareilObject.status = status;

appareilObject.id = this.appareils[(this.appareils.length - 1)].id + 1;

this.appareils.push(appareilObject);

this.emitAppareilSubject();

}
Cette méthode crée un objet du bon format, et attribue le nom et le statut qui lui sont passés comme
arguments. La ligne pour l'id prend l'id du dernier élément actuel de l'array et ajoute 1. Ensuite, l'objet
complété est ajouté à l'array et le Subject est déclenché pour tout garder à jour.
Il ne reste plus qu'à intégrer cette fonction dans EditAppareilComponent . Il serait intéressant qu'une
fois l'appareil créé, l'utilisateur soit redirigé vers la liste des appareils. N'o

ubliez pas d'importer et d'injecter le router pour cela, ainsi qu' AppareilService :

1MP IDM
Responsable:Olfa Jabri
Routage
Institut Supérieur de
Gabes
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 de tout contexte Javascript et un manque de fluidité de l'application.

Dans un framework front-end résolument Javascript comme Angular, il n'est pas souhaitable
de perdre tout son contexte à chaque changement de page. Angular a donc besoin d'un système
de routage pour permettre la navigation à travers différentes pages de votre application.

Pour réaliser ce routage, Angular propose le module RouterModule disponible dans la librairie
@angular/router.

notre Tp est de concevoir la page ci-dessous en utilisant le concept du routing

1) créer un nouveau dossier avec l'option -routage

ng new p-route --routing

Angular-CLI nous propose le module applicatif AppRoutingModule.ts permettant d'ajouter la

fonctionnalité de routage à notre application.

2) créer deux composant pour les "employee-list" et les "departement-list"'


3) ajouter le path et le composant dans app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PremierCComponent } from './premier-c/premier-c.component';
const routes: Routes = [{path:"employee",component:employeelistComponent},
{path:"departement",component:departementlist}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]})
export class AppRoutingModule { }

question 3

question4 app-routing.module.ts

question 5 app.module.ts
routingcomponents

question 6 app.component.html
<div style="text-align: center;">
<h1>routing et navigation</h1>
</div>
<router-outlet></router-outlet>
question 7

You might also like