Ulysse est ingénieur applicatif chez AIS, spécialisé dans le développement full-stack, il conçoit et maintient des applications web alliant performance et ergonomie. À travers son travail, il contribue à créer des solutions sur mesure répondant aux besoins des clients et des utilisateurs finaux.
Dans cet article, il vous présente Angular et ses principaux avantages.
Angular est un framework front-end open-source développé par Google.
Initialement lancé en 2010 sous le nom AngularJS, il a été réécrit comme Angular 2+ en 2016. Il permet de créer des applications web modernes, dynamiques et maintenables.
Exemple d’usage : Une application de gestion d’utilisateurs avec pages de profil, tableaux de bord, formulaires réactifs et appels vers une API (Application Programing Interface) peut être entièrement gérée avec Angular, en profitant de la modularité et de la réutilisation de composants.
Voici ce que nous allons explorer dans cet article :
1. Framework complet : routage, formulaires, HTTP, dépendances, modules
2. TypeScript et outils : typage, interfaces, CLI (Command Line Interface)
3. Architecture ajustable : modularité, lazy loading
4. Composants réutilisables : inputs/outputs, réutilisabilité
5. Communauté et support : mises à jour, communauté active
1..Framework complet
Le framework inclut tous les outils pour gérer la navigation, les formulaires, les requêtes HTTP, l’injection de dépendances, la modularité et plus encore.
Exemples de code {
// Routage : définir des ‘routes’ pour rediriger l’utilisateur vers les composants correspondants, optionnellement avec des paramètres pour permettre des comportements dynamiques. Ces routes sont des morceaux d’URL qui permettent d’accéder aux composants. Ex : ‘http://localhost:4200/user/dashboard-user’
const routes: Routes = [
{ path: 'dashboard-user', component: UserListComponent},
{ path: 'edit-user', component: EditUserComponent,
data: {
codeProfils: [“ROLE_ADMIN”, “ROLE_SECRETAIRE”]
}
}
];
// Formulaires : définir des champs avec des valeurs par défaut et des fonctions de validation (comme les champs requis ou les formats des emails)
this.form =this.fb.group({
nom: ['', Validators.required],
prenom: ['', Validators.required],
isPresent: [true, Validators.required],
email: ['', [Validators.required, Validators.email]]
});
// HTTP : requêtes vers les contrôleurs de l’API pour récupérer/créer/modifier/supprimer des données
this.http.get<User>(environment.apiBaseUrl + 'user')
.subscribe(users => { this.utilisateurs = users });
// Injection de dépendances : accéder aux attributs et fonctions d’un service ou d’un module d’Angular pour ne pas dupliquer de code ou pour partager des données entre les composants
constructor(private filterService: FilterService,
private route: ActivatedRoute, private utilsService: UtilsService) {}
// Modularité : regrouper les composants sous des modules pour organiser les différentes parties de l’application, améliorer les performances et n’importer que le nécessaire pour les composants d’un même module
@NgModule({
declarations: [UserListComponent, EditUserComponent ],
imports: [CommonModule, RouterModule]
})
export class UserModule {}
}
2. TypeScript et outils
Angular est basé sur TypeScript, qui apporte typage statique, interfaces, et vérification à la compilation. De plus, la CLI permet d’exécuter rapidement des commandes. Enfin, de nombreuses extensions complètent le framework.
Exemples de code {
// Interface TypeScript : définir la structure des objets complexes pour éviter les erreurs de format
interface Utilisateur {
id: number;
nom: string;
isPresent: boolean;
}
// Le typage statique améliore l’auto complétion dans les IDE
(Integrated Development Environment)
private utilisateur: Utilisateur = {
nom: “XXXXX”, prenom: “Ulysse”, isPresent: true
}
this.utilisateur. => L’IDE va automatiquement proposer d'auto compléter nom, prenom ou isPresent car le type de l’objet utilisateur a été défini. Il est également impossible d’écrire autre chose que ces 3 champs, à moins de modifier l’interface.
// Il permet aussi la détection d’erreurs dès la compilation
private isValid: boolean = true;
this.isValid = ‘oui’ => erreur car un booléen ne peut prendre que les valeurs ‘true’ ou ‘false’, pas une chaîne de caractères
// La CLI Angular permet d’exécuter des commandes pour générer rapidement des composants, services et modules. // Se déplacer dans le dossier du front-end et lancer le projet
cd appli-front puis ng serve
// Générer un nouveau composant nommé ‘profil-utilisateur’
ng generate component profil-utilisateur
}
Extensions
● ESLint / Prettier : améliorer la qualité du code
● Storybook : documenter et tester visuellement les composants
● BetterComments : mettre en forme les commentaires en fonction de leur utilité : info, todo, interrogation ou encore warning
● Angular
Language Service : visualiser et accéder aux informations dynamiques
depuis le template HTML (attributs, méthodes, services, etc…)
3. Architecture ajustable
Angular favorise une architecture modulaire qui se définit comme ceci :
● AppModule : point d’entrée de l’application
● CoreModule : services et logique globale
● SharedModule : composants et directives réutilisables
● [Feature]Module : chaque fonctionnalité principale de l’appli a son propre module, regroupant plusieurs composants qui lui sont liés
Ces regroupements logiques améliorent la lisibilité du code en regroupant les composants par fonction. La maintenance du projet est alors plus facile.
Exemples de code {
// Chaque module peut être chargé à la demande grâce au lazy loading, ce qui améliore les performances et la maintenabilité
{ path: 'admin',
loadChildren: => import(‘./admin.module’).then(m => m.AdminModule)};
path: ‘user’,
loadChildren: => import(‘./user.module’).then(m => m.UserModule)
};
}
4. Composants réutilisables
Dans chaque module, on retrouve des composants. Ils communiquent via des @Input et @Output, et peuvent être réutilisés dans différentes parties de l’application. C’est pour moi l’aspect le plus utile d’Angular car il permet d’économiser énormément de temps et de standardiser des visuels et des logiques à travers l’application. De plus, centraliser le code au même endroit le rend plus facilement maintenable et évolutif.
Exemples de code {
// Dans le composant parent : placer le composant enfant où on veut, lui faire passer des inputs et définir quelle fonction exécuter lorsque les outputs sont émis
<app-user-card
[user]="utilisateur" // Input
(saveEvent)=”onSaveUser()” // Output
></app-user-card>
// Composant enfant : définir les inputs et les outputs
export class UserCard {
@Input() user: Utilisateur;
@Output() saveEvent: EventEmitter<void> = new
EventEmitter<void>();
onSaveUser() {
this.saveEvent.emit();
}
}
}
5. Communauté et support
Angular bénéficie d’une communauté active et du soutien officiel de Google. Les mises à jour régulières garantissent une compatibilité avec TypeScript et les standards du web.
En effet, une version majeure sort tous les 6 mois, Angular 14 a apporté des améliorations sur les templates et les directives strictes. Angular 15, quant à elle, a optimisé le build des projets et la gestion des formulaires.
De plus, la documentation officielle est très complète et permet d’obtenir des détails cruciaux dans le bon développement de son code. Les IDEs tels que VS Code permettent même de visualiser cette documentation directement sur les classes et les fonctions.
Sans parler de l’équipe officielle, des milliers de contributeurs maintiennent des bibliothèques open-source compatibles : NG Bootstrap / PrimeNG / Nebular (composants visuels), ngx-charts (graphiques), ngx-toastr (notifications toast élégantes et non intrusives).
Enfin, des conférences Angular sont organisées dans le monde entier pour discuter des bonnes pratiques et de l’avenir du framework : AngularConnect (Europe), ngConf (USA), NG-DE (Allemagne).
Grâce à ces 5 avantages, il est possible de voir à quel point Angular est un outil formidable pour les projets personnels aussi bien que professionnels.
En effet, un grand nombre de sociétés l’utilisent intégralement ou partiellement dans leurs applications web. Parmi les plus connues, on retrouve : Google, Microsoft, Forbes, PayPal ou encore Samsung !
Cela prouve qu’il répond à un grand nombre de besoins variés, même au plus haut niveau de l’industrie.
Si vous souhaitez en apprendre d’avantage, voici d’autres aspects d’Angular très intéressants également :
- Tests intégrés et qualité logicielle : outils natifs comme Karma et Jasmine pour tester les composants, services et modules, ce qui favorise un code fiable et maintenable.
- Performance et optimisations : compilation AOT (Ahead-of-Time), tree-shaking pour réduire la taille des bundles, et détection des changements performant.
- Internationalisation (i18n) : support intégré pour traduire et adapter les applications à plusieurs langues et formats régionaux.
- Accessibilité (a11y) : bonnes pratiques et directives facilitant le développement d’interfaces accessibles aux personnes en situation de handicap.
- Sécurité intégrée : protection contre les attaques XSS (Cross-Site Scripting) grâce à la gestion sécurisée des templates et au sanitizing.
- Compatibilité mobile et PWA : Angular peut être utilisé avec Angular Service Worker pour créer des Progressive Web Apps performantes, proches des apps natives.
- Écosystème riche : compatibilité avec RxJS pour la gestion réactive, intégration avec des bibliothèques UI (Angular Material, PrimeNG, etc.).
Pour Ulysse, il peut être instructif de mettre Angular en perspective avec un autre framework front-end basé sur TypeScript, comme React. Si ces deux technologies partagent certaines similitudes, elles présentent également des différences notables.
L’essentiel reste de choisir l’outil qui correspond le mieux aux besoins spécifiques du projet et aux compétences de l’équipe.
Article proposé et rédigé par Ulysse CABANES, Ingénieur applicatif chez AIS.
