sfeir / angular-200

Exercices for the Angular Sfeir School Training

⚠️ CETTE SCHOOL EST MAINTENANT OPEN SOURCE !!!

Ce Repository ne sera plus suivit, tout a été déplacé ici : sfeir-school-angular

Angular 200

A SFEIR School

Calendrier des formations, liste des formateurs et programme de formation

Installation

• git clone https://github.com/Sfeir/angular-200.git
• cd angular-200
• npm install

Commandes

La formation se déroule step by step, chaque TP ayant deux projets associés dans le dossier steps/, un pour la réalisation de l'excice et un autre avec la solution pour cet exercice, toujours intitulé avec le nom du projet step suivi de -solution.

Chacun de ces projets étant un projet Angular CLI, vous pouvez utiliser les commande Angular CLI habituelles. Exemple : ng test <projet>

Nous avons cependant mis en place différents scripts pour vous faciliter cela. Cf. (package.json)[package.json]. La majorité de ces scripts sont simplement des alias pour une commande Angular CLI. Vous pouvez donc utiliser les options de Angular CLI, mais après l'option -- de npm afin de lui indiquer qu'il s'agit d'options à passer au script et non d'options npm.

• lancer une commande Angular CLI directement via l'installation locale (recommandé): npm run ng <commande ng>
• lancer le server nodejs : npm run server (indispensable pour tous les exercices avec des appels HTTP)
• lancer la Web App : npm run client <projet>
  • en mode prod : ̀npm run client -- --prod`
• lancer les tests unitaires : npm run test <projet>

Voir la documentation d'Angular CLI pour toute autre commande.

angular-200's Issues

Update Angular to 5.0

Données manquantes dans l'API

Lors de la création d'une personne, les données de date requises à partir de la step-18 sont manquantes.

Lors de la MAJ d'une personne, seule les données provenant du formulaire sont enregistrées et elles écrasent la totalité de l'objet alors qu'un merge doit être fait.

Delete deprecated "step-<number>" branches

Following #93, we should delete all the deprecated branches formally used in order to switch between steps.

Split ROUTING par composant

Créer un fichier de route dans chaque composant qui possède du routing et exporter un tableau contenant le routage associé.

Importer chaque fichier dans le routing global et insérer dans le tableau avec le spread operator

Add Slides and codes on unit test

• update slides (how to test a service, a component, a pipe, http)
• build a new step with a example of test for each kind of components

TDD

rethink how tests are presented & used
associated steps haven't been merged in master intentionally

NG2 + NG2-CLI upgrade

Upgrade to latest angular-cli version 20-4, angular version 2.2.1 and update package.json to have good dependencies and modules in project

Rename the project

Angular2 -> Angular

Delete person

Depuis la step-11, le delete à disparu. Rebrancher la fonction en ajoutant dans le template du card-component le (click)="delete(person)"

Erreur sur la HP quand plus de people

Supprimer l'ensemble des personnes dans la liste puis retourner sur la HP => erreur de parsing JSON dans la console

School 300 / 200+

Old Angular 200 bonus chapters have been moved to a new School temporarily untitled "300 / 200+".

Tasks

• Merge steps 22 to 24 (see #103)
• test and review

Fonctionnalité Map

Le lien pour aller sur la map existe dans le menu /locator mais aucune route est associée donc une erreur se produit dans la console.

De même pour le lien sur les cartes des personnes /locator/:id

Code style

update tslint rules
add prettier w/ commit hooks and scripts
run a tslint --fix and prettier --write on master after #93

Utiliser le fichier environnement.ts

Utiliser le fichier de configuration par environnement pour setter les données telle que BASE_URL ou les endpoints des appels API

Bonne pratique pour montrer que l'on peut configurer des données suivant les environnements.

Importer environnement.ts aux endroits nécessitant l'utilisation des constantes d'environnements.

Update dependencies and clean package.json

Follow update.angular.io in order to update to following dependencies to their latest versions:

• @angular/cli
• @angular/core
• @angular/cdk
• @angular/material
• @ngrx/store
• rxjs

Verify potential conflicts with step branches, put all the required dependencies in master, and then clean unused dependencies.

Détail d'une personne manquant

Le lien pour afficher le détail d'une personne est mis en place sur le nom mais la route et la fonctionnalité n'est pas implémentée

Problème dans les liens des managers

Certains ID des managers ne sont pas correctes et ne renvoient sur aucune personne.

Problème rencontré quand on implémente la redirection sur le profil du manager. #9

remove rxjs-compat

in master

Update CLI to 1.3

Déplacer la fonctionnalité `random` du composant `Person` vers `Home`

Suite à l'implémentation du détail d'une personne sur la route /person/:id il n'y a pas l'utilité d'avoir le bouton random à cet endroit qui est une fonctionnalité uniquement accessible sur la Home

Il faut donc déplacer la fonctionnalité et permettre un accès uniquement sur la HP

write a proper README

For now, README.md is just the one generated by default by angular-cli. We should had informations about the course itself (slides link, timing, how to use the steps, etc...).

Merge steps in master

As it is really difficult to maintain and use so many branches, we should only use the master.

To do so, I think the better solution would be to simply use angular-cli 7 (see #92), with a common library and several "step" apps when needed, and no root project (ie. all projects should be in the project folder).

Barrels pour tous les éléments

Ajouter le fichier index.ts à la racine des composants, services, directives et pipes du projet afin d'exporter les données voulues.

Effectuer les imports sur les barrels aux endroits qui utilisent les différents éléments.

Refacto sfeirschool

• Remove getter/setter
• Remove environement (leave it in the service solution)
• Refactoring of rx and mergemap
• Remove ng-upgrade slides
• Update all versions (cli, ng, material...)
• Use new material API (input, icons)
• Use new material API (elements)

Reactive Form erreur

Lors de l'édition d'une personne, un message d'erreur apparait dans la console:

It looks like you are using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.
       
      Example: 
      form = new FormGroup({
        first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
        last: new FormControl('Drew', Validators.required)
      });

Add new HTTP Service

Typage + Portabilité variables + Initialisation + Accessors

Mettre toutes les variables de classe en private, les typer, les initialiser dans le constructor ou ngOnInit et créer des accessors pour leur accessibilité.

Ceci permet de montrer le vrai avantage de Typescript en respectant toutes ces conventions.

Cà donne également un aperçu d'un des bonus demandé dans la certification.