Angular est un framework de développement web open source maintenu par Google qui encadre le développement d'expériences utilisateur riches sur différentes plateformes: web, PWA, mobile natif et application de bureau.

AngularJS?

Caractéristiques

Structure imposante et rigide
Orienté vers les Single Page Application
templating et data-binding
Encapsulation sous forme de components
Modulaire via l'injection de dépendances
Navigation/Routes front-end
Communauté active

👀 Angular - The Documentary

Components

Exemple d'application

Hiérarchie des components

+----------------------------------------------+
|App {  <----------------+                     |
|                        |                     |
|  name: string          |                     |
|                        |                     |
|  (click) => alert      |                     |
|                        | (confirmed)         |
|  Scoped CSS            |                     |
|                        |                     |
|}                       |                     |
|                        |                     |
|                        |                     |
|               +--------+-------------------+ |
|               |Input {                     | |
|               |                            | |
|               |  name: string              | |
|               |                            | |
|               |  (click) => emit confirmed | |
|               |                            | |
|               |  [(name)] => p             | |
|               |                            | |
|               |}                           | |
|               |                            | |
|               +----------------------------+ |
|                                              |
+----------------------------------------------+

Ouvrir

Prise en main

Votre objectif est de réaliser le tutoriel d'introduction officiel d'Angular. Pour vous favoriser le développement de votre compréhension, des questions/réflexions vous accompagneront au fil de la démarche.

👉 Angular First App

ATTENTION

Suite à la réalisation des étapes du tutoriel(sauf la dernière portant sur HTTP), vous devrez ajouter des fonctionnalités supplémentaires décrites dans le laboratoire 1. Il serait pertinent de survoler le travail attendu avant de compléter le tutoriel.

Environnement de développement

On utilise le langage TypeScript, combiné aux outils de l'écosystème JavaScript modernes:

Node.js / NPM
- Package Manager, sinon NodeSource
Angular CLI
- Sans root ? 👀 NPM Permissions Errors

bash

copier

# Pour permettre le live-reload sans depasser le nombres de fichiers a surveiller

su - -c "echo fs.inotify.max_user_watches=524288 | tee -a /etc/sysctl.conf && sysctl -p"

Extra

👉 Installation

Machine virtuelle H2026, au besoin

Puis valider?

bash

node -v
npm -v
ng version # version actuelle?

# et plus?

Hello World!

ATTENTION

Pour cette étape, utiliser un nouveau projet généré localement sur votre machine.

