Quickstarters
Comment construire un frontend Angular et le connecter à un backend ?

38min
Dans ce tutoriel, vous allez créer une application de liste de tâches en utilisant Angular et la connecter à un service backend géré alimenté par Back4app.
Ce guide est conçu pour vous si vous souhaitez maîtriser les opérations CRUD essentielles (Créer, Lire, Mettre à jour, Supprimer) et créer une interface dynamique et réactive avec Angular. À la fin de ce tutoriel, votre application communiquera sans problème avec un backend qui gère le stockage des données, l'authentification, et plus encore.
Construire une application full-stack implique souvent une configuration backend complexe et une gestion de base de données. Pour simplifier votre flux de travail, nous utilisons Back4app—un backend-as-a-service robuste—pour que vous puissiez vous concentrer sur le développement d'un frontend Angular riche en fonctionnalités.
Back4app fournit une base de données NoSQL entièrement gérée, une authentification des utilisateurs, du Cloud Code pour une logique personnalisée, et des SDK pour une intégration transparente. Cela vous permet de construire et de déployer des applications évolutives sans gérer l'infrastructure serveur.
Points clés à retenir
En suivant ce tutoriel, vous allez :
Initialiser un projet Angular moderne en utilisant Angular CLI.
Intégrer sans effort un service backend pour gérer les données de votre application.
Mettre en œuvre des opérations CRUD essentielles pour une dynamique Liste de tâches.
Déployer votre application entièrement fonctionnelle en utilisant des flux de travail conteneurisés sur Back4app.
Conditions préalables
Avant de commencer, assurez-vous d'avoir :
Node.js et npm installés sur votre machine. Vérifiez les installations avec node -v et npm -v.
Connaissances de base en Angular, y compris les composants, les services et l'injection de dépendances.
Un compte Back4app pour gérer vos services backend. Inscrivez-vous sur Back4app si vous ne l'avez pas déjà fait.
Avec ces conditions préalables en place, vous êtes prêt à commencer à construire votre projet.
Configuration du projet
Commencez par configurer votre environnement de développement local et initialiser un nouveau projet Angular en utilisant Angular CLI.
Assurez-vous d'avoir Node.js (version LTS) installé. Si ce n'est pas le cas, téléchargez-le depuis nodejs.org.
Installez l'Angular CLI globalement si vous ne l'avez pas déjà fait :
Bash
npm install -g @angular/cli
npm install -g @angular/cli
﻿
Créer un nouveau projet Angular :
Bash
ng new todo-app --routing --style=css
ng new todo-app --routing --style=css
﻿
Naviguez vers votre répertoire de projet :
Bash
cd todo-app
cd todo-app
﻿
Démarrez le serveur de développement pour vérifier la configuration :
Bash
ng serve
ng serve
﻿
Ouvrez http://localhost:4200 dans votre navigateur pour voir votre application Angular en action. Avec le frontend prêt, procédez à la création de votre backend sur Back4app.
Création du backend Todo
Back4app propose un service backend entièrement géré alimenté par Parse, y compris une base de données NoSQL, une authentification, du Cloud Code et des API auto-générées.
Suivez ces étapes pour configurer votre backend :
Connectez-vous à votre tableau de bord Back4app et cliquez sur "Créer une nouvelle application."
Nommez votre application (par exemple, TodoApp) et sélectionnez NodeJS/Parse comme type de backend.
Accédez à "Base de données" > "Navigateur", cliquez sur "Créer une classe", et choisissez "Personnalisé". Nommez la classe Tâche et définissez les autorisations pour permettre la lecture et l'écriture publiques (vous pourrez affiner cela plus tard).
Dans la classe Tâche, ajoutez les champs suivants :
titre (String) – Le titre de la tâche.
description (String) – Détails sur la tâche.
terminé (Boolean) – État d'achèvement de la tâche.
dateLimite (Date) – La date limite pour la tâche.
Cliquez sur "Enregistrer" pour créer le schéma.
Page de création de classe Back4app
﻿
Intégration de Back4app avec Angular
Vous utiliserez le Parse JavaScript SDK pour connecter votre application Angular au backend de Back4app.
Installez le SDK Parse :
Bash
npm install parse
npm install parse
﻿
Configurez le SDK dans votre projet Angular. Ouvrez src/app/app.module.ts (ou créez un service dédié) et initialisez Parse avec votre Application ID et JavaScript Key depuis le tableau de bord Back4app (trouvé sous App Settings > Security & Keys). Par exemple, créez un service parse.service.ts dans le src répertoire :
TypeScript
import { Injectable } from '@angular/core';
import Parse from 'parse';

