Angular

ng new testExamen: creation d’un projet

ng serve : run un projet

Pour ajouter bootstrap

F style.css
@import "~bootstrap/dist/css/bootstrap.css";

npm install

créer un composant

ng g c register-user --skip--tests

1. statique : (temchi ll app.composant.html w

thotou bech yothor )
<app-app-header></app-app-header>

2. footer: (temchi ll app.composant.html w

wthot balise )
<p> Copyrights</p>

3. dynamique: (temchi ll
app.composant.html w thotou bech
yothor )
app.composnat.hmt bech twali haka
<app-header></app-header>
<!-- dynamique-->
<router-outlet></router-outlet>
<hr>
<p> Copyrights</p>
 donc f app-rootingModule nzid
const routes: Routes = [
{path:'home', component:ListPorductComponent},
{path:'addProduct', component:FormProductComponent},
{path:'**', component:NotFoundComponent},
];

el path eli ena hatitou f html w esm el composant eli

nheb n3ayetlou

el composant mta3 notFound

{path:'**', component:NotFoundComponent},

NavBar (header)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="">Navbar</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="/home">Home</a>
</li>
<li class="nav-item">
 <a class="nav-link" href="/addProduct">Add product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/user">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/addUser">Add User</a>
</li>
</ul>
</div>
</div>
</nav>

Model
tsconfig.js line 6
"strictPropertyInitialization": false,

fih les class .ts

juste déclaré class taht el dossier app/model ** .ts
export class Product{
id : number ;
title : string ;
price : number ;
quantity : number ;
like : number ;
picture : string ;
}

Pour affichage d’une liste :

el khedma mta les méthode tkoun f .ts mta3 composant eli bech
tekhdem bih
w madem hachtek b liste tji doub matheb donc thot el liste f méthode
onInit()
fi .ts
import { Produit } from 'src/app/model/Product' ;

public list : Produit[] ;

 ngOnInit():void {
this.list = [
{
id : 12 ,
title : 't-shirt' ,
quantity : 10 ,
like : 2 ,
price : '120' ,
picture : ''
}
]
}

w .html fiha khedma

<tbody *ngFor="let product of list" >

<td><img src="{{product.picture}}"></td>
<td>{{product.title}}</td>
<td>{{product.price}}</td>
<td>{{product.quantity}}</td>
<td>
<button class="btn btn-sm btn-primary"
(click)="incremntlike(product)" >like {{product.like}}
</button>
</td>
<td>
<button class="btn btn-sm btn-warning" [hidden] =
"product.quantity==0" (click)="inciremntQuantite(product)">
buy product
</button>
<p *ngIf="product.quantity==0"> out of stock</p>
<button class="btn btn-sm btn-danger" >
delete
</button>
</td>

</tbody>

1. les méthode f .html declarihom

w .ts tekhdemhom
inciremntQuantite(product:Product) : void{
let i = this.list.indexOf(product) ;
if(i!=-1){
this.list[i].quantity-- ;
}
}

2. les conditions

1 ki tebda condition f west el button wala haja kima hidden

[hidden] = "product.quantity==0"

2 ki tebda affichage mta3 ligne waahadha

<p *ngIf="product.quantity==0"> out of stock</p>

Recherche
1. declare une varriable bel champ eli bech tamel bih
recherche f .ts
a. public priceMax : any;

2. tzid el formulaire hetha

<form>
<div class="form-group">
<label> Search by Price</label> <br>
<input type="text" name="input" [(ngModel)]="priceMax"
class="form-group">
</div>
</form>

3. tzid el <tr> hethi f tboody

<tr *ngIf="product.price<priceMax || priceMax==null || priceMax==''">

 ADD
conditions ala button kemel
<form #f="ngForm">
<div class="form-group">
<label> Title</label>
<input type="text" name="title" [(ngModel)]="product.title"
class="form-control" required minlength="3" >
<br>

<label> Price</label>
<input type="number" name="price" [(ngModel)]="product.price"
class="form-control" required>
<br>

