menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list

Angular

  1. 1.Introduction,istallation
  2. 2.Structure du projet
TypeScript
@Components
@Directives

Exercices

Routing

Exercices

Components

15.CRUD:Nodejs,ExpressJs,Mysql

Utils

To be continued





Angular: HttpClient API

folder Projet: angularApp
permet d'exécuter les méthodes (HTTP POST, GET, PUT, and DELETE)
Afin d'exécuter les Requests http on a besoin d'un serveur backEnd on peut créer un serveur de test à l'aide de json-server
npm install -g json-server
npm install json-server
json-server --watch db.json --port 3004
Le fichier db.json est Créer contenant:
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}
Le serveur backEnd est lancer sur :
Resources
http://localhost:3004/posts
http://localhost:3004/comments
http://localhost:3004/profile

Tester l'api

On peut executer les requests http sur l'api comme:
Get :http://localhost:3004/posts =>Afficher la liste des posts
Get:http://localhost:3004/posts/1 =>Afficher les détails d'un post passé en pramètre
Post:http://localhost:3004/posts =>Ajouter un nouveau post
Delete:http://localhost:3004/posts/1=>Suprimer un post
Put:http://localhost:3004/posts/1=>Modifier un post
GET:http://localhost:3004/posts
POST:http://localhost:3004/posts

1.Créer des components

Afin de gérer les posts ,ajouter,afficher,modifier,supprimer on doit créer les components correpondants:
ng generate component addpost
ng generate component listpost
ng generate component detailspost

1.Créer un services qui permet de comsomer l'api

ng g s mesServices/postServices
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class PostServicesService {

constructor() { }
}

Ajouter le code suivante:
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';


export class Post {
id?: string;
title?: string;
author?: string;

}

@Injectable({
//le services sera une seule instance dans tout le projet
providedIn: 'root'
})
export class PostServicesService {

api = 'http://localhost:3004';
constructor(private httpClient: HttpClient) {}
httpHeader = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
}),
};
getPosts(): Observable<Post> {
return this.httpClient
.get<Post>(this.api + '/posts');
}
}

listpost.component.ts
import { Component, OnInit } from '@angular/core';
import { PostServicesService } from '../mesServices/post-services.service';

@Component({
selector: 'app-listpost',
templateUrl: './listpost.component.html',
styleUrls: ['./listpost.component.css']
})
export class ListpostComponent implements OnInit {

posts: any = [];
constructor(public postServicesService: PostServicesService) {}
ngOnInit() {
this.getPosts();
}
getPosts() {
return this.postServicesService.getPosts().subscribe((res: {}) => {
this.posts = res;
});
}

}

listpost.component.html
<div class="card text-dark mb-3">
<div class="card-header card bg-warning text-white">List Posts</div>
<div class="card-body">
<table class="table table-striped">
<tr>
<th>id</th>
<th>Title</th>
<th>Author</th>
</tr>
<tr *ngFor="let p of posts; let i=index">
<td>{{p.id}}</td>
<td>{{p.title}}</td>
<td>{{p.author}}</td>
<td><a href="/posts/{{p.id}}">Détails</a></td>
</tr>
</table>
</div>
</div>
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { DetailsComponent } from './details/details.component';
import { ClientsComponent } from './clients/clients.component';
import { UsersComponent } from './users/users.component';
import { ListpostComponent } from './listpost/listpost.component';

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'list',component: ListComponent } ,
{ path: 'clients',component: ClientsComponent } ,
{ path: 'users',component: UsersComponent } ,
{ path: 'listpost',component: ListpostComponent } ,
{ path: 'details/:id', component: DetailsComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Supprimer un post

1.mesServices/post-services.service.js
Ajouter la fonction supprimerPost()
supprimerPost(id: any) {
return this.httpClient
.delete<Post>(this.api + '/posts/' + id, this.httpHeader);
}
2.listpost.component.ts
Ajouter la fonction supprimerPost()
supprimerPost(id: any) {
if (window.confirm('Confim?')) {
this.postServicesService.supprimerPost(id).subscribe((res) => {
this.getPosts();
});
}
}
2.listpost.component.html
Appeler la fonction supprimerPost()
<div class="card text-dark mb-3">
<div class="card-header card bg-warning text-white">List Posts</div>
<div class="card-body">
<table class="table table-striped">
<tr>
<th>id</th>
<th>Title</th>
<th>Author</th>
<th>Action</th>
</tr>
<tr *ngFor="let p of posts; let i=index">
<td>{{p.id}}</td>
<td>{{p.title}}</td>
<td>{{p.author}}</td>
<td><a href="/posts/{{p.id}}">Détails</a>
<td><button class="btn-danger btn-sm btn" style="background:red;" (click)="supprimerPost(p.id)">Supprimer</button></td>
</tr>
</table>
</div>
</div>


Details d'un post

1.mesServices/post-services.service.js
Ajouter la fonction detailPost()
detailsPost(id: any): Observable<Post> {
return this.httpClient
.get<Post>(this.api + '/posts/' + id);
}
2.detailspost.component.ts
Ajouter la fonction detailPost()
import { Component, OnInit } from '@angular/core';
import { PostServicesService } from '../mesServices/post-services.service';
import { ActivatedRoute,ParamMap  } from '@angular/router';


@Component({
  selector: 'app-detailspost',
  templateUrl: './detailspost.component.html',
  styleUrls: ['./detailspost.component.css']
})
export class DetailspostComponent implements OnInit {

 post: any = {};
 constructor(private postServicesService: PostServicesService,private route:ActivatedRoute) {}

 id:number=0;
 ngOnInit(): void {
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.id = Number(params.get('id'));
      this.detailsPost(this.id);
      console.log(this.post);
     

    })
  }
 
  detailsPost(id:any) {
    return this.postServicesService.detailsPost(id).subscribe((res: {}) => {
      this.post = res;
    });
  }
 
 

}