@Injectable({
  providedIn: 'root',
})

export class ParseService {
  constructor() {
    const PARSE_APP_ID = "your-application-id";
    const PARSE_JS_KEY = "your-javascript-key";

    Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
    (Parse as any).serverURL = 'https://parseapi.back4app.com/';
  }
}
import { Injectable } from '@angular/core';
import Parse from 'parse';

@Injectable({
  providedIn: 'root',
})

export class ParseService {
  constructor() {
    const PARSE_APP_ID = "your-application-id";
    const PARSE_JS_KEY = "your-javascript-key";

    Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
    (Parse as any).serverURL = 'https://parseapi.back4app.com/';
  }
}
﻿
Ensuite, dans vos composants, injectez simplement ParseService dans le constructeur. Le service exécutera son constructeur une fois (au démarrage de l'application), initialisant Parse pour vous.
Avec votre backend connecté, vous pouvez maintenant construire l'interface utilisateur de la liste de tâches et implémenter des opérations CRUD.
Développement du Frontend
Votre application Angular sera composée de composants et de services pour ajouter, afficher, mettre à jour et supprimer des tâches. Vous tirerez parti de l'architecture des composants d'Angular et de l'injection de dépendances pour une gestion fluide des données.
Structuration de vos composants
Générez les composants suivants en utilisant Angular CLI :
Bash
ng generate component components/task-form
ng generate component components/task-list
ng generate component components/task-item
ng generate component components/task-form
ng generate component components/task-list
ng generate component components/task-item
﻿
TaskFormComponent
Ce composant rend un formulaire pour ajouter de nouvelles tâches. Il capture l'entrée de l'utilisateur et soumet les données de la tâche à Back4app.
HTML
<!-- src/app/components/task-form/task-form.component.html -->
<form (ngSubmit)="onSubmit()">
  <input type="text" placeholder="Task Title" [(ngModel)]="title" name="title" required />
  <input type="text" placeholder="Description" [(ngModel)]="description" name="description" required />
  <button type="submit">Add Task</button>
</form>
<!-- src/app/components/task-form/task-form.component.html -->
<form (ngSubmit)="onSubmit()">
  <input type="text" placeholder="Task Title" [(ngModel)]="title" name="title" required />
  <input type="text" placeholder="Description" [(ngModel)]="description" name="description" required />
  <button type="submit">Add Task</button>
</form>
﻿
TypeScript
// src/app/components/task-form/task-form.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import * as Parse from 'parse';

@Component({
  selector: 'app-task-form',
  templateUrl: './task-form.component.html',
  styleUrls: ['./task-form.component.css'],
  imports: [FormsModule]
})
export class TaskFormComponent {
  title = '';
  description = '';
  @Output() refreshTasks = new EventEmitter<void>();

  async onSubmit() {
    try {
      const Task = Parse.Object.extend('Task');
      const task = new Task();
      task.set('title', this.title);
      task.set('description', this.description);
      task.set('completed', false);
      await task.save();
      this.refreshTasks.emit();
      this.title = '';
      this.description = '';
    } catch (error) {
      console.error('Error adding task:', error);
    }
  }
}
// src/app/components/task-form/task-form.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import * as Parse from 'parse';

@Component({
  selector: 'app-task-form',
  templateUrl: './task-form.component.html',
  styleUrls: ['./task-form.component.css'],
  imports: [FormsModule]
})
export class TaskFormComponent {
  title = '';
  description = '';
  @Output() refreshTasks = new EventEmitter<void>();

  async onSubmit() {
    try {
      const Task = Parse.Object.extend('Task');
      const task = new Task();
      task.set('title', this.title);
      task.set('description', this.description);
      task.set('completed', false);
      await task.save();
      this.refreshTasks.emit();
      this.title = '';
      this.description = '';
    } catch (error) {
      console.error('Error adding task:', error);
    }
  }
}
﻿
TaskListComponent
Ce composant affiche une liste de tâches en itérant sur un tableau et en rendant chaque tâche à l'aide du TaskItemComponent.
HTML
<!-- src/app/components/task-list/task-list.component.html -->
<div *ngIf="tasks.length === 0">
  <p>No tasks available</p>
</div>
<div *ngFor="let task of tasks">
  <app-task-item [task]="task" (taskChanged)="fetchTasks()"></app-task-item>
</div>
<!-- src/app/components/task-list/task-list.component.html -->
<div *ngIf="tasks.length === 0">
  <p>No tasks available</p>
</div>
<div *ngFor="let task of tasks">
  <app-task-item [task]="task" (taskChanged)="fetchTasks()"></app-task-item>
</div>
﻿
TypeScript
// src/app/components/task-list/task-list.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as Parse from 'parse';
import { TaskItemComponent } from '../task-item/task-item.component';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css'],
  imports: [CommonModule, TaskItemComponent]
})
export class TaskListComponent implements OnInit {
  @Input() tasks: any[] = [];
  @Input() fetchTasks!: () => void;
  
