Exercez-vous
1) Créez un nouveau projet comme expliqué précédemment
2) Que pouvez-vous remarquer dans l'arborescence de fichiers d'Angular...vis-à-vis de Ionic
3) A l'aide de la commande suivante, générez un nouveau Composant nommé "transaction" :
$ ng g c transaction
Que s'est-il passé ? Ouvrez le fichier src/app/transaction/transaction.component.ts et examinez-le.
4) Ouvrez le fichier src/app/app.component.html, et remplacez le contenu ci-dessous (on ne gardera que le logo d'Angular)
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
Par le code suivant :
<app-transaction></app-transaction>
Que s'est-il passé dans ce qui est affiché dans votre navigateur ?
P.S : notre application a désormais l'architecture suivante :
- DuckWeb
- Transaction
5) Remplacez le contenu du fichier src/app/transaction/transaction.component.html. Quel changement dans votre navigateur ?
6) Ouvrez le fichier src/app/transaction/transaction.component.ts dans le constructeur, définissez une liste de transactions comme vu dans le TP précédent, puis modifiez le fichier src/app/transaction/transaction.component.html, de manière à avoir le résultat suivant :
Que pouvez-vous conclure sur le rôle d'un composant ? Comprenez-vous mieux comment fonctionne les composants Ionic ?
7) Dans le fichier src/app/transaction/transaction.component.ts, ajoutez les lignes suivantes dans la partie dédiée aux imports :
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
Puis modifiez le fichier comme ceci :
import { Component, OnInit } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
const apiUrl='https://duckcoin.charlesen.fr';
@Component({
selector: 'app-transaction',
templateUrl: './transaction.component.html',
styleUrls: ['./transaction.component.css']
})
export class TransactionComponent implements OnInit {
transactions: any = [];
constructor(private http: HttpClient) {
// On récupère du contenu via une requete Http Get
this.http.get(`${apiUrl}/transactions`).subscribe(
data => {
this.transactions = data['transactions'];
}, err => {
console.log("Une erreur s'est produite.")
});
//...
}
ngOnInit() {
}
}
Vous avez planté normalement. Savez-vous pourquoi ?
No provider for HttpClient!
Dans le fichier src/app/app.module.ts ajoutez les lignes suivantes :
import { HttpClientModule } from '@angular/common/http';
// ...
imports: [
BrowserModule,
HttpClientModule,
// ...
IonicModule.forRoot(MyApp, {
// tabsPlacement: 'top',
backButtonText: 'Retour'
})
],
...
Grâce à l'utilisation du module http, vous pouvez facilement récupérer des données directement depuis le site hébergeant la blockchain.
Vous retrouverez les sources, ainsi que les corrections des exercices de ce TP à l'adresse:
https://github.com/charlesen/ionic-book/tree/master/examples/duckweb
Annexes
- Build Your First Angular App, de Dan Wahlin, Développeur Google
- Angular Tutorial :
- Documentation officielle :