Copier le contenu des fichiers du tutoriel vers votre fichier correspondant
- src/styles.css
- src/assets/* 👉 public
- src/app/app.ts
- src/app/app.css

SSG, SSR, Pre-rendering?

Optimisation avancée

Assets?

Assets configuration

Structure du nouveau projet, angular.json

{
  ...
  "projects": {
    "labo1": {
      ...
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            ...
          },
        }
      }
    }
  }
}

Accéder au serveur à l'externe?

ng serve

Les autres fichiers, app.component.xyz?

Structure des components
Style Scoping
Templates

Components standalone vs NgModule

Decorator @component
NgModule

Create home component & Create housing location component

Plusieurs fichiers?

Personaliser le générateur pour contrôler la structure créée

bash

copier

ng g c home -t -s --skip-tests --type page

# On peut donner explicitement le chemin de destination à partir de src/app/
ng g c path/to/folder/NAME -t -s --skip-tests --type page
# src/app/path/to/folder/NAME/name.ts

# Flat, pour enlever le sous-dossier
ng g c path/to/folder/NAME --flat -t -s --skip-tests --type page
# src/app/path/to/folder/name.ts

# utiliser le kebab-case, ex: location-detail deviendra la classe LocationDetail

Une balise app-...?

Selectors

✅ Ménage

Profitez-en pour faire le ménage des fichiers inutilisés app.component.___
- Conserver app.routes.ts
- Attention de mettre à jour les utilisations des items supprimés

Create an interface

Models?

On peut voir l'interface comme la forme primitive d'un model pour encadre la structurer des données

bash

copier

ng g i models/location --type model

Organisation des fichiers?

Commencer à réfléchir à l'organisation judicieuses des fichiers à l'intérieur de votre projet.

Pour éviter les imports relatifs interminables: https://www.typescriptlang.org/tsconfig/#baseUrl
"baseUrl": "./src/app" dans compilerOptions

Par type

src
├── app
│   ├── app.component.ts
│   ├── app.config.ts
│   ├── app.routes.ts
│   ├── housing
│   │   ├── housing.page.ts
│   │   └── location.component.ts
│   ├── models
│   │   └── location.interface.ts
│   └── services
│       └── housing.service.ts
├── index.html
├── main.ts
└── styles.css

Par fonctionnalité

src
├── app
│   ├── app.component.ts
│   ├── app.config.ts
│   ├── app.routes.ts
│   ├── housing
│   │   ├── housing.page.ts
│   │   └── housing.service.ts
│   └── location
│       ├── location.interface.ts
│       └── location.component.ts
├── index.html
├── main.ts
└── styles.css

✅ Organisation

Choisir et appliquer une approche d'organisation des fichiers

Input parameter & Property binding & Dynamic Values

Debugger les valeurs?

Les pipes permettent d'appliquer une transformation directement dans les templates

angular

copier

template: `
    <p>it works! </p>
       
    {{ someVariable | json }}
`,

Debugger la mise en page?

Pour simuler une liste de plusieurs locations, dupliquer le component

angular

copier

template: `
    <div>
        <app-location></app-location>
        <app-location></app-location>
        <app-location></app-location>
    </div>
`,

Réactivité? Signaux!

Les signals sont la mécanique moderne de réactivité dans Angular. Ils fournissent des outils simples pour suivre le changements des variables dynamiques:

Initialisation
Lecture, getter
- Lecture sans-dépendance, untracked
Mise à jour, setter
Valeurs dérivées, computed
Suivi des changements, effect

copier

count = signal(0); // Initialisation

console.log('The count is: ' + count()); // Lecture

count.set(3); // Mise à jour
count.update((value) => value + 1); // En considérant la valeur précédente
// La réactivité déclenche le rendu du template

const doubled = computed(() => count() * 2); // Mis à jour automatiquement lorsque count change, réactivité!

effect(() => {
  console.log(`Count changed ${count()}`);
});

✅ Signals

Utiliser les signals pour les mécanique réactive d'affichage de la liste et de la recherche

@for

Directives vs Block?

Directives
Blocks

Services

Injection de dépendances?

Attention, 2 méthodes: constructors et inject

✅ Inject

Utiliser inject pour l'injection de dépendances

Add routing

Attention La structure du nouveau projet créé précédemment est différente du tutoriel, assurez-vous de transposer correctement les modifications.

Voir src/app/app.config.ts

Testez la navigation via la barre d'adresse vers /details/xyz.

Redémarrage du serveur?

Les changements aux configurations TypeScript, Angular, Application demandent de redémarrer le serveur de développement.

Details page

Attribut brut vs binding?

html

<a routerLink="/details/{{ location().id }}">Details</a>

<!-- VS -->

<a [routerLink]="['/details', location().id]">Details</a>

<!-- ??? -->

<a href="/details/{{ location().id }}">Details</a>

Variable du component dans le template?

Les variables membres des components sont également réactives. Les signals représentent l'évolution des mécanismes de change detection d'Angular et offre une approche plus efficace. Donc lorsque que l'état est susceptible de changer au fil du temps, pour déclencher une mise à jour du component, les signals sont à privilégier.

L'utilisation des variables membres pour les états réactifs peuvent amener à des résultats inconsistents dans une application Angular modernes

📚 Your URL is your state

❌ Variables membres

Ne PAS utiliser les variables membres standards pour les comportements réactifs

Integrate Forms

Ajouter un alert de la représentation JSON des données du formulaire.

Reactive vs Template?

Forms

FormGroup vs FormBuilder

FormBuild

FormGroup

profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl(''),
  }),
});

FormBuilder

profileForm = this.formBuilder.group({
  firstName: [''],
  lastName: [''],
  address: this.formBuilder.group({
    street: [''],
    city: [''],
    state: [''],
    zip: [''],
  }),
});

(...)

Events

Add search

Supporter la touche Enter?

Utiliser l'événement submit du formulaire plutôt que le click du bouton

Assurez-vous d'importer FormsModule pour activer les mécaniques de formulaire Angular OU de mettre en place un FormGroup du ReactiveFormsModule
Validez le type="submit" du bouton

(submit) vs (ngSubmit)

Les Template-driven Forms, via la directive ngForm et les Reactive Forms via la directive [formGroup], supportent l'événement (submit) en plus de (ngSubmit).

✅ Soumettre la recherche

Implémenter l'événement submit pour soumettre la recherche

James Hoffman

Développement d’applications d’entreprise 2

Développement d’applications d’entreprise 2

1.2- Angular

Caractéristiques

Components

Exemple d'application

Prise en main

Environnement de développement

👉 Installation

Hello World!

Create home component & Create housing location component

✅ Ménage

Create an interface

✅ Organisation

Input parameter & Property binding & Dynamic Values

✅ Signals

@for

Services

✅ Inject

Add routing

Details page

❌ Variables membres

Integrate Forms

Add search

✅ Soumettre la recherche

HTTP

❌ Ne PAS faire!