Plan

1. Introducere
2. Rutare ș i navigare
3. Serviciile
4. Formulare Angular
 Introducere
•FrameworkJavaScript(ouTypeScript)
•Prezentat de Google în 2009
Permițând crearea de aplicații web și mobile
▪ Front-End (întregul set de elemente vizibile ș i accesibile direct pe o aplica ț ie web sau o aplica ț ie
web mobil
▪ Aplicaț ie pe o singură pagină (O SPA este o aplicaț ie care conț ine o singură pagină HTML ([Link]) recuperată de la
server).
•Respectă arhitectura MVVM (Model-View-ViewModel)
▪ Model: reprezentat de obicei printr-o clasă referită de stratul de acces la date (clasă sau interfaț ă
TypeScript).
▪ Vizualizare: conț inutul legat de dispunerea ș i aspectul a ceea ce un utilizator vede pe ecran, primind interacț iunea cu
utilizatorul: clic, introducere, trecere cu mouse-ul...
▪ ViewModel: înlocuitorul controller-ului în arhitectura MVC, conectat la vedere prin legarea de date, reprezentat
în Angular printr-un fiș ier *.[Link].
•Angular utilizează următoarele limbaje:
•HTML pentru viziuni. HTML pentru viziuni.
•CSS pentru stiluri.
•TypeScript pentru scripturi începând cu versiunea 2.
H

4
 Introduction-Historique
•Angular
H
1 (Agular JS) :
▪ Prima versiune de Angular care este cea mai populară.
▪ Ea este bazată pe o arhitectură MVC pe partea clientului. Aplicaț iile Angular 1 sunt scrise în Java
Scenariu.
Angular 2 (Angular) :
▪ Este o rescriere a Angular 1 care este mai performantă, mai bine structurată ș i reprezintă viitorul de
Angular.
▪ Aplicaț iile Angular2 sunt scrise în Type Script, care este compilat ș i tradus în Java Script înainte
de a fi executat de către browserele web.
▪ Angular 2 est basée sur une programmation basée sur les Composants Web (Web Component)
•Angular 4, 5, 6, 7, 8,…: sunt simple actualizări ale Angular 2 cu îmbunătățiri la nivel
performanț e.

5
Arhitectura de bază a unei aplicaț ii Angular

6
 Instalare
• Pentru a instala Angular, trebuie să descărcați și să instalați NodeJS (Ultima versiune stabilă LTS)
•Pentru a instala Angular, executați comanda
npm install–g @angular/cli
•Pentru a instala o versiune bine definită (de exemplu 8)
npm install -g @angular/cli@8
•Pentru a verifica versiunea de Angular instalată, executați comanda
versiunea ng

➢ npm (managerul de pachete node): gestionarul de pachete implicit pentru o aplicaț ie JavaScript.
➢ angular-cli (interfa ț a de linie de comandă): instrument propus de Google pentru a facilita crearea ș i
construirea unei aplicaț ii Angular prin executarea directă a comenzilor. 7
 Comenzi CLI de utilizat frecvent
Comenzi Nevoi

versiunea ng afiș aț i versiunea Angular CLI

ng nou firstApp Crează un proiect angular

ng serve (sau npm start) Executaț i un proiect

ng serve -o lansaț i proiectul ș i deschideț i o fereastră nouă în

navigator
ng g component componentName (ng g c componentName), Creează un component
(ng g c NumeleComponentei - -sari-pentru-teste=true)

ng g service serviceName Crearea unui serviciu

ng g class className Créer une classe

ng g i interfaceName Creează o interfaț ă

8
Structura Proiectului Angular

Dosar al scripturilor testelor unitare

9
Structura Proiectului Angular

Declaraț ii: Acesta este tabloul componentelor.

Ș i un nou component este creat, acesta va fi
importat în primul rând ș i referinț a va fi inclusă
în declaraț ii
Importuri: Este un tabel de module necesare
pentru a fi folosit în aplicaț ie
Furnizori: Acesta va conț ine toate serviciile
creezi
Bootstrap: Acesta include componenta principală
10
aplicaț ia pentru a începe execuț ia
Structura Proiectului Angular
Fiecare componentă se compune în principal din următoarele elemente:

•Șablon HTML : reprezentând perspectiva sa

•O clasă care reprezintă logica sa de afaceri (.ts)

•O foaie de stil CSS

•Un fichier spec sunt teste

Un component poate fi inserat în orice parte HTML a aplicaț iei folosind

selectorul său asociat.

Un component este o clasă care are decoratorul @Component. Acest decorator are
proprietăț ile următoare:

• selector: permet de spécifier le tag (nom de la balise) associé à ce composant.

• templateUrl: permet d’associer un fichier externe HTML contenant la structure de la vue

componentul

• styleUrls: spécifier les feuilles de styles CSS associées à ce composant 11

 DataBinding
•Pentru a insera dinamic datele aplicației în viziunile componentelor, Angular definește tehnici
pentru a asigura legătura datelor. Binding-ul de proprietate: este o altă tehnică de OneWay Binding. Aceasta permite
lega o proprietate a vederii cu o proprietate definită în componentă.
•Legarea datelor = Comunicare
Exemple:

Legarea evenimentelor: în Angular, legarea evenimentelor este folosită pentru a gestiona evenimentele
declanș ate precum clicul de buton, miș carea mouse-ului, etc. Când
evenimentul se produce, el apelează metoda specificată în componentă.
Exemple:
Interpolarea ș irurilor: este o tehnică
de legare OneWay, ea foloseș te
expresia {{ }} pentru a afiș a
datele componentei în vedere.
Exemple:
Legătura bidirecț ională: am văzut că în legătura unidirecț ională, orice modificare în
vue nu a fost reflectată în componentă. Pentru a rezolva această problemă, Angular TwoWay
Legare.
[Link]

[Link]
Observaț ie: trebuie adăugat „FormsModule” în tabloul imports din fiș ierul [Link]

12
 Directivele DOM (Modelul Obiectului Document) este o interfaț ă de
programare care este o reprezentare a HTML-ului unei pagini web ș i
care permite accesul la elementele acestei pagini web ș i le modifică
Directiva sunt instrucțiuni integrate în DOM. cu limbajul JavaScript. Trebuie să vedem DOM-ul ca un copac unde
fiecare element poate avea zero sau mai mulț i copii, care pot avea
însuș i zero sau mai mulț i copii, etc…

•Când Angular citește șablonul și întâlnește o directivă pe care o recunoaște, urmează instrucțiunile corespunzătoare.

•La directivă *ngFor: este foarte utilă în cazul unui tablou și când avem nevoie să repetăm un anumit proces.

Exemple: <ul>
<li *ngFor="let p of produse">{{ [Link] }}</li>
</ul>

•Directiva *ngIf: este utilizată atunci când doriți să afișați sau să eliminați un element în funcție de o condiție. Acceptă un
boolean în parametru. Exact aș a cum suntem obiș nuiț i cu alte limbaje de programare, directiveangularngIfne
permite, de asemenea, să declare un blocelse. Acest bloc este afiș at dacă instrucț iunea definită în blocul principal poate fi falsă.
Exemple :<div *ngIf="x%2 != 0 ;elsesinon"> impar</div>
…
…
pereche 13
 Les directives
•La directiva [ngStyle]Această directivă permite modificarea stilului unui element HTML. Se utilizează
împreună cu legarea proprietăț ii pentru a recupera valori definite în clasă.

<h4 [ngStyle]="{color: getColor()}">{{produits[0].nom}}</h4>

Funcț ia getColor() returnează culoarea titlului h4. Această metodă este dezvoltată în fiș ierul .ts.

•La directive [ngClass]: permite atribuirea de noi clase unui elementHTML. Se utilizează împreună
cu binding-ul de proprietate pentru a recupera valorile definite în clasă sau în foaia de stil.
Exemple:
Se definesc două clase roș ie ș i albastră în [Link]
.rouge {
color: red;
}
.bleu {
color: blue;
}
Pentru a asocia clasa roș ie cu eticheta <p>
<p[ngClass]="{'rouge':true}">
{{ nom }}
</p>
De asemenea, putem apela o metodă în directiva ngClass 14
 Pipelines

Pipelile sunt filtre utilizabile direct din vizualizare pentru a transforma valorile în timpul 'legării'.

Există mai multe pipe native în Angular, cum ar fi DecimalPipe, UpperCasePipe,

CurrencyPipe, etc.

•Exemple:{{nom|uppercase}},{{prix|currency:'TND':'symbol':'2.2-2'}}

Veți găsi în acest link pipe-urile nativă ale Angular: [Link]

15
 Introducere în Rutare
În general, nu căutăm să afișăm toate componentele în același timp în bloc.
principal.

Definim mai degrabă un drum pentru fiecare componentă.

•Un sistem de routare permite asocierea unui drum (url-path) la un tratament particular.

•Este vorba despre instrucțiunile de afișare care trebuie urmate pentru fiecare URL, adică care(s)

component(s) il faut afficher à quel(s) endroit(s) pour un URL donné.

Routerul angular permite navigarea de la o vedere la alta atunci când utilizatorii execută
sarcini de aplicare.

17
 Modulul AppRouting

•Angular-CLI ne propune modulul aplicativ AppRoutingModule care permite adăugarea

funcț ionalitate de rutare într-o aplicaț ie :

✓Routes: est un Array contenant la déclaration des Routes

✓RouterModule: este un modul care reuneș te directivele ș i serviciile configurabile
permiț ând îndeplinirea funcț ionalităț ii de rutare.

18
 Crearea unui sistem de rutare
La constantărutele reprezintă căile care trebuie declarate într-un proiect Angular:
➢Chaque objet {path: « url du composant »,component: « la class du composant concerné »}

•Integrăm rutele în aplicația noastră înApp-routingModuleà travers le

RouterModule ș i metoda forRoot

19
 Aplicaț ie de rutare
•Pentru a aplica un rutaj într-o vizualizare (Template HTML), avem nevoie de următoarele directive:
▪ routerLink: este o directivă care ia ca valoare calea (path) indicată în tabela rute

▪ Router-outlet este o directivă care permite specificarea locului unde va fi încărcată vederea. Sintaxa sa este
<router-outlet></router-outlet>

•Exemple:Când utilizatorul tastează[Link] routerul caută ș i încarcă componenta

ComponentaAcasă afi ș ează într-un element <router-outlet></router-outlet>. Acest element este destinat să se
găsiț i în vederea componentei rădăcină.

20
 Redirecț ionare
•redirectTo:est une propriété ajouté dans l’objet du route pour rediriger une route

•Această proprietate permite indicarea către ce cale trebuie redirecționat path-ul.

Fără partea pathMatch: 'full' (pentru

căi goale), toate drumurile declarate
după această ultimă nu vor fi
accesibile.
•pathMatch: 'full' nu ne lasă deci să trecem decât
cererile al căror drum corespunde
exactamente pe drumul gol
•La a doua valoare posibilă pentru
pathMatch est 'prefix'

21
Parametrii rutei

tu

22
 Recuperarea parametrilor
1. Importer ActivatedRoute care ne va permite să recuperăm parametrii rutei.
2. Injecter ActivatedRoute au niveau du composant. Injec ț ie de dependen ț econstă
a crea dinamic (a injecta)
3. Atribuie parametrul unei variabile a componentei dependen ț e între diferitele
obiecte bazându-se pe o
description (fichier de configuration
Atribuirea poate fi făcută în mai multe moduri: ou metadate) sau în mod
programatic
•Metoda 1: un snapshot al URL-ului prin ActivatedRoute Astfel, dependen ț ele între
componentele software nu mai sunt
exprimate în cod într-un mod
static dar determinate
dinamic la execuț ie.

tu

•Metoda 2: Prin Observable: funcția subscribe

23
 Recuperarea parametrilor
•O altă metodă de a recupera date:queryParams
Parametrii de interogare sunt parametrii trimiși printr-o cerere GET.
•Identificat cu ?.

24
 Aplicaț ie de rutare prin componentă
•Pentru a declanșa o rută prin componentă, se folosește obiectul Router și metoda sa navigate.
•Această metodă ia același parametru ca routerLink, și anume un tablou care conține descrierea
de pe drum.
•Pentru a utiliza Route, trebuie să-l importați din @angular/router și să-l injectați în componenta dumneavoastră.

25
 Rute wildcard
Ruta wildcard permite redirecționarea către un component dacă calea indicată
nu există (pagina negasită)

•NB: Trebuie să fiți atenți la localizarea rutei Wildcard

26
 Ce este un serviciu?
•un serviciu este o clasă TypeScript decorată cu @Injectable, care poate conține cod reutilizabil sau date
pe care dorim să o împărtăș im între mai multe componente. (Evitaț i redundanț a)

•Un service poate, așadar:

•Interacționați cu datele (furnizați, ștergeți și modificați)

•Efectuarea tuturor procesărilor de afaceri (calcul, sortare, extragere …)

→Un serviciu este singleton/global

Un serviciu este asociat cu un component (.ts) utilizândinjecț ia de dependenț ă

• Exemple de câteva servicii Angular utilizate în capitolele anterioare:ActivatedRoute, Router

•Exemple de alt serviciu angular:HttpClient

În general, acesta este serviciul care interacționează cu partea din spate a aplicației, trimițând cereri.
HTTP.
28
 Crearea unui serviciu
: generează serviciu nume-serviciu //
•Pentru a crea un serviciu ng ng g s nume_serviciu

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

@Injectable({

providedIn:'root'

})

exportclassTestService{

constructor() { }

•Din versiunea 6 a Angular, nu mai este nevoie să declarăm serviciile în secțiunea providers din [Link]

•ExpresiaprovidedIn: 'root' valorează declaraț ie

29
 Injectarea dependenț elor

Când Angular creează un component, mai întâi cere unui injector serviciile necesare.

• Un injector menț ine un container de instanț e de servicii pe care l-a creat anterior.

• Dacă o instanț ă de serviciu solicitată nu se află în container, injectorul o creează ș i

îl adaugă în container înainte de a returna serviciul lui Angular.

• Când toate serviciile solicitate au fost rezolvate ș i returnate, Angular poate apela
constructorul componentului cu aceste servicii ca argumete.

30
 Exemple de interacț iune component-serviciu
import{ Injectable }from'@angular/core';
import{ Produs }from'../model/produs';
export classDetaliuProdusComponentimplementOnInit {
@Injectabil({ produit:Produit
providedIn:'root'
}) constructor(privatear: ActivatedRoute,
export classTestService { privaterouter:Router,
privateproducts:Array<Produit>=newArray<Produit>(); privateservice:TestService) { }

ngOnInit() {
constructor() { letid:number
[Link]({id :1,nom :"pc",prix :1200,quantite :20, [Link]((params)=>{
urlImg :"./assets/images/pc [Link]"}); id=+[Link]('id')
[Link]({id :2,nom :"clavier",prix :10,quantite :10, [Link](" " + id + " ");
[Link]=[Link](id)
urlImg :"./assets/images/[Link]"});
});
[Link]({id :3,nom :"souris",prix :5,quantite :0,
urlImg :"./assets/images/[Link]"}); }
}
publicgetProducts(){
returnaț i [Link];
}
publicgetProductById(id)
{
return [Link](x => [Link] == id);
}
} 31
 Simularea părț ii backend (json-server)
•Instrumentul softwarejson-server este o soluț ie simplă pentru a simula un API REST în timpul dezvoltării aplicaț iei dumneavoastră.

•Pentru a instala json-server: npm install -save json-server

Crearea unui fișier json ([Link])

{"produits":[

{"id":1,

"nom":"pc portable",

"prix":1500,

"quantite":20,

"nomImg":"pc portable"

},…]

•Json-server va folosi această "bază de date" pentru a stoca datele aplicației

•Pentru a porni serverul:json-server --watch src/[Link]

32
 Poș taș
Postman este un software care vă va permite să apelați/testați o API.

Postman servește la executarea apelurilor HTTP direct dintr-o interfață grafică.

•Veți putea pur și simplu să alegeți URL-ul, metoda HTTP (cel mai des GET, POST, PUT, PATCH și DELETE),
header-urile, parametrii de interogare ș i, în unele cazuri, corpul cererii.

•Metode http:
▪ GET: cererile GET sunt cele efectuate de un browser atunci când introduceț i o URL în bara de
navigaț ie. Ele au scopul de a căuta o pagină sau date.
▪ POST: cererile POST au scopul de a trimite informaț ii, conț inută în corpul cererii, către server.
▪ PUT: cererile PUT vor suprascrie o resursă cu date noi, de asemenea prezente în corpul cererii.
cerere. Este utilizată pentru a actualiza datele cu condiț ia să fim capabili să furnizăm resursa
zi în întregime.
▪ PATCH: cererile PATCH sunt utilizate ș i pentru a actualiza o resursă, dar modificând doar elementul
trimis în corpul cererii.
▪ DELETE: aș a cum sugerează numele, cererea DELETE serveș te la ș tergerea unei resurse 33
Exemple

34
 Modul HTTP

Modulul care permite consumul de API extern se numește modulHTTP.

Un serviciu Http ne va ajuta să obținem date externe, să postăm, etc.

•Trebuie să adăugăm modulul HttpClientModule în tabelul „imports” din fișier

« [Link] » pentru a utiliza serviciul http. (import { HttpClientModule}
de la '@angular/common/http‘;)

Pentru a utiliza modulul HTTP, acesta trebuie injectat în componenta sau serviciul din
pe care doriț i să-l utilizaț i: constructor(private http:HttpClient)

35
 Exemple de serviciu
import{ Injectable }from'@angular/core';
importă{HttpClient}de la'@angular/commune/http'
import{ Observable }from'rxjs';
import{ Produs }from'../model/produs';

@Injectable({
providedIn:'root'
})
export class ProdusServiciu {
Pentru a efectua o cerere, modulul httpClient ne oferă o
host="[Link] metodăget(). Această metodă returnează un Observale.
constructor(private client: HttpClient) { }

publicgetProducts():Observable<Produit[]>{

return [Link]<Produs[]>([Link]);
}
publicgetProductById(id):Observable<Produit>
{
URL-ul endpoint
return [Link]<Produs>([Link]+id);
} (backend)
publicaddProduct(produit:Produit):Observable<void>
{
returnează [Link]<void>([Link],produs);
}
}

36
 Utilizarea unui serviciu
[Link]
products:Produit[];
constructor(privateservice:ServiciuProdus) { }
ngOnInit() {
[Link]().subscribe(data=>{
[Link]=data;
……});
}
[Link]
product:Produit
constructor(serviciuPrivat: ProduitService, rutaActivata: ActivatedRoute) {
}
ngOnInit() {
letid:number
[Link]((params)=>{
id=+[Link]('id')
[Link](id).subscribe(data=>{
[Link]=data;
})
}); 37
 Introducere
Angular propune două tipuri de formulare:
Formulare conduse de template (pilotate de template): Forme reactive :
- Bazat pe ReactiveFormsModule
- Utilizând FormsModule
- robust,
- Basé sur les directives (ngmodel) - Evolutiv,
- Conceput pentru aplica ț iile care necesită
- Facile
controllable speciale.
- Recomandat pentru formularele simple • Grup de formulare

Constructor de formulare
 Template Driven Forms - ngModel
•Importați [Link]

Angular detectează automat un obiectformează cu ajutorul etichetei FORM. Totuș i, el nu

nu detectează niciunul dintre elemente (input-uri).
<form></form>

•Specificați lui Angular care sunt elementele de gestionat:

•Pentru fiecare element, adăugați directiva angularngModel. Acest lucru permite legarea valorii
controalele HTML (intrare, selecț ie, zonă de text) ale datelor aplicaț iei.
•Atenție, dacă nu adăugați ngModel la câmpul sau inputul dvs., acest câmp nu va fi
plus luat în considerare.

Identifică elementul cu un numenume) care permite detectarea ș i identificarea acestuia în

componentă.

<inputtype="text"ngModel name="nom"
 Formulare bazate pe template - ngForm

Directiva NgForm completează elementul form cu funcț ionalităț i suplimentare. Aceasta conț ine controalele pe care le aveț i
create pentru elementele cu o direcț ie ngModel ș i un atribut name ș i monitorizează proprietăț ile lor, inclusiv valabilitatea acestora.

•Atribuirea valoriingFormă o referinț ă locală (#nomFormulaire) ș i o treceț i la metoda dumneavoastră. Aceasta

metoda va fi invocată atunci când trimitem ((ngSubmit)) le formulaire.

<form(ngSubmit)=" onsubmit(f)"#f=ngForm></form>

•Cu ngModel, valoarea atributului name va deveni o cheie a obiectului de referință ngFormfque noi
am creat.

De exemplu, [Link] valoarea de control pentru identificatorul numelui.

import{ NgForm }from'@angular/forms’;

…
onsubmit(f:NgForm)
{[Link]([Link]); …}
 Formulare bazate pe template - Validare
Pentru a valida proprietățile diferitelor controale, Angular folosește atributuri și directive.

•Pe lângă atributcerut, atribuie directivangModella o variabilă locală (ex: #myVar=ngModel").

<form(ngSubmit)="onsubmit(f)"#f=ngForm>
…
<input type="text">
ngModel
name="nom"
necesar
#nom="ngModel"
>
 Formulare bazate pe ș ablon - Validare
•Utilizarea dengModel într-un formular îți indică, de exemplu, dacă utilizatorul a atins
control ș i dacă valoarea este invalidă.

<form(ngSubmit)="onsubmit(f)"#f=ngForm>
…
<input type="text">
ngModel
name="nom"
necesar
#nom="ngModel"
>
<spanstyle=color:red*ngIf="![Link] && [Link]">Entrez le nom</span>
 Template Driven Forms - Validation
ProprietateavaliddengFormpermite verificarea dacă formularul este valid sau nu, bazându-se pe
validatori pe care îi conț ine.

<form(ngSubmit)="onsubmit(f)"#f=ngForm>
…
<inputtype="text"
ngModel
name="nom"
necesar
#nom="ngModel"
>
<span style=color:red*ngIf="![Link] && [Link]">Introduceț i numele</span>
…
<button[disabled]=![Link]="btn btn-success">Adaugă</button>

Aici,[Link] false decât dacă toate elementele formularului trec controalele lor
validările respective. Butonul de trimitere va fi dezactivat până când formularul va fi valid.