--------------Utilisation de Visual Studio Code en tant qu’éditeur---------------------------

    Ouvrez Git Bash.

    Tapez la commande suivante :

    git config --global core.editor "code --wait"



--------Installation of typeScript-----------
 npm init -y
 npm install -g typescript
 
-----about_Execution_Policies------------
-[Open] powerShell
- [type] Set-ExecutionPolicy Unrestricted
- [Answer] yes


-------------typeScript------------------
*extension =>.ts eg: hello.ts
compilation: tsc file_name.ts


--------------Angular----------------
-install last version of nodejs
-install CLI of angular : npm i -g @angular/cli      (cli = command line interface)
-angular version : ng v
create new angular project:
-go to the folder you want
-type: ng new name_of_project --style=scss --skip-tests=true    (--style=scss => we use scss | --skip-tests=true => we do it without tests unitaires)

compilation/lanch of the project : ng serve   (after the end of the compilation, you got the url for the browser. For each futur modification, while the server is running, it's take in accompte )

creation of component : ng generate component name_of_component | ng g c name_of_component


/*************************Add bootstrap on Angular project******************************/
1 ) install angular:  npm install --save bootstrap
2 ) on angular.json : projects->architect->build>styles : add  "node_modules/bootstrap/dist/css/bootstrap.min.css",
3 ) on angular.json : projects->architect->build>scripts : add  "node_modules/bootstrap/dist/js/bootstrap.js",

---------------------ARCHITECTURE ANGULAR-----------------------------
Une application Angular peut être vue comme une arborescence de components
Angular is like xml architecture
<root> becomes <AppComponent>
	<page></page> <otherComponent>
	<page></page>
	<page></page>
</root>
-files are in <<src>> folder
-index.html is the main page and should have, in body, only components(presents in sub folder <<app>>)

Each component is linking to 3 files : 
	-file.html(template) => les donnees du template proviennent du component
	-file.ts (component) => declarations des donnees
	-file.scss (css)
	
Pour utiliser un component dans une application Angular, il faut le déclarer dans un module – AppModule étant le module principal de l'application, tout comme AppComponent est le component principal.

<p>{{title}}</p> => {{}} => string interpolation permet de faire appel à la propriete du component dans le template (comme <?php echo $var?>)

<img [src]="imageUrl" [alt]="title">  => [] attribut binding  associe les valeurs des propriétés TypeScript aux attributs de l'élément HTML

 <button (click)="onAddSnap()">Oh snaps !</button> () permet d'aasocier un evenement au template
 
  <p *ngif="faceSnap.location" >{{faceSnap.location}}</p> *ngif permet d'afficher le paragraphe si faceSnap.location existe
  <p *ngif="faceSnap.location==='Paris'" >{{faceSnap.location}}</p> *ngif permet d'afficher le paragraphe si faceSnap.location existe et est egal à <<Paris>>
  
  <app-face-snap *ngFor="let faceSnapElementInArray of faceSnaps" [faceSnap]="faceSnapElementInArray"></app-face-snap> *ngFor permet d'afficher tous les paragraphes presents dans la liste faceSnaps
  
  <span [ngStyle]="{color:'rgb(0,'+faceSnap.snaps+',0)'}">🤌 {{faceSnap.snaps}}</span>  [ngStyle] permet d'ajouter un style local à un element html
  <div class="face-snap-card" [ngClass]="{snapped:isSnapped}"> [ngClass] permet d'ajouter une class suivant une condition (ici la class <<snapped>> est rajoutée si le boolean isSnapped vaut true )
  
  DIRECTIVE ([ngStyle] | [ngClass] | *ngif | *ngFor) est une classe TypeScript qui ajoute du comportement supplémentaire à un élément HTML (qui peut aussi être un component).
  
  PIPE (lowercase | titlecase |uppercase |date |number |percent |currency) permet de formater l'affichage d'une donnée sans modifier la donnée sous-jacente
  <h2>{{ faceSnap.title | lowercase }}</h2> 
<h2>{{ faceSnap.title | uppercas }}</h2>
<h2>{{ faceSnap.title | titlecase }}</h2>
<p>{{ 4346234.36 | number: '1.0-0' }}</p> => au moins 1 chiffre pour les entiers et seulement 0 chiffre apres la virgule ( en gros pour arrondir et permet de pas utiliser Math.round())
<p>{{ 4346234.36 | number: '1.0-1' }}</p> => au moins 1 chiffre pour les entiers et seulement 1 chiffre apres la virgule
<p>{{ 0.336 | percent }}</p> => affiche en pourcent
<p>{{ 0.336 | percent: '1.0-1' }}</p> => affiche en pourcent avec seulement 1 chiffre apres la virgule
<p>{{ 344.36 | currency }}</p> affiche le montant en dollar
<p>{{ 344.36 | currency: 'EUR' }}</p> affiche le montant en euro
<p>{{ 344.36 | currency: 'EUR' : 'code' }}</p> affiche le montant en euro mais sans le symbole de l'euro

Pour les Single Page Applications (ou SPA), chaque url correspond à un component via le <<routing>>

Un Observable est un objet qui émet des valeurs au cours du temps