  ngOnInit(): void {}
}
// src/app/components/task-list/task-list.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as Parse from 'parse';
import { TaskItemComponent } from '../task-item/task-item.component';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css'],
  imports: [CommonModule, TaskItemComponent]
})
export class TaskListComponent implements OnInit {
  @Input() tasks: any[] = [];
  @Input() fetchTasks!: () => void;
  
  ngOnInit(): void {}
}
﻿
TaskItemComponent
Ce composant représente une tâche individuelle et fournit des boutons pour basculer l'état d'achèvement ou supprimer la tâche.
HTML
<!-- src/app/components/task-item/task-item.component.html -->
<div [class.completed]="task.completed" class="task-item">
  <div>
    <h3>{{ task.title }}</h3>
    <p>{{ task.description }}</p>
  </div>
  <div>
    <button (click)="toggleComplete()">
      {{ task.completed ? 'Undo' : 'Complete' }}
    </button>
    <button (click)="deleteTask()">Delete</button>
  </div>
</div>
<!-- src/app/components/task-item/task-item.component.html -->
<div [class.completed]="task.completed" class="task-item">
  <div>
    <h3>{{ task.title }}</h3>
    <p>{{ task.description }}</p>
  </div>
  <div>
    <button (click)="toggleComplete()">
      {{ task.completed ? 'Undo' : 'Complete' }}
    </button>
    <button (click)="deleteTask()">Delete</button>
  </div>
</div>
﻿
TypeScript
// src/app/components/task-item/task-item.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as Parse from 'parse';

@Component({
  selector: 'app-task-item',
  templateUrl: './task-item.component.html',
  styleUrls: ['./task-item.component.css']
})
export class TaskItemComponent {
  @Input() task: any;
  @Output() taskChanged = new EventEmitter<void>();

  async toggleComplete() {
    try {
      const query = new Parse.Query('Task');
      const taskToUpdate = await query.get(this.task.id);
      taskToUpdate.set('completed', !this.task.completed);
      await taskToUpdate.save();
      this.taskChanged.emit();
    } catch (error) {
      console.error('Error updating task:', error);
    }
  }

  async deleteTask() {
    try {
      const query = new Parse.Query('Task');
      const taskToDelete = await query.get(this.task.id);
      await taskToDelete.destroy();
      this.taskChanged.emit();
    } catch (error) {
      console.error('Error deleting task:', error);
    }
  }
}
// src/app/components/task-item/task-item.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as Parse from 'parse';

@Component({
  selector: 'app-task-item',
  templateUrl: './task-item.component.html',
  styleUrls: ['./task-item.component.css']
})
export class TaskItemComponent {
  @Input() task: any;
  @Output() taskChanged = new EventEmitter<void>();

  async toggleComplete() {
    try {
      const query = new Parse.Query('Task');
      const taskToUpdate = await query.get(this.task.id);
      taskToUpdate.set('completed', !this.task.completed);
      await taskToUpdate.save();
      this.taskChanged.emit();
    } catch (error) {
      console.error('Error updating task:', error);
    }
  }

  async deleteTask() {
    try {
      const query = new Parse.Query('Task');
      const taskToDelete = await query.get(this.task.id);
      await taskToDelete.destroy();
      this.taskChanged.emit();
    } catch (error) {
      console.error('Error deleting task:', error);
    }
  }
}
﻿
Intégration du composant App
Dans votre composant principal, gérez l'état des tâches et intégrez les composants de tâche.
HTML
<!-- src/app/app.component.html -->
<div class="container">
  <h1>To-Do List</h1>
  <app-task-form (refreshTasks)="fetchTasks()"></app-task-form>
  <app-task-list [tasks]="tasks" [fetchTasks]="fetchTasks"></app-task-list>
</div>
<!-- src/app/app.component.html -->
<div class="container">
  <h1>To-Do List</h1>
  <app-task-form (refreshTasks)="fetchTasks()"></app-task-form>
  <app-task-list [tasks]="tasks" [fetchTasks]="fetchTasks"></app-task-list>
