Comment construire une application Angular ?
Angular est un framework open-source populaire pour la construction d’applications web dynamiques, réactives et complexes. Angular a été développé pour la première fois par Google en 2010 sous le nom de “AngularJS”.
Angular vous permet de créer des applications dynamiques à page unique avec une structure de code propre et organisée.
Angular utilise TypeScript, un surensemble de JavaScript, qui ajoute au langage des fonctionnalités telles que la vérification de type, les interfaces et les classes. Le code Angular est ainsi plus facile à maintenir et moins sujet aux erreurs.
Pour rationaliser le développement web avec Angular, il est utile d’utiliser une solution de Backend-as-a-Service (BaaS) comme Back4app.
Back4app fournit une infrastructure backend pré-construite avec des fonctionnalités telles que l’authentification, le stockage de données et la logique côté serveur.
Cela vous permet de vous concentrer sur le développement de la partie frontale de vos applications sans vous soucier de la complexité du développement de la partie dorsale.
Dans cet article, vous allez explorer Angular et construire une application de blog basique en utilisant Angular et Back4app.
Contents
- 1 Avantages d’Angular
- 2 Limites d’Angular
- 3 Création de l’application Blog
- 4 Intégrer Back4App
- 5 Connecter votre application à Back4app
- 6 Ajouter des données à votre application Back4app
- 7 Récupérer les données de Back4app
- 8 Effacer des données de votre application Back4app
- 9 Test de l’application
- 10 Conclusion
Avantages d’Angular
Angular a gagné en popularité parmi les développeurs en raison de ses nombreux avantages. Voici quelques-uns des principaux avantages d’Angular :
Liaison bidirectionnelle des données
La liaison bidirectionnelle des données est une fonctionnalité qui permet de gagner du temps et de la productivité et qui améliore la qualité des applications Angular. La liaison bidirectionnelle des données permet aux modifications apportées au modèle (données) de se refléter automatiquement dans la vue (interface utilisateur).
Toute modification apportée au modèle est immédiatement répercutée dans la vue. Cela facilite et accélère le développement d’applications complexes et dynamiques, en éliminant la nécessité d’écrire du code de type “boilerplate” pour synchroniser le modèle et la vue.
Injection de dépendance
L’injection de dépendances est une fonctionnalité cruciale d’Angular qui facilite la gestion des dépendances entre les composants et les services. L’injection de dépendances est une fonctionnalité puissante qui améliore la fiabilité, la maintenabilité et la testabilité des applications Angular.
L’injection de dépendances dans Angular permet aux composants et aux services de déclarer des dépendances sur d’autres composants et services. Le système d’injection de dépendances se charge alors de créer et de fournir ces dépendances automatiquement. Il n’est donc plus nécessaire de créer et de gérer les dépendances manuellement, ce qui réduit le risque d’erreurs.
Le système d’injection de dépendances d’Angular facilite la gestion des dépendances et réduit la quantité de code à écrire.
Architecture à base de composants
L’architecture à base de composants d’Angular facilite la construction d’interfaces utilisateur complexes en les décomposant en composants plus petits et réutilisables.
Les composants peuvent être facilement réutilisés dans différentes parties de l’application. Les composants peuvent être développés indépendamment, ce qui facilite la gestion d’applications complexes comportant de nombreux éléments mobiles. Cette architecture facilite également les tests et le débogage du code, car les composants peuvent être isolés et testés séparément.
TypeScript
TypeScript est un surensemble de JavaScript qui ajoute au langage une vérification statique des types, des interfaces, des classes et d’autres fonctionnalités. Il s’agit d’un langage open-source géré par Microsoft, très apprécié pour le développement d’applications web à grande échelle.
Angular est écrit en TypeScript. Cela permet de disposer d’un meilleur outillage et d’une expérience de développement plus robuste. Le typage statique de TypeScript permet aux développeurs de détecter les erreurs à la compilation plutôt qu’à l’exécution, ce qui facilite la maintenance et la refonte du code.
Grande communauté
Angular dispose d’une communauté de développeurs importante et active, qui peut s’avérer incroyablement précieuse pour plusieurs raisons.
Une grande communauté offre de nombreuses ressources, telles que des tutoriels, de la documentation et des forums. Ces ressources peuvent être incroyablement utiles pour les développeurs qui découvrent Angular ou qui cherchent des solutions à des problèmes spécifiques.
Une grande communauté signifie que de nombreux développeurs travaillent activement à l’amélioration du framework en créant et en partageant des plugins et des extensions tierces pour Angular. Cela peut vous faire gagner du temps et des efforts, car vous pouvez exploiter le code existant pour ajouter de nouvelles fonctionnalités à vos projets.
Limites d’Angular
Bien qu’Angular soit un framework puissant et populaire pour la création d’applications web, il présente certaines limites dont vous devez être conscient. Voici quelques-unes des limites d’Angular :
Une courbe d’apprentissage abrupte
Angular peut être difficile à apprendre pour certains développeurs en raison du fait qu’il introduit de nombreux nouveaux concepts et approches du développement web. Vous devrez peut-être consacrer beaucoup de temps à l’apprentissage des modules, des composants, des services, de l’injection de dépendances et de la programmation réactive.
Grande taille
Angular est un framework relativement important par rapport à d’autres frameworks frontaux. La taille importante d’Angular est principalement due à son vaste ensemble de fonctionnalités, qui comprend de nombreuses fonctionnalités intégrées, telles que la gestion des formulaires, le routage et la gestion des données.
La taille importante d’Angular peut entraîner des temps de chargement plus lents pour les applications web, ce qui peut avoir un impact négatif sur l’expérience de l’utilisateur. Cela est particulièrement vrai pour les utilisateurs qui disposent de connexions internet lentes.
La taille importante d’Angular peut rendre le développement et la maintenance de projets complexes plus difficiles.
Référencement limité
Les capacités limitées d’Angular en matière de référencement sont principalement dues au fait qu’il s’agit d’un framework d’application à page unique (SPA). Les SPA sont conçues pour fonctionner entièrement dans le navigateur, ce qui signifie que le code HTML est généré dynamiquement à l’aide de JavaScript. Il est donc difficile pour les robots des moteurs de recherche d’indexer avec précision le contenu d’un site web propulsé par Angular.
Création de l’application Blog
Créez une application Angular et nommez-la “blog-application”. Pour créer l’application Angular, exécutez la commande suivante dans le répertoire de votre projet sur votre terminal :
ng new blog-application
Après avoir créé votre application Angular, vous allez créer deux composants. Ces deux composants seront les composants home et post. Après avoir créé les composants, vous les acheminerez.
Pour générer les composants, exécutez les commandes suivantes :
cd blog-application
ng generate component home-component
ng generate component post-component
Une fois les composants générés, configurez leur routage dans le fichier app-routing.module.ts.
Comme cela :
//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';
import { PostComponentComponent } from './post-component/post-component.component';
const routes: Routes = [
{path: '', component: HomeComponentComponent},
{path: 'post', component: PostComponentComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Le bloc de code ci-dessus définit deux routes dans le tableau des routes. La route du composant HomeComponentComponent a un chemin vide. Le chemin vide signifie que le HomeComponentComponent s’affichera dès le rendu de l’application.
La route PostComponentComponent est définie avec un chemin d’accès “post”, ce qui signifie que lorsque vous naviguez vers cette route, le PostComponentComponent sera rendu et affiché dans la vue.
Pour naviguer vers les routes spécifiées, vous devez ajouter un en-tête à votre application. Vous créerez l’en-tête dans le fichier app-component.html. L’en-tête contiendra des éléments permettant de naviguer vers les différents itinéraires.
Par exemple :
<!--app.component.html-->
<div>
<div class="header">
<a routerLink=""><h2>Blog</h2></a>
<a routerLink="post"><button>write</button></a>
</div>
<router-outlet></router-outlet>
</div>
La div d’en-tête contient deux éléments d’ancrage enfants. Les éléments d’ancrage enveloppent un élément h2 et un élément bouton. En cliquant sur l’élément h2, vous accédez à l’itinéraire par défaut, tandis qu’en cliquant sur l’élément button, vous accédez à l’itinéraire post. Le router-outlet affiche les composants routés sous la div d’en-tête.
Après avoir créé l’en-tête, vous devez le styliser dans le fichier app-compnent.scss:
/* app.component.scss*/
.header{
display: flex;
justify-content: space-between;
padding: 1rem 0;
}
Intégrer Back4App
Pour commencer à construire une application avec Back4app, assurez-vous d’abord que vous avez un compte. Si vous ne possédez pas de compte Back4app, suivez les instructions fournies :
- Allez sur le site web de Back4app.
- Trouvez le bouton d’inscription dans la partie supérieure droite de la page d’accueil et cliquez dessus.
- Remplir le formulaire d’inscription et le soumettre.
Une fois que vous vous êtes inscrit avec succès, connectez-vous à votre compte Back4app et procédez comme suit :
- Localisez le bouton NEW APP dans le coin supérieur droit et cliquez dessus.
- Vous serez dirigé vers un formulaire où vous pourrez saisir le nom de l’application que vous souhaitez.
- Saisissez le nom de votre application et cliquez sur le bouton CREATE pour lancer le processus de création de votre application.
Après avoir cliqué sur le bouton “CRÉER”, votre demande sera générée et vous serez dirigé vers le tableau de bord de la demande.
Connecter votre application à Back4app
Pour connecter votre application Angular à l’application Back4app que vous avez créée, vous devez installer le Parse JavaScript SDK.
Installez le SDK en exécutant l’une des commandes ci-dessous, en fonction de votre gestionnaire de paquets :
#using npm
npm install parse
or
#using yarn
yarn add parse
Après avoir installé le SDK JavaScript de Parse, vous devez obtenir votre ID d'application et votre clé JavaScript. Vous en aurez besoin pour connecter votre application Angular à l’application Back4app.
Pour récupérer l’ID de l'application et la clé JavaScript de Back4app, naviguez vers la section Sécurité & Clés en sélectionnant Paramètres de l’application sur le tableau de bord. Là, vous pouvez facilement accéder aux clés nécessaires pour connecter votre application Angular à Back4app.
Après avoir récupéré votre identifiant d'application et votre clé JavaScript, conservez-les en toute sécurité dans votre application.
Dans votre fichier app.component.ts, importez la version minifiée de Parse à partir de parse. Appelez ensuite la méthode initialize de Parse. La méthode initialize prend l’ID de l'application et la clé JavaScript comme arguments. Enfin, définissez le serverURL de Parse à“https://parseapi.back4app.com/”.
Après cela, votre fichier app.component.ts devrait ressembler à ceci :
//app.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
}
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";
Ajouter des données à votre application Back4app
Pour ajouter des données à votre application Back4App, vous allez construire un formulaire pour recevoir des données d’un utilisateur. Lorsque l’utilisateur soumet le formulaire, vous exécutez une fonction handleSubmit. La fonction handleSubmit contiendra la logique permettant d’ajouter un nouvel article de votre application de blog dans l’application Back4App.
Comme cela :
// post-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-post-component',
templateUrl: './post-component.component.html',
styleUrls: ['./post-component.component.scss']
})
export class PostComponentComponent {
data: postData = {
title: '',
body: '',
}
handleSubmit(){
try {
const Post = new Parse.Object("Post");
Post.set("title", this.data.title);
Post.set("body", this.data.body);
Post.save().then(() => {
console.log("New Post added successfully");
});
} catch (error) {
console.log(error);
}
}
}
interface postData {
title: string,
body: string
}
Le bloc de code ci-dessus est le fichier post-component.component.ts**.** La fonction handleSubmit crée un nouvel objet Parse Post et définit sa propriété title à la valeur de la propriété data.title et la propriété body à la valeur de la propriété data.body. Enfin, elle enregistre les propriétés de l’objet Post sur le serveur Parse à l’aide de Post.save().
Les propriétés de données obtiendront leurs valeurs d’un utilisateur par le biais d’un formulaire. Pour ce faire, vous allez créer un formulaire dans le fichier post-component.component.html.
Comme cela :
<!-- post-component.component.html -->
<form class="post" (ngSubmit)="handleSubmit()">
<input type="text" placeholder="Title..." name="title" [(ngModel)]="data.title" >
<textarea name="body" placeholder="Body..." cols="30" rows="10" [(ngModel)]="data.body"></textarea>
<button type="submit">Post</button>
</form>
Le ngModel lie les valeurs des champs de saisie title et body aux propriétés de données. Le ngSubmit gère la soumission du formulaire en appelant la fonction handleSubmit déclarée dans le fichier post-component.ts.
Ensuite, vous allez styliser votre composant. Dans le fichier SCSS du post-composant, entrez le code suivant :
/* post-component.component.scss */
.post{
margin-block-start: 4rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
input{
border: none;
inline-size: 100%;
padding: 1rem;
border-radius: 7px;
&::placeholder{
color: #e2e2e2;
}
textarea{
border: none;
inline-size: 100%;
padding: 1rem;
&::placeholder{
color: #e2e2e2;
}
}
}
Récupérer les données de Back4app
Pour récupérer des données dans votre application Back4app, créez une requête Parse pour la classe dont vous voulez récupérer les données. La requête sera exécutée dans le crochet de cycle de vie ngOnInit.
Par exemple :
// home-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-home-component',
templateUrl: './home-component.component.html',
styleUrls: ['./home-component.component.scss']
})
export class HomeComponentComponent {
data: postData[] = [];
async ngOnInit() {
try {
const query = new Parse.Query("Post");
const post = await query.find();
this.data = post;
} catch (error) {
console.log(error);
}
}
}
interface postData {
id: string,
get: any,
}
Le bloc de code ci-dessus recherche un objet “Post” dans la base de données de votre application Back4app en utilisant la méthode Parse.Query(). Il renvoie ensuite un tableau contenant les résultats de la requête en appelant la méthode find du SDK Parse sur le résultat de l’appel Parse.Query(). Enfin, il affecte le tableau retourné à la variable data.
En utilisant le tableau de données, vous rendrez votre modèle HTML :
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button>Delete</button>
</div>
</div>
La directive ngFor parcourt en boucle le tableau et génère les éléments HTML enveloppés dans sa div. La méthode post.get() récupère les valeurs des propriétés title et body des attributs dans votre base de données Back4App.
Vous pouvez maintenant styliser votre composant en ajoutant le code suivant dans le fichier SCSS du composant :
/* home-component.component.scss */
.home{
display: flex;
flex-direction: column;
gap: 2rem;
margin-block-start: 4rem;
.post{
border-radius: 12px;
padding: 1rem;
&:hover{
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
background-color: #e2e2e2;
}
h3{
text-transform: uppercase;
margin-block-end: 0.4rem;
}
button{
margin-block-start: 1rem;
}
}
}
Effacer des données de votre application Back4app
Pour supprimer des données de votre application Back4App, vous utilisez la méthode destroy pour supprimer le(s) enregistrement(s) correspondant(s) de votre base de données. Vous allez créer une fonction deletePost dans votre fichier home-component.component.ts. La fonction deletePost contiendra la logique pour supprimer les messages de la base de données de votre application Back4App sur la base d’un ID donné.
Comme cela :
// home-component.component.ts
async deletePost(id: string) {
try {
const Post = Parse.Object.extend("Post");
const todo = new Post();
todo.id = id;
await todo.destroy();
const newData = this.data.filter( (item: postData) => item.id !== id )
this.data = newData;
} catch (error) {
console.log(error);
}
}
Le bloc de code ci-dessus crée un nouvel objet Post à l’aide de la méthode Parse.Object.extend. Il définit ensuite la propriété id de l’objet Post en fonction du paramètre id transmis à la fonction.
Ensuite, il appelle la méthode destroy de l’objet Post pour supprimer le post avec l’ID donné de la base de données de Back4app. Il filtre ensuite le tableau de données et renvoie un nouveau tableau newData, contenant tous les messages à l’exception de celui qui a été supprimé. Le tableau newData est ensuite assigné à la variable data.
Après avoir défini la fonction deletePost dans le fichier home-component.component.ts, vous liez la fonction au bouton de suppression dans le fichier HTML du composant à l’aide de l’événement click.
Votre fichier home-component.component.html devrait ressembler à ceci :
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button (click)="deletePost(post.id)">Delete</button>
</div>
</div>
Enfin, ajoutez quelques styles globaux à l’application en ajoutant le bloc de code ci-dessous à votre fichier styles.scss:
/* styles.scss */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
inline-size: 50%;
margin: 0 auto;
background-color: #f2f2f2;
}
a{
text-decoration: none;
color: inherit;
}
button{
border: 1px #333333 solid;
padding: 0.3rem 0.5rem;
border-radius: 0.4rem;
background-color: inherit;
inline-size: min-content;
&:hover{
background-color: #333333;
color: #FFFFFF;
}
}
Test de l’application
Pour tester l’application, ouvrez le terminal de votre projet et exécutez la commande ci-dessous :
ng serve
La commande ci-dessus compile l’application et l’héberge sur un serveur local à l’adresse http://localhost:4200 par défaut.
Lorsque votre application est lancée, vous devriez voir l’interface utilisateur présentée dans l’image ci-dessous :
En cliquant sur le bouton “écrire”, vous accédez au composant "post". Le post-composant contient un formulaire avec des champs de saisie et un bouton.
Le post-composant se présente comme suit :
Après avoir rempli les champs de saisie, cliquer sur le bouton “poster” ajoutera les valeurs saisies à la base de données de Back4app. Pour le confirmer, vous pouvez consulter le tableau de bord de votre application Back4app ou simplement vous rediriger vers la page d’accueil de l’application.
En cliquant sur le bouton de suppression, vous supprimez un message. Par exemple, supprimer le message “Qu’est-ce qu’un lion ?” en cliquant sur son bouton de suppression :
Conclusion
Angular est un framework puissant pour construire des applications web robustes et évolutives. Il est doté d’une architecture modulaire, d’une liaison de données puissante et de nombreux composants préconstruits. Parmi ses avantages, citons l’augmentation de la productivité des développeurs, un processus de développement rationalisé et la possibilité de créer des interfaces utilisateur dynamiques, réactives et performantes.
Construire une application Angular avec Back4app en tant que solution Backend-as-a-Service peut grandement simplifier et accélérer le développement. Avec l’infrastructure pré-construite de Back4app, vous pouvez vous concentrer sur la création du front-end de votre application sans vous soucier des complexités du développement du back-end, telles que l’authentification et le stockage des données.
