Cet ouvrage s'adresse aux développeurs qui souhaitent apprendre à développer une application web avec le Framework JavaScript de Google : Angular. Le lecteur est placé dans un cadre méthodologique Agile Scrum lui permettant d'assimiler les mécanismes de développement dans un contexte professionnel.

Rédigé en deux parties, l'auteur détaille dans la première partie du livre les concepts du langage JavaScript, basiques comme plus avancés, en les illustrant par des exemples. Le lecteur peut ainsi se familiariser avec l'installation de l'IDE, les types de données, les boucles et conditions, les fonctions ou encore la programmation orientée objet avec JavaScript. Un chapitre consacré à TypeScript permet au lecteur de faire le lien entre le langage JavaScript et le framework Angular.

Dans la seconde partie, l'auteur étudie ensuite pas à pas et par la pratique les mécanismes d'Angular avec le développement d'une application « fil rouge » étoffée de chapitre en chapitre grâce aux nouveaux concepts acquis. Le lecteur peut ainsi mettre en oeuvre les composants et leur hiérarchie, les gabarits, les API, les formulaires, le routage, la programmation réactive, les tests unitaires et de bout en bout, l'authentification, l'exploitation d'une base de données avec FireBase et l'intégration continue avec Travis pour aboutir très rapidement à une application pleinement fonctionnelle. Plusieurs outils sont également étudiés pour être en mesure de qualifier et auditer son propre code et ainsi gagner en productivité.

Des éléments complémentaires sont disponibles en téléchargement sur le site www.editions-eni.fr.



Quizinclus dans
la version en ligne !

• Testez vos connaissances à l'issue de chaque chapitre
• Validez vos acquis

Téléchargements

• Des fichiers complémentaires (1,21 Mo)

Avant-propos

1. Introduction

Historique

1. Internet
   1. 1. Un réseau pour les lier tous
   2. 2. TCP/IP
   3. 3. Navigateurs et WWW
2. JavaScript
   1. 1. Valider un formulaire
   2. 2. ECMAScript
   3. 3. DOM
   4. 4. Déclinaisons
   5. 5. JavaScript et le web
3. Angular
   1. 1. AngularJS
   2. 2. Angular 2
   3. 3. Versions suivantes

Installation

1. Introduction
2. Visual Studio Code
   1. 1. Installation
      1. a. Windows
      2. b. Linux
   2. 2. Interface
3. Google Chrome
4. git
5. Node.js
6. npm
7. Angular CLI
8. Structure de cet ouvrage

Types de données

1. Commandes Git
2. Introduction
3. Déclaration de variable
4. Nombres
   1. 1. Types de nombres
   2. 2. Opérations élémentaires
   3. 3. Nombres à virgule
   4. 4. Syntaxe simplifiée
      1. a. Incrémentation et décrémentation
      2. b. Opérations mathématiques courantes
5. Chaînes de caractères
   1. 1. Déclaration et initialisation
   2. 2. Concaténation
6. Tableaux
   1. 1. Déclaration et initialisation
   2. 2. Accès
   3. 3. Modification
   4. 4. Fonctions utiles
      1. a. push et unshift
      2. b. pop et shift
      3. c. indexOf
7. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Boucles et conditions

1. Commandes Git
2. Conditions
   1. 1. Opérateurs logiques
      1. a. ET
      2. b. OU
      3. c. NON
      4. d. Évaluation
      5. e. Priorité des opérations
   2. 2. Syntaxe
      1. a. if
      2. b. if... else
      3. c. Opérateur ternaire
      4. d. switch
3. Boucles
   1. 1. while
      1. a. Syntaxe
      2. b. Vers l’infini et au-delà
      3. c. Exemple
      4. d. Version alternative
   2. 2. for
      1. a. Syntaxe
      2. b. FizzBuzz
      3. c. Optimisation pour les indices de listes et d’objets
4. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Fonctions

