Bonsoir monsieur ,

Je voulais exprimer mes remerciements pour la confiance que vous m'avez accordée
mais malheureusement je ne pouvais pas assister au stage suite à votre réponse
tardive,
j'ai déjà accepté un autre offre de stage dans une autre société.
Je vous remercie pour votre compréhension et à la prochaine occasion.
Cordialement

un projet open source qui automatise le déploiement d'applications logicielles à

l'intérieur de conteneurs en fournissant une couche
supplémentaire d'abstraction et d'automatisation de la virtualisation au niveau du
système d'exploitation sur Linux

starter pom
spring boot strter data jpa
web
test

@SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan

angular :
Angular est un cadre de conception d'applications et une plate-forme de
développement
permettant de créer des applications d'une seule page efficaces et sophistiquées.

Angular est une plateforme de développement, construite sur

Manuscrit
En tant que plate-forme, Angular comprend :

-Un cadre basé sur des composants pour créer des applications Web évolutives
-Une collection de bibliothèques bien intégrées qui couvrent une grande variété de
fonctionnalités, y compris le routage, la gestion des formulaires, la communication
client-serveur, etc.
-Une suite d'outils de développement pour vous aider à développer, construire,
tester et mettre à jour votre code

<button
type="button"
[disabled]="canClick"
(click)="sayMessage()">
Trigger alert message
</button>
Notez l'utilisation des crochets - cette syntaxe indique que vous liez la propriété
ou l'attribut à une valeur dans la classe du composant.

L' interpolation {{ }}
property binding [ ]

Transmettre des données à un composant enfant :

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Input() product!: Product;

Le générateur a automatiquement ajouté le ProductAlertsComponentau pour le

AppModulerendre disponible pour les autres composants de l'application.
<app-product-alerts
[product]="product">
</app-product-alerts>

Transmettre des evenements à un composant parents :

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Output() notify = new EventEmitter();

<p *ngIf="product && product.price > 700">

<button type="button" (click)="notify.emit()">Notify Me</button>
</p>

onNotify() {
window.alert('You will be notified when the product goes on sale');
}

<app-product-alerts
(notify)="onNotify()">
</app-product-alerts>

Ajout de la navigation : routage

<a
[title]="product.name + ' details'"
[routerLink]="['/products', product.id]">
{{ product.name }}
</a>

Afficher les détails du produit

import { ActivatedRoute } from '@angular/router';

product: Product | undefined;

constructor(private route: ActivatedRoute) { }

ngOnInit() {
// First get the product id from the current route.
const routeParams = this.route.snapshot.paramMap;
const productIdFromRoute = Number(routeParams.get('productId'));

// Find the product that correspond with the id provided in route.

this.product = products.find(product => product.id === productIdFromRoute);
}

Un tube est un moyen de transformer des données dans votre modèle HTML. (pipe)

Dans Angular, un service est une instance d'une classe que vous pouvez mettre à la
disposition de n'importe quelle partie
de votre application à l'aide du système d'injection de dépendances d'Angular .

constructor(
private route: ActivatedRoute,
 private cartService: CartService
)

import { HttpClientModule } from '@angular/common/http';

src/app/app.module.ts :

@NgModule({
imports: [
BrowserModule,
HttpClientModule,
ReactiveFormsModule,
RouterModule.forRoot([
{ path: '', component: ProductListComponent },
{ path: 'products/:productId', component: ProductDetailsComponent },
{ path: 'cart', component: CartComponent },
])
],
declarations: [
AppComponent,
TopBarComponent,
ProductListComponent,
ProductAlertsComponent,
ProductDetailsComponent,
CartComponent,
],
bootstrap: [
AppComponent
]
})
export class AppModule { }

import { HttpClient } from '@angular/common/http';

export class CartService {

items: Product[] = [];

constructor(
private http: HttpClient
) {}
/* . . . */
}

Utiliser des formulaires pour la saisie de l'utilisateur :

import { FormBuilder } from '@angular/forms';

export class CartComponent {

constructor(
private cartService: CartService,
private formBuilder: FormBuilder,
) {}
}

checkoutForm = this.formBuilder.group({
name: '',
address: ''
});
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">

<div>
<label for="name">
Name
</label>
<input id="name" type="text" formControlName="name">
</div>

<div>
<label for="address">
Address
</label>
<input id="address" type="text" formControlName="address">
</div>

<button class="button" type="submit">Purchase</button>

</form>

installation :

Conditions préalables

js html css

node, npm

npm install -g @angular/cli

ng new my-app

life cycle hook

ngOnInit()
ngOnChanges()
ngDoCheck()
ngOnDestroy()

Ajoutez des fonctionnalités supplémentaires à vos modèles grâce à l'utilisation de

directives . Les directives les plus populaires dans Angular sont et .
Utilisez des directives pour effectuer diverses tâches, telles que la modification
dynamique de la structure DOM. Et créez vos propres directives
personnalisées pour créer de superbes expériences utilisateur.*ngIf*ngFor

Injection de dépendance
L'injection de dépendances vous permet de déclarer les dépendances de vos classes
TypeScript sans vous soucier de leur instanciation.
Au lieu de cela, Angular gère l'instanciation pour vous

app router -> call to components -> call to services -> call to http clients
src -> app -> components : .component.css, .component.html, component.spec.ts,
component.ts
-> models
-> services
-> app-routing.module.ts, app.component.css, app.component.html,
app.component.ts, app.module.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'redlean';
}

ng new Angular13Crud => new project

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

ng g class models/tutorial --type=model

Set up App Module :

Open app.module.ts and import FormsModule, HttpClientModule:

app-routing.module.ts :
{ path: 'tutorials', component: TutorialsListComponent },

models/tutorial.model.ts :
export class Tutorial {
id?: any;
title?: string;
description?: string;
published?: boolean;
}

export class TutorialService {

constructor(private http: HttpClient) { }