0% ont trouvé ce document utile (0 vote)
32 vues69 pages

Ressources Formation Angular Les Fondamentaux

La formation Angular - Les fondamentaux couvre les bases du développement d'applications Angular, incluant les Web Components, l'architecture d'application, et les templates. Elle s'adresse aux développeurs web et architectes, et aborde des concepts clés tels que les services, les directives, et l'injection de dépendance. Le projet TodoList est utilisé comme exemple pratique tout au long de la formation.

Transféré par

Elvice Freddy TOSSOU
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
32 vues69 pages

Ressources Formation Angular Les Fondamentaux

La formation Angular - Les fondamentaux couvre les bases du développement d'applications Angular, incluant les Web Components, l'architecture d'application, et les templates. Elle s'adresse aux développeurs web et architectes, et aborde des concepts clés tels que les services, les directives, et l'injection de dépendance. Le projet TodoList est utilisé comme exemple pratique tout au long de la formation.

Transféré par

Elvice Freddy TOSSOU
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Alphorm.

com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Angular (v4.0)

Frédéric GAURAT
Une formation

Cursus Angular

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 1
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Plan
Introduction
• Les Web Components
• Architecture d’une application Angular
• Une première application Angular
• Travail avec les templates
• RxJS
• Les formulaires
• Travail avec HTTP
• Le Routage
• Le projet TodoList
Une formation
Conclusion

Public concerné

Développeurs Web et Architectes

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 2
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Connaissances requises

Une formation

A vous de jouer !

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 3
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Présentation du projet
de la formation

Frédéric GAURAT
Une formation

Plan

Le projet Todo List


Le serveur et la base de données
Présentation des outils

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 4
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Le projet Todo List

Une formation

Le serveur et la BDD

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 5
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Présentation des outils

Microsoft Visual Studio Code


Ng-cli (https://cli.angular.io/)

Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 6
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Création de balises
personnalisées

Frédéric GAURAT
Une formation

Plan

Les Web Components


Templates
Shadow DOM
Custom elements

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 7
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Les Web Components

Ensembles de spécifications (W3C) définissant


des API permettant la création de balises
réutilisables

Une formation <alphorm>…</alphorm>

Templates

La spécification des Templates, décrit la


création de fragment HTML
Ces fragments ne sont pas chargés au
démarrage de la page
Ces fragments sont instanciés plus tard

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 8
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Shadow DOM

La spécification Shadom DOM décrit


comment encapsuler les éléments ou les
styles de vos composants (rendre privé)

Une formation

Custom elements

La spécification Custom elements définit


comment concevoir et utiliser des
nouveaux types d’élément DOM

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 9
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Exemple HelloWorld

Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 10
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Architecture
d'une application Angular

Frédéric GAURAT
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 11
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Merci

Les Modules

Frédéric GAURAT
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 12
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Plan

Organiser une application avec des


modules
Le module root
Structure d’un module

Une formation

Organiser via des modules

Un module définit la façon dont les


éléments d’une application s’intègrent
Une formation
C’est un top-level component

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 13
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Le module root

Une application a au moins un


module principal
Ce module est utilisé pour initialiser
l’application

Une formation

Structure d’un module

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 14
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Merci

Les Components

Frédéric GAURAT
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 15
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Plan

Les Components
Les Templates
Metadata
Le Data binding
Une formation Conclusion

Les Components

Un Component contrôle un fragment de


l’interface utilisateur
Il est défini dans une classe
La classe interagit avec la view via ses
propriétés et ses méthodes

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 16
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Les Templates

Les templates définissent la partie visible


de votre component
Un template ressemble à un fichier HTML
avec quelques différences : la template
syntax

Une formation

Metadata

Une simple classe ne suffit pas pour décrire


un component
Il faut compléter la classe avec un decorator
(TypeScript)
Les metadatas sont un lien entre component
et template
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 17
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Metadata

Une formation

Relations entre Components

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 18
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Le Data binding

{{value}}

Component
DOM [property] = ‘value’

(event) = ‘handler’

[(ng-model)] = ‘property’

Une formation

Conclusion

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 19
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Merci

Les Directives

Frédéric GAURAT
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 20
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Plan

Introduction
Les 2 types de Directives
Structural directives
Attribute directives

Une formation

Introduction

Les directives s’utilisent dans les templates


Les components sont des directives
(AngularJS) mais sont considérés comme
des éléments à parts entières
Nous utilisons des directives pour
structurer nos templates et pour changer le
comportement d’un élément
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 21
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Les 2 types de Directives

Structural directives
Attribute directives

Une formation

Structural directives

Les directives structurelles


permettent de modifier le layout en
manipulant les éléments du DOM

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 22
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Attribute directives

Les directives attribut sont utilisées


pour modifier l’apparence ou le
comportement d’un élément

Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 23
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Les Services

Frédéric GAURAT
Une formation

Les Services

La notion de service regroupe valeurs,


fonctions ou fonctionnalités nécessaires à
votre application
En règle générale, c’est une simple classe
implémentant une fonctionnalité

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 24
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Les Services

Un service sera injecté dans un component


Il aura la responsabilité de décharger le
component de tout ce qui ne concerne pas
l’interface utilisateur

Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 25
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Notion d’injection
de dépendance

Frédéric GAURAT
Une formation

Plan

L’inversion de contrôle
L’injection de dépendance
L’injector

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 26
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

L’inversion de contrôle

Une formation

L’injection de dépendance

L’injection de dépendance est le moyen


de fournir à un component un objet
construit avec toutes ses dépendances

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 27
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

L’injector

L’injector est sollicité par Angular lors de la


création d’un component
Il maintient un conteneur d’instance
précédemment créée
Si le service demandé n’existe pas, il est alors
instancié et passé en paramètre au constructeur
du component
Sinon il est directement passé en paramètre au
constructeur du component
Une formation

L’injector

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 28
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Merci

Création du projet

Frédéric GAURAT
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 29
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Plan

HelloWorld !
QuickStart seed
Test de l’application

Une formation

HelloWorld !

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 30
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

QuickStart seed

Installation de l’environnement
Téléchargement des fichiers
npm install
Les fichiers essentiels
app/app.component.ts
app/app.module.ts
main.ts
Une formation
package.json

Test de l’application

Lancement de l’environnement de test


npm run start
Présentation de browser-sync

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 31
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Merci

Démarrer “from scratch”


avec angular-cli

Frédéric GAURAT
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 32
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Plan

Création d’un projet avec angular-cli


Générer un composant
Tester une application localement
L’outil webpack
Les autres outils
Une formation

Projet avec angular-cli

https://cli.angular.io/

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 33
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Générer un composant

La commande ng generate

Une formation

Tester une app localement

La commande ng serve

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 34
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

L’outils webpack

Une formation

Les autres outils

Lancement des tests unitaires


Vérification du code avec lint

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 35
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Merci

Notion d’interpolation

Frédéric GAURAT
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 36
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Plan

Interpolation
Template expressions

Une formation

Interpolation

Une interpolation permet l'évaluation de variables ou


d'expressions à l'intérieur d'une chaîne de caractères
littérale
Avec Angular l’interpolation se place entre accolades
Le texte entre accolade est une template expression
Exemples :
La somme de 1 + 1 est {{1 + 1}}
Hello {{name}}
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 37
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Interprétation d’une Interpolation

Evaluation du contenu
conversion du résultat en une
chaîne de caractères
Assignation du résultat par
property binding (modification du
DOM)
Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 38
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Utilisation des bindings

Frédéric GAURAT
Une formation

Plan

Le principe de binding
Les différents types de binding
Attribut HTML et propriété DOM
Les cibles du binding

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 39
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Le principe de binding

Direction du binding

Une formation

Les types de binding

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 40
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Attribut HTML et propriété DOM

Un attribut HTML est différent


d’une propriété DOM !
Un attribut HTML initialise une
propriété DOM
Une propriété DOM peut varier, pas
un attribut HTML
Une formation

Les cibles du binding

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 41
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Merci

Directives, Pipe et
template variable

Frédéric GAURAT
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 42
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Plan

Notion de directives structurelles


Quelques directives Angular
L’opérateur Pipe
Les variables de template

Une formation

Directives structurelles

Elles sont responsable de la structure du


DOM
Elles s’appuient sur la spécification
Templates du W3C
Pour en faciliter l’utilisation on utilise une
microsyntax préfixé par un ‘*’
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 43
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Quelques directives Angular

*ngIf : ajout ou suppression conditionnel


d’élément DOM
*ngFor : permet de répéter un template
en s’appuyant sur une liste
*ngSwitch : permet d’afficher différentes
vues en fonction d’une condition
Une formation

L’opérateur Pipe

Reprend l’idée du pipe Unix : ( symbole |


)
La sortie d’un processus devient l’entrée
du suivant
Permet la transformation du résultat
d’une expression
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 44
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

L’opérateur Pipe

hello HELLO

uppercase
{{« hello »|uppercase}}

Une formation

Les variables de template

Les variables de template sont des


références à des éléments dans le DOM
(html, component ou directives)
Elles sont préfixées par un ‘#’

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 45
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Merci

La programmation réactive
avec RxJS

Frédéric GAURAT
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 46
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Plan

Qu’est-ce que la programmation réactive?


Le pattern Observer
Le pattern Iterator
Introduction à RxJS
Une formation

La programmation réactive

Un modèle de programmation visant à conserver


une cohérence d'ensemble en propageant les
modifications d'une source réactive (modification
d'une variable, entrée utilisateur, etc.) aux éléments
dépendants de cette source
Source : wikipedia

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 47
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

La programmation réactive

Exemple avec Excel

Une formation

Le pattern Observer

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 48
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Le pattern Iterator

Une formation

Introduction à RxJS

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 49
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Introduction à RxJS

Rx Pattern = Observer Pattern + Iterator Pattern

Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 50
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Utilisation de RxJS

Frédéric GAURAT
Une formation

Plan

Observable
Operators

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 51
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Observable

Observable sur un tableau


Observable sur un Event

Une formation

Operators

Un operator est une fonction qui crée un


nouvel observer basé sur l’observer de
base en y appliquant la fonction

rxmarbles.com

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 52
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Operators

Operator map()

Operator filter()

Operator merge()

Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 53
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Construction et validation
d’un formulaire

Frédéric GAURAT
Une formation

Plan

Construire un formulaire
La directive ngModel
Surveiller les changements
Styles CSS et état de formulaire
Le directive ngSubmit
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 54
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Construire un formulaire

Les 2 types de constructions de formulaires


• Template based
• Code based
La class Model
Le form component

Une formation

La directive ngModel

Le template du formulaire
Le binding bi-directionnel (ngModel)
La directive ngForm

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 55
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Surveiller les changements

ngModel surveille les changements et y affecte des


classes
Le champ a été visité : ng-touched (ng-untouched)
La valeur du champ a changé : ng-dirty (ng-pristine)
La valeur du champ est valide : ng-valid (ng-invalid)

Une formation

Styles CSS et état de formulaire

Appliquer des styles CSS aux états


renvoyés par ngModel

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 56
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Le directive ngSubmit

Exécuter du code lors de la soumission du


formulaire
Empêcher la soumission si le formulaire n’est
pas valide

Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 57
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Ajax et Angular

Frédéric GAURAT
Une formation

Plan

Utiliser le HttpModule
Communiquer avec le serveur

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 58
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Le provider Http

Le module doit importer le HttpModule


Le service Http est utilisable par injection de
dépendance

Une formation

Communiquer avec le serveur

Simuler une web API


Recevoir des données
Envoyer des données
Quelques opérateurs RxJS

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 59
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Merci

Principe de routage,
configuration et directive

Frédéric GAURAT
Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 60
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Plan

Fonctionnement du router
Les éléments de routage
Configuration

Une formation

Fonctionnement du router

Le router Angular reprend le principe de base du


navigateur
Il interprète une URL pour naviguer vers la bonne vue
Il peut interpréter les liens pour naviguer vers la
bonne vue
Il log l’historique de navigation pour assurer le
fonctionnement des boutons back et forward

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 61
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Les éléments de routage

Router outlet
Router links
Router state

Une formation

Router outlet

Endroit réservé où Angular doit placer la vue

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 62
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Router links
Directive routerLink : Permet de référencer une
route dans le template
Directive routerLinkActive : Permet d’ajouter
automatiquement une classe si la route est active

Une formation

Router state

Angular maintient un arbre des routes


activées
Cet Arbre est le RouterState
Chaque route de cet arbre est accessible et
propose des méthodes de parcours

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 63
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Configuration

Concrètement, le router doit avoir au moins une route


configurée
Les routes sont stockées dans un tableau de Route
Ce tableau est ensuite passé au module RouterModule :
- RouterModule.forRoot() (pour des routes principales)
- RouterModule.forChild() (pour des sous-routes)

Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 64
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Le projet TodoList

Frédéric GAURAT
Une formation

Plan

Le projet Todo List


L’approche orientée composant
Développement

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 65
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Le projet Todo List

Une formation

L’approche orientée composant

Une formation

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 66
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Démonstration

Création du projet avec angular-cli


Configuration de la base de données
(deployd)
Création des composants

Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 67
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Conclusion

Frédéric GAURAT
Une formation

Bilan
Les Web Components
Architecture d’une application Angular
Travail avec les templates
Programmation Reactive avec RxJS
Les formulaires
Travail avec HTTP
Le Routage
Une formation
Le Projet TodoList

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 68
Alphorm.com-Support de la 15/05/2017
Formation Angular - Les
fondamentaux

Prochaine formation

Angular : Avancé

Une formation

Merci

TOUTE UTILISATION EN
DEHORS DE ALPHORM EST
INTERDITE 69

Vous aimerez peut-être aussi