1. Commandes Git
2. Introduction
3. Fonctions simples
   1. 1. Syntaxe
   2. 2. Portées
      1. a. Portée globale
      2. b. Portée locale
4. Fonctions et arguments
   1. 1. Syntaxe de fonction avec arguments
   2. 2. Appel de fonction avec arguments
   3. 3. Valeur par défaut des arguments
   4. 4. Nombre d’arguments indéfini
5. Retour
   1. 1. Syntaxe
   2. 2. Utilisation d’un retour de fonction
6. Fonctions ou méthodes
7. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

JavaScript orienté objet

1. Commandes Git
2. Définition
3. Création d'un objet
4. Bob le constructeur
5. Propriétés et méthodes
6. Classes
   1. 1. Constructeur
   2. 2. Méthodes
      1. a. Getters et setters
      2. b. Méthodes et attributs statiques
7. Mise en pratique
   1. 1. Énoncé
      1. a. Pokémon
      2. b. Attaque
      3. c. Combat
   2. 2. Correction
      1. a. Pokémon
      2. b. Attaque
      3. c. Combat

TypeScript

1. Commandes Git
2. Historique
3. Intégrer TypeScript à un projet web
   1. 1. npm
   2. 2. Création d’un fichier TypeScript
4. Typage
   1. 1. JavaScript et les erreurs de typage
   2. 2. TypeScript et le typage
   3. 3. Erreurs de compilation
   4. 4. Types
5. Énumérations
   1. 1. Déclaration
   2. 2. Utilisation d’une variable de type énumération
6. Fonctions
   1. 1. Généralités
   2. 2. Fonctions particulières
      1. a. Fonctions anonymes
      2. b. Fonctions lambda ou fléchées
7. Classes et héritage
   1. 1. Classe minimale
   2. 2. Attributs
   3. 3. Accesseurs
   4. 4. Constructeur
   5. 5. Méthodes
   6. 6. Héritage
8. Modules
9. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Angular CLI - Composants

1. Commandes Git
2. Introduction
3. Création d'une nouvelle application Angular
   1. 1. Génération d’un nouveauprojet avec AngularCLI
   2. 2. Architecture d’un projet généré
4. Composants
   1. 1. Classe TypeScript
   2. 2. Décorateur
   3. 3. Métadonnées
   4. 4. Ajout dans le module principal
   5. 5. Utilisation d’un composant
5. Angular CLI et la création de composants
   1. 1. Génération d’un composantavec AngularCLI
   2. 2. Méthodes intervenant dans le cycle de vied’un composant Angular
6. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Gabarits

1. Commandes Git
2. Introduction
3. Bootstrap
4. Interpolation
5. Événements
6. Directives
   1. 1. Directives de structure
      1. a. Conditions
      2. b. Itérations
      3. c. Choix multiples
   2. 2. Directives de données
      1. a. Classes
      2. b. Style
7. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Mise en forme dans les gabarits

1. Commandes Git
2. Introduction
3. Tuber des chaînes de caractères
4. Tuber des nombres
   1. 1. DecimalPipe
   2. 2. PercentPipe
   3. 3. CurrencyPipe
5. Tuber une date
6. Tuber un objet ou un dictionnaire
   1. 1. KeyValuePipe
7. Tuber un tableau ou une chaîne de caractères
   1. 1. SlicePipe
8. Tuber des objets provenant d’API externes
   1. 1. JsonPipe
   2. 2. AsyncPipe
9. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Hiérarchie des composants

1. Commandes Git
2. Architecture hiérarchique
3. Transmission père-fils
4. Transmission fils-père
5. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Services

1. Commandes Git
2. Introduction
3. Dépendances
4. Services
5. Exemple de service
6. CRUD et les services
7. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Formulaires

