CFITECH
Web 2025-2026 / angular
ng new angularTest-app
// créer un nouveau dossier angular
ng g c header
// générer un component ex. Header (edited)
<h1>{{titre}}</h1>
<div class="x"><img [src]="imageUrl" alt=""></div>
<a [href]="linkSite" target="_blank">{{linkText}}</a>
<button (click)="changeTitre()" [disabled]="isDisabled">Change</button>
<input type="checkbox" [checked]="isChecked">import { Component } from '@angular/core';
@Component({
selector: 'app-header',
imports: [],
templateUrl: './header.html',
styleUrl: './header.css',
})
export class Header {
titre="cfitech";
changeTitre(){
this.titre="KOEKELTECH";
}
imageUrl="https://png.pngtree.com/png-clipart/20191027/ourmid/pngtree-view-icon-png-image_1869829.jpg "
linkSite="https://cfitech.be/"
linkText="site CFITECH"
isDisabled=false;
isChecked=true;
}
nom3 = 'Ali';
changerNom() {
this.nom3 = 'Sara';
}
}<button (click)="changerNom()" >Changer Nom</button>
<p>Nom: {{nom3}} </p>
2 <label for="">Nom:</label>
<input type="text" placeholder="Nom" [(ngModel)]="service.nom" />
<label for="">Prenom:</label>
<input type="text" placeholder="Prenom" [(ngModel)]="service.prenom" />
<label for="">Email:</label>
<input type="email" placeholder="Nom" [(ngModel)]="service.email" />
<label for="">Formation:</label>
<input type="text" placeholder="Formation" [(ngModel)]="service.formation" /> (edited)<p>Nom: {{service.nom}}</p>
<p>Premom: {{service.prenom}}</p>
<p>Email: {{service.email}}</p>
<p>Formation: {{service.formation}}</p> (edited)header.css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: #1e293b;
}
.logo {
color: white;
font-size: 24px;
font-weight: bold;
}
.menu {
display: flex;
gap: 20px;
}
.menu a {
color: white;
text-decoration: none;
}
button {
padding: 10px 15px;
cursor: pointer;
}. app.css
.light {
background-color: white;
color: black;
min-height: 100vh;
transition: 0.3s;
}
.dark {
background-color: #121212;
color: white;
min-height: 100vh;
transition: 0.3s;
}
npm install -g json-server{
"formations": [
{
"id": "1",
"title": "Angular",
"body": "Formation Angular niveau débutant"
},
{
"id": "2",
"title": "React",
"body": "Formation React avec hooks"
},
{
"id": "3",
"title": "Vue.js",
"body": "Formation Vue.js 3 et Composition API"
}
]
}json-server --watch db.json --port 3000 (edited)import { Component, inject, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Formations } from './services/formations';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
imports: [RouterOutlet, FormsModule],
templateUrl: './app.html',
styleUrl: './app.css',
})
export class App {
service = inject(Formations);
listeFormations = signal<any[]>([]);
error = '';
chargerFormations() {
this.service.getFormations().subscribe({
next: (data) => this.listeFormations.set(data),
error: (err) => (this.error = 'Erreur serveur'),
});
}
ngOnInit() {
this.chargerFormations();
}
titre = '';
description = '';
ajouterFormations() {
const formation = {title: this.titre, body:this.description};
this.service.addFormations(formation).subscribe({
next: data => console.log("Formation ajouter"),
error: err => console.log("Erreur")
});
}
}import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { form } from '@angular/forms/signals';
@Injectable({
providedIn: 'root',
})
export class Formations {
private http = inject(HttpClient);
private apiUrl = 'http://localhost:3000/formations';
getFormations() {
return this.http.get<any[]>(this.apiUrl);
}
addFormations(formation: any) {
return this.http.post(this.apiUrl, formation);
}
}@if (error) {
<p>{{ error }}</p>
} @else {
@for (formation of listeFormations(); track formation.id) {
<h1>{{ formation.title }}</h1>
<p>{{ formation.body }}</p>
}
}
<input type="text" placeholder="Introduire titre" [(ngModel)]="titre">
<input type="text" placeholder="Introduire description" [(ngModel)]="description">
<button (click)="ajouterFormations()" >Ajouter</button>#[ORM\Table(name: "users")]symfony console doctrine:migrations:diffsymfony console doctrine:migrations:execute version (edited)import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { Product } from '../models/product';
import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class ProductService {
private http = inject(HttpClient);
private products: Product[] = [
{ id: 1, name: 'iPhone 16', price: 999, category: 'Téléphone' },
{ id: 2, name: 'Samsung Galaxy S25', price: 899, category: 'Téléphone' },
{ id: 3, name: 'MacBook Air', price: 1299, category: 'Ordinateur' },
{ id: 4, name: 'Dell XPS', price: 1199, category: 'Ordinateur' },
{ id: 5, name: 'iPad Air', price: 699, category: 'Tablette' },
{ id: 6, name: 'Galaxy Tab', price: 599, category: 'Tablette' },
];
getProducts(): Observable<Product[]> {
return of(this.products);
}
searchProducts(search: string): Observable<Product[]> {
const result = this.products.filter((product) =>
product.name.toLowerCase().includes(search.toLowerCase()),
);
return of(result);
}
}import { Component, inject, signal, Signal } from '@angular/core';
import { ProductService } from '../../services/product.service';
import { Product } from '../../models/product';
@Component({
selector: 'app-produits',
imports: [],
templateUrl: './produits.html',
styleUrl: './produits.css',
})
export class Produits {
private productService = inject(ProductService);
products = signal<Product[]>([]);
loading = signal(true);
ngOnInit() {
this.productService.getProducts().subscribe((products) => {
next: {
this.products.set(products);
this.loading.set(false);
}
error: {
console.log(`Erreur`);
this.loading.set(false);
}
});
}
}<h1>Mes produits</h1>
@if (loading()) {
<p>Chargement</p>
} @else {
@if (products().length === 0) {
<p>Aucun produit trouver</p>
} @else {
@for (product of products(); track product.id) {
<div>
<p>{{ product.name }}</p>
<p>-{{ product.price }}</p>
</div>
}
}
}