Angular & Spring Boot

Bootcamp sur 5 moins

Pourquoi Angular & Spring Boot ?

Angular et Spring Boot, utilisés ensemble, permettent de créer des applications web modernes. Angular se charge de l’interface utilisateur dynamique, tandis que Spring Boot facilite le développement du côté serveur. La communication entre les deux est simplifiée, et cela offre une séparation claire entre le frontend et le backend. Cela rend le développement plus rapide et productif, avec des fonctionnalités de sécurité robustes. Grâce à leurs vastes communautés respectives, cette combinaison offre une base solide pour créer des applications web efficaces et fiables.

 Angular est un framework open source développé par Google pour la création d’applications web dynamiques côté client. Il utilise TypeScript et offre des fonctionnalités telles que la liaison bidirectionnelle des données, l’injection de dépendances et une architecture modulaire.

 Spring Boot simplifie le développement d’applications Java en se basant sur le framework Spring. Il privilégie la convention plutôt que la configuration, permettant une création rapide d’applications prêtes pour la production. Avec un serveur web intégré, la configuration et le déploiement sont simplifiés.

A la fin de bootcamp Full Stack et Angular
Spring Boot Vous apprenez comment

01 Maintenir des application JEE et Angular

02 Maitriser l’architecture SOA

03 Utiliser les outils d’industrialisation JAVA EE

Semaine 1— semaine 4

1. Introduction à la formation Spring Boot

Présentation générale de Spring
Spring Framework 5, nouveautés et architecture
Qu’est-ce que Spring Boot ? Avantages et principes de fonctionnement
Conteneur léger : concepts, cycle de vie
Inversion de contrôle et injection de dépendances

2. Spring Boot et configuration

Structure projet et options pour la configuration
Familiarisation avec les fichiers application.properties/.yml
La prise en main de l’IDE Configurations de Spring, création d’une première application en utilisant Spring Boot.

3. Programmation Orientée Objet

Rappel des principes de la programmation orientée objet (L’encapsulation, Le polymorphisme, L’héritage)
Avantages et inconvénients de cette approche

4. Architecture MVC

Retour sur le pattern MVC
Spring MVC, architecture et composants utiles
Utiliser les annotations @Component, @Autowired, @Qualifier…
Les méthodes d’injection de dépendances Création et configuration des
différentes couches (Controller, Service, Repository, model…)
Accès aux
données avec SpringData
Introduction à Spring Data
La notion de Repository
Les retours sur JPA et Hibernate
La gestion des transactions : notions et mise en œuvre Accès à la base de
données avec un exemple CRUD

5. Architecture REST

Retour sur le style d’architecture logicielle REST
Contrôler les codes de retour HTTP Développement et déclarations de
services personnalisés

6. Spring Security

Vue d’ensemble, quel problème Spring Security résout-il ?
Sécuriser des routes et configurer l’authentification Mise en œuvre de la
sécurité sur l’application web développée précédemment.

Semaine 5 — semaine8

1. Introduction à la formation Angular

Présentation d’Angular
ECMAScript 6
Découvrir TypeScript

Premier pas : comprendre la structure du framework

Concepts fondamentaux et vue d’ensemble de l’architecture : composants, services, vues…
Comment est organisée une application Angular ?
Organisation du code avec les modules : les conteneurs NgModules et
l’encapsulation
Templates, les nouvelles syntaxes
Fonctionnement du databinding pour gérer les données dynamiques
Rôles des pipes et directives
Principes de l’injection de dépendances avec Angular Configuration de
l’environnement NodeJS et Angular CLI.

Composants, templates et liaison de données (databinding)

Cycle de vie et structure des Angular components
Démarrer un projet et créer une hiérarchie de composants
Les mécanismes d’interaction entre composants
Ajouter des styles aux composants
L’interpolation, event binding et property binding
Le two-way data binding
Création de classes Création de composants Angular, ajout de styles et
mise en œuvre des différents types de databinding

Routing et navigation

Présentation d’Angular
ECMAScript 6
Découvrir TypeScript
Vue d’ensemble du routage Angular
Déclarer et configurer des routes et URLs
Paramètres des routes
Gérer les redirections Définition des routes et navigation dans une
application.

Formulaires

Les différentes façons de créer des formulaires : template-driven ou
reactive forms ?
Valider et gérer les erreurs
Créer des validateurs personnalisés et les ajouter à un formulaire Création d’un formulaire selon les deux approches possibles, enregistrement
des contrôles

Directives et pipes

Directives structurelles (ngFor, ngIf et les ngSwitch)
Directives d’attribut (ngModel, ngStyle, ngClass)
Construire ses propres directives
Utiliser les pipes natifs (DatePipe, UpperCasePipe, CurrencyPipe…)
Créer ses propres pipes Utilisation de directives, manipulation des pipes

Services et injection de dépendances

Créer un service basique
Injecter les services fournis par Angular
Retour sur le système d’injection de dépendances Développement et déclarations de services personnalisés.

Les Observables et la bibliothèque RxJS

Angular et RxJS (Reactive Extensions for JavaScript)
Comprendre et utiliser les observables
Les principaux opérateurs
Gestion des requêtes HTTP avec le module HttpClient Utilisation des observables, interactions avec un serveur

Semaine 9 — semaine12

Réalisation d’un projet