Angular 2 par la pratique
4.3 (141 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
723 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 par la pratique to your Wishlist.

Add to Wishlist

Angular 2 par la pratique

La meilleure façon d'appendre un nouveau framework, c'est de créer une application avec.
4.3 (141 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
723 students enrolled
Created by Samir Medjdoub
Last updated 5/2017
French
Curiosity Sale
Current price: $10 Original price: $145 Discount: 93% off
30-Day Money-Back Guarantee
Includes:
  • 7 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
Requirements
  • - HTML/CSS - Les bases du JavaScript - Un peu de Twitter Bootstrap
Description

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 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 trigger, state, transition, keyframe 
  • 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.

Who is the target audience?
  • Développeurs web en poste, freelances, étudiants en informatique, .
Students Who Viewed This Course Also Viewed
Curriculum For This Course
79 Lectures
07:14:44
+
Prendre en main le framework en modifiant l’existant
3 Lectures 15:39


Parcourir une collection à l’aide de la structural directive *ngFor
07:00
+
Passer à la vitesse supérieure en créant module, component et service
3 Lectures 21:53
Créer notre premier module supplémentaire
05:01

Créer un component
05:38

Créer un service et l’injecter
11:14
+
Effectuer une requête http
2 Lectures 19:16
Reactive programming dans le contexte de requêtes http + operators map() et do()
10:27

S'abonner à un Observable à l'aide de sa méthode subscribe()
08:49
+
Implémenter le routage
4 Lectures 28:42
Créer notre nouveau module home.module
06:35

Mettre en oeuvre le routage
10:03

Afficher nos randonnées dans “hike-list-component.html”
03:16

Créer un lien avec routerLink et un menu de navigation avec twitter bootstrap
08:48
+
Le routage avancé
4 Lectures 24:47
Créer une route avec un paramètre et le récupérer via le service ActivatedRoute
11:09

Créer un lien incluant un paramètre
04:26

Créer un lien incluant un paramètre (suite) + ECMAScript 2015 template literals
03:10

Naviguer grâce au service "Router" + créer un event handler via l'"event binding
06:02
+
Utiliser les pipes existants et créer un custom pipe
3 Lectures 18:35
Utiliser un pipe fourni par Angular 2
01:09

Le two way binding à l'aide de [(ngmodel)]
05:34

Créer un custom pipe grâce au décorateur @Pipe et à l’interface PipeTransform
11:52
+
Créer et gérer un formulaire
10 Lectures 54:30
Créer notre nouveau module “contact.module.ts”
11:11

Création d'un formulaire (HTML + twitter bootstrap)
06:54

Récupérer les saisies de notre formulaire
08:34

Valider les champs de notre formulaire
04:10

Comprendre les propriétés untouched/touched, pristine/dirty et valid/invalid
01:57

Tester la validité d'un champ + gérer l'affichage d'un message à l'aide de *ngIf
04:38

Utiliser "[class]" pour ajouter conditionnellement une classe CSS
03:06

Tester la validité de tout un formulaire + activer conditionnellement le bouton
04:46

Gérer l'événement de soumission du formulaire
03:36

Créer un service de gestion de formulaire
05:38
+
Gérer la communication entre components parents et enfants
4 Lectures 29:05
Création d'un component "hike-summary" correspondant à notre domaine métier
05:38

@Input pour passer des données d'un component parent vers un component enfant
07:01

@Output pour passer des données d’un component enfant vers un component parent
11:15

Ajouter un style à un component avec les propriété styles et styleUrls
05:11
+
Les animations
7 Lectures 42:07
Principe des animations + création d’un div ouvrant et fermant
10:37

Gérer le délai d’attente avant animation + transition à partir de l’état void
02:46

Les divers types de easings
01:40

Synchroniser le texte d’un bouton avec l’état d’une animation
01:57

Animations plus complexes à l'aide des keyframes + création d'une galerie animée
09:11

Animations plus complexes à l’aide des keyframes + création d’une galerie animée
12:18

Evénements propres aux animations
03:38
3 More Sections
About the Instructor
Samir Medjdoub
4.4 Average rating
339 Reviews
1,381 Students
7 Courses
Développeur web et mobile hybride

Plus de 10 années d’expérience en programmation web dans des entreprises clientes publiques (SNCF, URSSAF, EDF...) et privées (Iron Mountain, Jouve, CDiscount...), avec comme comme fil conducteur la conscience qu’il est bien plus facile de rester sur la vague que de tenter de remonter après s’être laissé submerger. Fidèle à cette stratégie,  j’ai ainsi pris la vague Angular 2 dès les versions alpha et bêta fin 2015, celle de React en 2016 pour voir ce que le principal concurrent  proposait, celle de Node.js il y a cinq années de cela et ai eu la chance d'évoluer dans des sociétés qui avaient été parmi les premières en France à adopter MongoDB, conjointement aux bases de données relationnelles. Les développeuses et développeurs JavaScript (Front, Back ou Fullstack !) ont de très beaux jours devant eux : investissez dans les frameworks, plateformes et librairies JavaScript qui vous ouvriront de belles opportunités en 2017.