<label> Picture</label>
<input type="text" name="Picture" [(ngModel)]="product.picture"
class="form-control" required>
<br>

<label> Quantity</label>
<input type="number" name="Quantity"
[(ngModel)]="product.quantity" class="form-control" required>
<br>

</div>
<button class="btn btn-success" [disabled]="f.invalid"
(click)="save()">save</button>
</form>

zedna
.html
#f="ngForm"
[(ngModel)]="product.title"
ala kol input

[disabled]="f.invalid"

hethi ll button
.ts
public product : Product ;

constructor() {
this.product = new Product() ;
}

hethi ya f constructeur ou onInit()

condition ala input

<input type="number" name="price" [(ngModel)]="product.price"
class="form-control" #p="ngModel" required>
<br>
<div class="alert alert-danger" *ngIf="p.invalid && p.touched">
<div> This filed is required</div>
</div>

Service without database

bel step hethi juste ki bech najouti w list ikoun nafs el list
(eli amlenelou add bel formulaire tzed f list )
maghir database
1. sna3a service mte3na
ng g s services/AnnoncesService --skip--test
2. hatina fih list eli hachetna biha
list : Product[] = [
{
id : 12 ,
title : 't-shirt' ,
quantity : 10 ,
like : 2 ,
price : 120 ,
picture : ''
},
 {
id : 12 ,
title : 't-shirt' ,
quantity : 10 ,
like : 2 ,
price : 10 ,
picture : ''
},
{
id : 12 ,
title : 't-shirt' ,
quantity : 10 ,
like : 2 ,
price : 10 ,
picture : ''
}
]

3. mchina ll list.ts w badelna f onInit() w constructeur

constructor( private productService :ProductService) { }

public list : Product[] ;

ngOnInit(): void {
this.list=this.productService.list;

4. mchina ll add.ts w badelna f onInit() w constructeur

constructor(private productService : ProductService, private route :
Router) {
}
save(): void {
this.product.like=0;
this.productService.list.push(this.product)
this.route.navigate(['/Product'])
}
ngOnInit(): void {
this.product = new Product() ;
}
 Service with database

npm install -g json-server

sna3na el fichier hetha db.json
hna win bech twali thot el data mte3ek
{
"products": [
{
"id": 12,
"title": "t-shirt",
"quantity": 10,
"like": 2,
"price": 10,
"picture":
"https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F49%2F5
6%2F49560dfa45732ed844e8e4742afdca248ee60f9f.jpg%5D%2Corigin%5Bdam%5D%2
Ccategory%5Bmen_tshirtstanks_shortsleeve%5D%2Ctype%5BLOOKBOOK%5D%2Cres%
5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]"
},
{
"title": "t-aa",
"quantity": 10,
"like": 2,
"price": 10,
"picture":
"https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F49%2F5
6%2F49560dfa45732ed844e8e4742afdca248ee60f9f.jpg%5D%2Corigin%5Bdam%5D%2
Ccategory%5Bmen_tshirtstanks_shortsleeve%5D%2Ctype%5BLOOKBOOK%5D%2Cres%
5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]",
"id": 13
}
]
}

json-server --watch db.json

http://localhost:3000/products el path eli testi bih
 zedna el path f envi.ts

url : "http://localhost:3000/"
constructor(private http : HttpClient) { }
getAllProducts(){
return this.http.get<Product[]>(this.url)
}
addProduct(p:Product){
return this.http.post(this.url , p) ;
}
updateProduct(){

deleteProduct(id : number){
return this.http.delete(this.url+id) ;
}

REMARQUE :
ki tebda condition ala input tekhdem b ngModel

ki tebda condition ala formulaire tekhdem b ngform

ll devoir :
1. t7ather project fih css
2. tzid faza hethi mta model
"strictPropertyInitialization": false,
3. tzid service b heki ùta3 cmd … json
4. triguel module.ts
5. tkamel les methode mta3 service
6. fazet el button f projet mta3 revisionf
7. update nada