2.detailspost.component.html
<div class="card text-dark mb-3">
<div class="card-header card bg-warning text-white">Details:{{post.title}}</div>
<div class="card-body">
<table class="table table-striped">
<tr>
<th>id</th>
<th>Title</th>
<th>Author</th>
<th>Action</th>
</tr>
<tr>
<td>{{post.id}}</td>
<td>{{post.title}}</td>
<td>{{post.author}}</td>
</tr>
</table>
</div>
</div>
3.app-routing.module.ts
Ajouter la route
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { DetailsComponent } from './details/details.component';
import { ClientsComponent } from './clients/clients.component';
import { UsersComponent } from './users/users.component';
import { ListpostComponent } from './listpost/listpost.component';
import { DetailspostComponent } from './detailspost/detailspost.component';

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'list',component: ListComponent } ,
{ path: 'clients',component: ClientsComponent } ,
{ path: 'users',component: UsersComponent } ,
{ path: 'listpost',component: ListpostComponent } ,
{ path: 'details/:id', component: DetailsComponent } ,
{ path: 'posts/:id', component: DetailspostComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Ajouter un post

1.mesServices/post-services.service.js
Ajouter la fonction ajouterPost()
ajouterPost(post: any): Observable<Post> {
return this.httpClient.post<Post>(
this.api + '/posts',
JSON.stringify(post),
this.httpHeader
);
}
2.addpost.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { PostServicesService } from '../mesServices/post-services.service';
@Component({
selector: 'app-addpost',
templateUrl: './addpost.component.html',
styleUrls: ['./addpost.component.css']
})
export class AddpostComponent implements OnInit {


post = { id: 0, title: '', author: ''}
constructor(
public postServicesService: PostServicesService,
public router: Router
) { }
ngOnInit(): void { }
ajouterPost(data: any) {
this.postServicesService.ajouterPost(this.post).subscribe((data: {}) => {
this.router.navigate(['/listpost'])
})
}

}

2.addpost.component.html
<div class="card text-dark mb-3">
<div class="card-header card bg-success text-white">Ajouter un nouveau post</div>
<div class="card-body">
<div class="form-group">
<input type="text" [(ngModel)]="post.title" class="form-control" placeholder="title">
</div>
<div class="form-group">
<input type="text" [(ngModel)]="post.author" class="form-control" placeholder="author">
</div>
<div class="form-group">
<input type="number" [(ngModel)]="post.id" class="form-control" placeholder="id">
</div>
<div class="form-group">
<button class="btn btn-info btn-sm form-control" (click)="ajouterPost(post)">Valider</button>
</div>
</div>
</div>
3.app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { DetailsComponent } from './details/details.component';
import { ClientsComponent } from './clients/clients.component';
import { UsersComponent } from './users/users.component';
import { ListpostComponent } from './listpost/listpost.component';
import { DetailspostComponent } from './detailspost/detailspost.component';
import { AddpostComponent } from './addpost/addpost.component';

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'list',component: ListComponent } ,
{ path: 'clients',component: ClientsComponent } ,
{ path: 'users',component: UsersComponent } ,
{ path: 'listpost',component: ListpostComponent } ,
{ path: 'details/:id', component: DetailsComponent } ,
{ path: 'posts/:id', component: DetailspostComponent },
{ path: 'post/add', component: AddpostComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }