Quel est le principe de cette formation ?
Nous allons travailler côte à côte pendant une journée, à créer une application de randonnées, afin de changer de l'habituelle "todo list".
A l'issue de cette demi-journée ensemble, vous aurez appris à :
- créer une Single Page Application (SPA) donnant donc l'illusion de comporter plusieurs pages (comme c'est le cas de "gmail" par exemple)
- créer un système de routage via des urls "simples" et des url qui comportent un paramètre (permettant afficher le détail d'une randonnée)
- requêter un service web distant grâce à un "Observable" et son "subscriber"qui, vous le verrez, sont bien plus que les remplaçants des promises
- développer votre propre système de recherche grâce à un filtre que nous créerons de A à Z (ce qu'on appelle un "custom pipe" dans le monde d'Angular 2)
- créer un formulaire, mais surtout gérer la validité de chaque champ, puis la validité du formulaire dans son ensemble (avec ajout conditionnel de classes CSS, activation/désactivation de bouton de soumission ... etc ...)
- savoir créer des animations sans recourir à des librairies externes
- intégrer des librairies externes dédiées à Angular 2 telles que angular2-google-maps
A l'issue de cette formation, vous pourrez en toute confiance vous lancer dans la création de vos propres applications web Angular 2 ou intégrer une équipe qui utilise le framework Angular 2.
Quels seront les points techniques abordés ?
D'un point de vue technique vous apprendrez à :
- créer une application comportant d'abord un seul module (pour raisons pédagogiques) puis plusieurs modules car vous travaillerez plus souvent sur des applications architecturées de la sorte
- créer des modules comportant components, pipes et services
- maîtriser les quatre formes de data binding (du template vers votre code et inversement)
- faire communiquer des components de parent vers enfant et d'enfant vers parent (oui, Input et Output decorators seront de la partie)
- créer des routes simples puis avec paramètres, redirection et catch all (pour vos 404)
- créer des services et les injecter, occasion idéale de comprendre et de mettre en oeuvre l'injection de dépendance
- effectuer des requêtes http et comprendre les fondamentaux du "reactive functional programming" avec une mise en oeuvre concrète via RxJS (création d'un observable, abonnement, utilisation des opérateurs qui vont serviront dans tous vos projets)
- comprendre et savoir utiliser les pipes fournis par Angular 2 mais surtout créer votre propre "pipe"
- créer des animations à l'aide de triggers, states, transitions, keyframes
- utiliser Google Maps d'une façon propre à Angular 2. Concrètement, nous mettrons en oeuvre l'import d'un module, puis l'utilisation d'input et d'output decorators qui vous permettront d'ajouter une carte à une application web Angular 2, de créer des markers, de gérer les events émis dans une google map
Pas de blabla inutile
15 minutes indispensables en début de formation pour vous aider durant l'installation et l'initialisation d'un nouveau projet.
Attention, ce n'est pas un film : la passivité et les popcorns ne vous rendront pas service (les pop corns à la rigueur mais préférez les fruits). Car même si la formation peut être suivie en une demi journée, comptez au moins une demi journée de pratique personnelle de plus, voire deux afin d'acquérir le savoir faire de tout ce qui est couvert.
A qui est destinée cette formation ?
J'ai pensé à vous, développeuses/développeurs ou étudiant(e)s qui ont peu de disponibilité le soir et le week-end. Je vous ai donc épargné les détours qui vous auraient fait perdre votre temps. Tout comme vous, je consacre chaque année temps et énergie à la veille techno. Et quand il s'agit d'apprendre un framework, je recherche en priorité - pour ne pas dire exclusivement - les formations qui me permettent d'avoir au final une application qui marche, plutôt que des cours magistraux ou des petits bouts d'exemple sans lien les uns avec les autres. C'est cette approche concrète qui a servi de fil directeur à la création de cette formation. J'ai conscience qu'il faut pouvoir s'interrompre fréquemment quand les obligations pro, scolaires ou personnelles l'exigent. C'est pourquoi chaque vidéo dure de 2 à 10 minutes (souvent 5) pour vous permettre de pratiquer par petites doses si vous n'avez que 15 minutes de veille techno à consacrer en soirée ou pendant la pause déjeuner.
Quels sont les pré-requis
- avoir déjà créé une application web comportant HTML et CSS. Si vous savez faire une requête AJAX ou consommer un web service, c'est encore mieux
- avoir des bases en JavaScript, si possible dans sa version ECMAScript 2015 (mais je vous détaillerai les nouveautés d'ES 2015 lorsque je les utiliserai). TypeScript sera présenté au fil de l'eau et ne vous posera donc aucun problème, même si c'est la première fois que vous vous y mettez. A condition, de nouveau, de connaître les bases du JavaScript qu'un développeur web connaît généralement (les types, les fonctions, les propriétés ...)
- avoir un peu pratiqué Twitter Bootstrap. Mais si vous avez des bases en CSS et savez ce qu'est une classe CSS et comment l’ajouter à tag HTML, ça devrait bien se passer
Nota: il n'est ABSOLUMENT PAS nécessaire de connaître AngularJS (la version précédente d'Angular) tant AngularJS et Angular 2 sont différents.
Outre les pré-requis ?
Bien à connaître au préalable, mais pas obligatoire :
- quelques lignes de commandes dans une console (en gros, ne pas être allergique aux lignes de commandes)
- npm et node.js
- connaître un langage orienté objet. Peu importe que ce soit C#, Java ou Python. En gros, être familier des concepts de classe, méthodes, interfaces. Si generics et decorators vous parlent, c'est encore mieux mais pas indispensable
- avoir joué avec un framework JavaScript moderne (AngularJS, React/Reduc, Meteor ...) ou au moins un framework MVC moderne
Si vous déjà une première expérience en Angular 2 ou 4 ?
Si modules, components, services et pipes vous sont déjà (très) familiers, vous pouvez aller plus loin avec 5 mini projets pour se perfectionner sur Angular 2