Angular
ng new testExamen: creation d’un projet
ng serve : run un projet
Pour ajouter bootstrap
F [Link]
@import "~bootstrap/dist/css/[Link]";
npm install
créer un composant
ng g c register-user --skip--tests
1. statique : (temchi ll [Link] w
thotou bech yothor )
<app-app-header></app-app-header>
2. footer: (temchi ll [Link] w
wthot balise )
<p> Copyrights</p>
3. dynamique: (temchi ll
[Link] w thotou bech
yothor )
[Link] 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
[Link] 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 {
[Link] = [
{
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="{{[Link]}}"></td>
<td>{{[Link]}}</td>
<td>{{[Link]}}</td>
<td>{{[Link]}}</td>
<td>
<button class="btn btn-sm btn-primary"
(click)="incremntlike(product)" >like {{[Link]}}
</button>
</td>
<td>
<button class="btn btn-sm btn-warning" [hidden] =
"[Link]==0" (click)="inciremntQuantite(product)">
buy product
</button>
<p *ngIf="[Link]==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 = [Link](product) ;
if(i!=-1){
[Link][i].quantity-- ;
}
}
2. les conditions
1 ki tebda condition f west el button wala haja kima hidden
[hidden] = "[Link]==0"
2 ki tebda affichage mta3 ligne waahadha
<p *ngIf="[Link]==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="[Link]<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)]="[Link]"
class="form-control" required minlength="3" >
<br>
<label> Price</label>
<input type="number" name="price" [(ngModel)]="[Link]"
class="form-control" required>
<br>
<label> Picture</label>
<input type="text" name="Picture" [(ngModel)]="[Link]"
class="form-control" required>
<br>
<label> Quantity</label>
<input type="number" name="Quantity"
[(ngModel)]="[Link]" class="form-control" required>
<br>
</div>
<button class="btn btn-success" [disabled]="[Link]"
(click)="save()">save</button>
</form>
zedna
.html
#f="ngForm"
[(ngModel)]="[Link]"
ala kol input
[disabled]="[Link]"
hethi ll button
.ts
public product : Product ;
constructor() {
[Link] = new Product() ;
}
hethi ya f constructeur ou onInit()
condition ala input
<input type="number" name="price" [(ngModel)]="[Link]"
class="form-control" #p="ngModel" required>
<br>
<div class="alert alert-danger" *ngIf="[Link] && [Link]">
<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 [Link] w badelna f onInit() w constructeur
constructor( private productService :ProductService) { }
public list : Product[] ;
ngOnInit(): void {
[Link]=[Link];
4. mchina ll [Link] w badelna f onInit() w constructeur
constructor(private productService : ProductService, private route :
Router) {
}
save(): void {
[Link]=0;
[Link]([Link])
[Link](['/Product'])
}
ngOnInit(): void {
[Link] = new Product() ;
}
Service with database
npm install -g json-server
sna3na el fichier hetha [Link]
hna win bech twali thot el data mte3ek
{
"products": [
{
"id": 12,
"title": "t-shirt",
"quantity": 10,
"like": 2,
"price": 10,
"picture":
"[Link]
6%[Link]%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":
"[Link]
6%[Link]%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 [Link]
[Link] el path eli testi bih
zedna el path f [Link]
url : "[Link]
constructor(private http : HttpClient) { }
getAllProducts(){
return [Link]<Product[]>([Link])
}
addProduct(p:Product){
return [Link]([Link] , p) ;
}
updateProduct(){
deleteProduct(id : number){
return [Link]([Link]+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 [Link]
5. tkamel les methode mta3 service
6. fazet el button f projet mta3 revisionf
7. update nada
