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.
+----------------------------------------------+
|App { <----------------+ |
| | |
| name: string | |
| | |
| (click) => alert | |
| | (confirmed) |
| Scoped CSS | |
| | |
|} | |
| | |
| | |
| +--------+-------------------+ |
| |Input { | |
| | | |
| | name: string | |
| | | |
| | (click) => emit confirmed | |
| | | |
| | [(name)] => p | |
| | | |
| |} | |
| | | |
| +----------------------------+ |
| |
+----------------------------------------------+On utilise le langage TypeScript, combiné aux outils de l'écosystème JavaScript modernes:
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.
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.
Extra
# 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"node -v
npm -v
ng version # version actuelle?
# et plus?ATTENTION
Pour cette étape, utiliser un nouveau projet généré localement sur votre machine.
src/app/app.component.ts vers votre fichier correspondantng g c home -t -s --skip-tests --type page
# Flat
ng g c my/directory/home --flat -t -s --skip-tests --type pageapp.component.___
On peut voir l'interface comme la forme primitive d'un model pour encadre la structurer des données
ng g i models/location --type interfaceCommencer à réfléchir à l'organisation judicieuses des fichiers à l'intérieur de votre projet.
"baseUrl": "./src/app"
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.csssrc
├── 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.cssPour simuler une liste de plusieurs locations, dupliquer le component
template: `
<div>
<app-location></app-location>
<app-location></app-location>
<app-location></app-location>
</div>
`,Attention La structure du nouveau projet créé précédemment est différente du tutoriel, assurez-vous de transposer correctement les modifications.
Testez la navigation via la barre d'adresse vers /details/xyz.
Les changements aux configurations TypeScript, Angular, Application demandent de redémarrer le serveur de développement.
<a routerLink="/details/{{ location.id }}">Details</a>
<!-- VS -->
<a [routerLink]="['/details', location.id]">Details</a>
<!-- ??? -->
<a href="/details/{{ location.id }}">Details</a>Ajouter un alert de la représentation JSON des données du formulaire.
Utiliser l'événement submit du formulaire plutôt que le click du bouton