1. Commandes Git
2. Introduction
3. Créer un formulaire HTML
4. Créer un formulaire Angular
   1. 1. Méthode 1 : à l’intérieurd’un gabarit
      1. a. FormsModule
      2. b. Interpolation
      3. c. Lier le formulaire à un modèle
   2. 2. Méthode 2 : à l’intérieurd’une classe TypeScript
      1. a. ReactiveFormsModule
      2. b. Créer un formulaire TypeScript
      3. c. Lier chaque champ HTML au formulaire TypeScript
      4. d. FormBuilder
5. Soumettre un formulaire
6. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Gestion avancée des formulaires

1. Commandes Git
2. Introduction
3. Validation des champs de saisie
   1. 1. Dans un formulaire basé sur un template
   2. 2. Dans un formulaire basé sur une classe TypeScript
4. Validateurs personnalisés
5. Mise en forme selon les validateurs
   1. 1. NgModel et ses booléens de comportement
   2. 2. Mise en forme selon validateurs
      1. a. Signaler une erreur dans un champ par un message
      2. b. Encadrer un champ
6. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Routage

1. Commandes Git
2. Introduction
3. Angular CLI et le routage
4. href != routerLink
5. app-routing.module.ts
6. Routes
   1. 1. Route joker
   2. 2. Routes paramétrées
      1. a. Navigation dans le gabarit
      2. b. Navigation dans le composant TypeScript
      3. c. Utilisation du paramètre de l’URLdans un composant
7. Hiérarchie dans les routes
   1. 1. Création de quatre composants
   2. 2. Routes enfants
   3. 3. Mise en place des composants enfants
8. Permissions
9. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Programmation réactive

1. Commandes Git
2. Introduction
3. Promesse
   1. 1. Instancier une promesse
   2. 2. Fonction de rappel
4. Observable
   1. 1. Généralités
   2. 2. rxjs
5. HTTP : HyperText Transfer Protocol
6. Mise en pratique
   1. 1. Énoncé
      1. a. Générations
      2. b. Pokémons
   2. 2. Correction
      1. a. Générations
      2. b. Pokémons

Tests unitaires

1. Commandes Git
2. Introduction
3. Jasmine
   1. 1. Tests unitaire basiques
   2. 2. Fixture
   3. 3. Lancer les tests unitaires
4. Tests unitaires d'un composant Angular
   1. 1. Classe TypeScript
   2. 2. Gabarit
   3. 3. Dépendances
5. Karma
6. Couverture de code
7. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction

Tests de bout en bout

1. Commandes Git
2. Introduction
3. Protractor
   1. 1. Objet page
   2. 2. Test e2e
4. Tester les actions utilisateurs
   1. 1. Modifier l’objet page
   2. 2. Ajouter deux tests
5. Et à part cliquer ?
   1. 1. Au niveau du navigateur
   2. 2. Au niveau d’un élément
6. Cas concret : une liste et des boutons
7. Mise en pratique
   1. 1. Énoncé
   2. 2. Correction
      1. a. Page principale
      2. b. Page Générations
      3. c. Page Pokémons
      4. d. Lancement des tests

Outils complémentaires

1. Introduction
2. Compodoc
   1. 1. Installation
   2. 2. Génération
3. WakaTime
   1. 1. Fonctionnement
   2. 2. Installation
   3. 3. Badge
4. Travis
   1. 1. Configuration
   2. 2. Navigateurs web sans interface graphique
   3. 3. Tuning
   4. 4. Une intégration, plusieurs actions
   5. 5. Badge
5. Codacy
   1. 1. Plug-in GitHub
   2. 2. codacy.com
   3. 3. Configuration
   4. 4. Badge
6. Firebase
   1. 1. Prérequis
      1. a. Firebase > Angular
      2. b. Angular > Firebase
   2. 2. Authentification
      1. a. Modes de connexion
      2. b. Service Angular d’authentification
   3. 3. Connexion à une base de donnéesFirebase
      1. a. Création de la base de données
      2. b. Définition du modèle
      3. c. Implémentation du service
7. Code Konami