Bonjour, je débute sur angular et je développe une petite application et quand je lance l'application et vais à l'adresse http://localhost:4200/,
le résultat est le suivant
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>DemoImmobilierFront</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <app-root></app-root> <script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body> </html>
Le fichier index.html est le suivant
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>DemoImmobilierFront</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <app-root></app-root> </body> </html>
le fichier app.module.ts est le suivant
le fichier app.component.ts est le suivant
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 import { AppRoutingModule } from './app-routing.module'; import { MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule } from '@angular/material'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppProduitImmobilierDetailsComponent } from './app-produit-immobilier-details/app-produit-immobilier-details.component'; @NgModule({ declarations: [ AppComponent, AppProduitImmobilierDetailsComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Le fichier app.component.html est le suivant
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 import { Component } from '@angular/core'; import {ProduitImmobilierDTO} from './produit-immobilier-dto'; import {AppServiceService} from './app-service.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'demoImmobilierFront'; public annonces: ProduitImmobilierDTO[]; constructor(private service: AppServiceService) {} ngOnInit() { this.service.getListProduitImmobilierDTO().subscribe( articles => this.annonces = articles ); } }
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <div class="col-md-6"> <h2> List of Annonces</h2> <div *ngFor="let annonce of annonces; let i = index"> <div class="card"> <img src="assets/image{{i}}.jpg" alt="Avatar" style="float:left;width:100%"> <div class="container"> <h4><b>{{annonce.type}}</b></h4> <h4><b>{{annonce.dateConstruction}}</b></h4> <h4><b>{{annonce.adresse}}</b></h4> <h4><b>{{annonce.prix}}</b></h4> <h4><b>{{annonce.surface}}</b></h4> </div> </div> </div> </div> <router-outlet></router-outlet>
le service AppServiceService dans le fichier app-service.service.ts est le suivant
Pourriez vous m'aider s'il vous plait ? Merci
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 import { Injectable } from '@angular/core'; import {Http, Response} from '@angular/http'; import {DossierPinelDTO} from './dossier-pinel-dto'; import {ProduitImmobilierDTO} from './produit-immobilier-dto'; import { Observable} from 'rxjs'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class AppServiceService { constructor(private http: Http) {} getDossierPinelDTO(id: number): Observable<DossierPinelDTO> { return this.http.get('/api/produitimmobilier/' + id).pipe(map(response => DossierPinelDTO.fromJson(response.json()))); } getListProduitImmobilierDTO(): Observable<ProduitImmobilierDTO[]> { return this.http.get('/api/produitimmobilier/all').pipe(map((jsonArray: any) =>jsonArray.map((jsonItem) => ProduitImmobilierDTO.fromJson(jsonItem)))); } }
Partager