</div>
﻿
TypeScript
// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { ParseService } from './parse.service';
import * as Parse from 'parse';
import { TaskFormComponent } from './components/task-form/task-form.component';
import { TaskListComponent } from './components/task-list/task-list.component';

@Component({
  selector: 'app-root',
  imports: [TaskFormComponent, TaskListComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent implements OnInit {
  constructor(private parseService: ParseService) {}

  tasks: any[] = [];

  async fetchTasks() {
    try {
      const Task = Parse.Object.extend('Task');
      const query = new Parse.Query(Task);
      const results = await query.find();
      this.tasks = results.map(task => ({ id: task.id, ...task.toJSON() }));
    } catch (error) {
      console.error('Error fetching tasks:', error);
    }
  }

  ngOnInit(): void {
    this.fetchTasks();
  }
}
// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { ParseService } from './parse.service';
import * as Parse from 'parse';
import { TaskFormComponent } from './components/task-form/task-form.component';
import { TaskListComponent } from './components/task-list/task-list.component';

@Component({
  selector: 'app-root',
  imports: [TaskFormComponent, TaskListComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent implements OnInit {
  constructor(private parseService: ParseService) {}

  tasks: any[] = [];

  async fetchTasks() {
    try {
      const Task = Parse.Object.extend('Task');
      const query = new Parse.Query(Task);
      const results = await query.find();
      this.tasks = results.map(task => ({ id: task.id, ...task.toJSON() }));
    } catch (error) {
      console.error('Error fetching tasks:', error);
    }
  }

  ngOnInit(): void {
    this.fetchTasks();
  }
}
﻿
Styliser l'application
Créez ou mettez à jour les styles dans vos fichiers CSS de composant ou dans src/styles.css:
CSS
/* src/styles.css */
.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
  font-family: sans-serif;
}

h1 {
  margin-bottom: 20px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

form input[type="text"] {
  width: 80%;
  max-width: 400px;
  padding: 8px;
  box-sizing: border-box;
  font-size: 1rem;
}

form button {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  background-color: #eaeaea;
  transition: background-color 0.2s ease;
}

form button:hover {
  background-color: #ccc;
}

.task-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin: 10px 0;
  background-color: #fafafa;
  text-align: center;
  transition: background-color 0.2s ease;
}

.task-item.completed h3,
.task-item.completed p {
  text-decoration: line-through;
  color: #888;
}

.task-item h3 {
  margin: 0;
  font-size: 1.1rem;
}

.task-item p {
  margin: 0;
  font-size: 1rem;
}

.task-item button {
  padding: 6px 12px;
  border: none;
  background-color: #eaeaea;
  cursor: pointer;
  font-size: 0.9rem;
}

.task-item button:hover {
  background-color: #ccc;
}

@media (min-width: 600px) {
  .task-item {
    flex-direction: row;
  }
}
/* src/styles.css */
.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
  font-family: sans-serif;
}

h1 {
  margin-bottom: 20px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

form input[type="text"] {
  width: 80%;
  max-width: 400px;
  padding: 8px;
  box-sizing: border-box;
  font-size: 1rem;
}

form button {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  background-color: #eaeaea;
  transition: background-color 0.2s ease;
}

form button:hover {
  background-color: #ccc;
}

.task-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin: 10px 0;
  background-color: #fafafa;
  text-align: center;
  transition: background-color 0.2s ease;
}

.task-item.completed h3,
.task-item.completed p {
  text-decoration: line-through;
  color: #888;
}

.task-item h3 {
  margin: 0;
  font-size: 1.1rem;
}

.task-item p {
  margin: 0;
  font-size: 1rem;
}

.task-item button {
  padding: 6px 12px;
  border: none;
  background-color: #eaeaea;
  cursor: pointer;
  font-size: 0.9rem;
}

.task-item button:hover {
  background-color: #ccc;
}

@media (min-width: 600px) {
  .task-item {
    flex-direction: row;
  }
}
﻿
Déployer le Frontend sur le déploiement Web Back4app
Le déploiement Web Back4app fournit un environnement conteneurisé pour héberger votre application Angular.
Configurer Angular pour la production
Construisez votre application Angular prête pour la production :
Bash
ng build
ng build
﻿
Cette commande génère un dist/ dossier contenant votre application Angular compilée.
Création d'un Dockerfile
Créez un Dockerfile à la racine de votre projet avec le contenu suivant :
Dockerfile
FROM node:18-alpine AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install -g @angular/cli
RUN npm install
COPY . .
RUN ng build
CMD ["ng", "serve", "--host", "0.0.0.0"]
FROM node:18-alpine AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install -g @angular/cli
RUN npm install
COPY . .
RUN ng build
CMD ["ng", "serve", "--host", "0.0.0.0"]
﻿
Tester le conteneur Docker localement
Construisez votre image Docker :
Bash
docker build -t todo-frontend .
docker build -t todo-frontend .
﻿
Exécutez le conteneur :
Bash
docker run -p 4201:4200 todo-frontend
docker run -p 4201:4200 todo-frontend
﻿
Ouvrez http://localhost:4201 dans votre navigateur pour vérifier que votre application Angular est servie correctement.
Déploiement sur Back4app
Initialisez un dépôt Git, ajoutez vos fichiers de projet et validez :
Bash
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
﻿
Bash
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
﻿
Bash
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
﻿
Bash
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
﻿
Bash
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
﻿
Connectez-vous à Back4app Web Deployment.
Cliquez sur "Créer une nouvelle application", fournissez le nom de votre projet et sélectionnez votre dépôt GitHub.
Autorisez Back4app et choisissez Dockerfile Deployment.
Confirmez les paramètres de construction et cliquez sur "Déployer" pour commencer le processus de déploiement.
Surveillance de votre déploiement
Après le déploiement, utilisez le tableau de bord Back4app pour:
Voir les journaux pour le débogage.
Surveiller les performances des conteneurs et l'utilisation des ressources.
Déclencher des reconstructions sur de nouveaux commits.
Configurer des domaines personnalisés si nécessaire.
Tableau de bord de déploiement Web Back4app
﻿
Accédez à votre application en direct à https://todoapp-ku5ofg8s.b4a.run/﻿https://todoapp-ku5ofg8s.b4a.run/ .
Test et débogage
Après le déploiement, confirmez que votre frontend Angular communique efficacement avec le backend Back4app :
Vérification de l'API : Utilisez les outils de développement de votre navigateur (F12 → Réseau) pour inspecter les requêtes API.
Opérations de tâches : Ajoutez, complétez et supprimez des tâches via l'interface utilisateur et vérifiez les mises à jour dans le navigateur de base de données Back4app.
Gestion des erreurs : Vérifiez les journaux de la console pour les erreurs et testez les cas limites tels que les soumissions vides.
Tests de performance : Simulez des conditions de réseau lentes à l'aide des outils du navigateur pour évaluer la réactivité.
Meilleures pratiques pour utiliser Back4app avec Angular
Pour optimiser votre application :
Requêtes efficaces : Utilisez des opérations par lot pour gérer plusieurs tâches :
JS
const tasks = [task1, task2, task3];
Parse.Object.saveAll(tasks);
const tasks = [task1, task2, task3];
Parse.Object.saveAll(tasks);
﻿
Requêtes optimisées: Récupérer uniquement les champs nécessaires:
JS
query.select('title', 'completed');
query.select('title', 'completed');
﻿
Gestion de l'environnement: Stocker les clés sensibles dans des variables d'environnement:
Text
NG_APP_PARSE_APP_ID=your-app-id
NG_APP_PARSE_JS_KEY=your-js-key
NG_APP_PARSE_APP_ID=your-app-id
NG_APP_PARSE_JS_KEY=your-js-key
﻿
Sécurité: Utiliser des ACL pour restreindre l'accès aux données:
JS
task.setACL(new Parse.ACL(Parse.User.current()));
task.setACL(new Parse.ACL(Parse.User.current()));
﻿
Déchargement du backend: Tirer parti du Cloud Code pour une logique complexe afin de réduire la charge du frontend.
Conclusion
Vous avez maintenant construit une application de liste de tâches complète en créant un frontend Angular, en l'intégrant avec le backend de Back4app et en le déployant à l'aide de workflows conteneurisés.
Ce tutoriel vous a guidé à travers chaque étape—du développement local au déploiement dans le cloud—assurant une interaction robuste entre votre interface utilisateur Angular et les services backend.
En regardant vers l'avenir, envisagez des améliorations telles que des mises à jour en temps réel, une authentification améliorée et des intégrations tierces.
Pour un apprentissage supplémentaire, visitez la Documentation de Back4app et explorez les ressources de la communauté.
Comment créer un frontend Solid.js et le connecter à un backend
Comment créer un frontend Sveltekit et le connecter à un backend ?