Java : Formats are generally not synchronized.

From JavaDoc :

https://docs.oracle.com/javase/7/docs/api/java/text/Format.html

Formats are generally not synchronized. It is recommended to create separate format instances for each thread. If multiple threads access a format concurrently, it must be synchronized externally.

 It allows for formatting (date -> text), parsing (text -> date), and normalization

Date formats are not synchronized. It is recommended to create separate format instances for each thread. If multiple threads access a format concurrently, it must be synchronized externally.

Example : https://www.callicoder.com/java-simpledateformat-thread-safety-issues/

If using Java 8, it's better to use thread-safe

DateTimeFormatter

Git: merge ff vs --no-ff vs --ff-only

git merge --no-ff branch : force git à créer un commit avec un msg à garder dans l'historique
git merge --ff-only : force git à faire un merge uniquement s'il peut le faire avec un ff, sinon il doit abandonner.

liens:
http://www.dynamic-mess.com/developpement/git-merge-fast-forward-rebase-culture-git/
https://tech.m6web.fr/tentative-d-explication-des-fast-forward-sous-git

JavaScript : pass-by-reference or pass-by-value ?

 Data type manipulation in JavaScript

Type	Copied by	Passed by	Compared by
Number	Value	Value	Value
Boolean	Value	Value	Value
String	Immutable	Immutable	Value
Object	Reference	Reference	Reference

line : https://docstore.mik.ua/orelly/webprog/jscript/ch11_02.htm

Spatial locality and linkedlist

Spatial locality refers to the use of data elements within relatively close storage locations. Sequential locality, a special case of spatial locality, occurs when data elements are arranged and accessed linearly, such as, traversing the elements in a one-dimensional array.

Angular : Style Guide

https://angular.io/guide/styleguide

JavaScript :Test d’égalité

https://dorey.github.io/JavaScript-Equality-Table/
https://www.sitepoint.com/javascript-truthy-falsy/

Comparaison des objets par adresse et non pas par valeur, exemple :

var a = {a:1};
var b = {a:1};

isNaN != NaN

Nombres :

isNaN(NaN) => true
isNaN(undefined) => true => best practice = Number.isNaN(

https://stackoverflow.com/questions/25176459/is-number-isnan-more-broken-than-isnan

Self signed certificate in certificate chain (how to disable strict-ssl?)

set NODE_TLS_REJECT_UNAUTHORIZED=0

Angular : --dry-run

https://www.amadousall.com/my-favourite-angular-cli-commands-and-options/

Angular : JiT vs AoT

https://sebastienollivier.fr/blog/angular/angular-jit-vs-aot

Git : Avoid git push --force //--force-with-lease

https://evilmartians.com/chronicles/git-push---force-and-how-to-deal-with-it

Git : Comment éviter 'git add' ?

git commit -am 'added new benchmarks'

L'ajout de l'option -a à la commande git commit ordonne à Git de placer automatiquement tout fichier déjà en suivi de version dans la zone d'index avant de réaliser la validation, évitant ainsi d'avoir à taper les commandes git add

Comprendre la ViewEncapsulation dans un Component Angular

L'encapsulation des vues :

Shadow DOM vient des standards des Web Components, il permet d'encapsuler une partie du DOM et des styles CSS., ce qui permet d'appliquer un script ou un style sur un élément précis.

https://medium.com/@simonb90/comprendre-la-viewencapsulation-dans-un-component-angular-83decae8f092

Angular : Route Configuration

https://angular.io/tutorial/toh-pt5

router-outlet

https://www.techiediaries.com/angular-router-multiple-outlets/

Using Parameter in Routes :

https://www.techiediaries.com/angular-router/
https://www.techiediaries.com/angular-router-routerlink-navigate-navigatebyurl/

Exemple de paramètre dynamique : il faut importer ActivatedRoute et ParamMap (est un observable)
et initialiser ActivatedRoute dans le constucteur :

constructor(private route:ActivatedRoute ){}

ngOnInit() {   this.route.snapshot.paramMap.get('name')  }

const routes : Routes = [
{path: 'home', component: HomeComponent },
{path: 'login', component: LoginComponent},
{path: 'film/:name', component: FilmDetailCompoenent}

]

Angular : Module

Les paramétres de @NgModule:

Permet d’organiser une application en modules fonctionnels ou techniques 

--declarations : définit tous les éléments embarqués dans le module (composants, directives, pipes, etc.).

--Exports : Les composants que nous voulons rendre disponible aux autres

--Imports : Permet d'importer les modules dont nous avons besoin au niveau du module courant.

--Providers : Liste les services utilisés par le composant

--Bootstrap : définit une référence vers la vue principale (Composant racine de l'application)

Création d'un module avec la CLI Angular: ng g module login

 Après la creation il faut ouvrir le module :

 import {LoginModule} from './login/login.module';

 app.module.ts et dans @NgModule -> imports ajouter LoginModule

Angular : Création d'un service

 -- Comment utiliser?

--Services.

--Injection des dépendances.

Injection des dépendances:

Le principe de ce pattern est de casser les dépendances entre les éléments.

Donc avoir une couplage faible entre les élements et ainsi permettre une meiulleur maintenance. et facilite l'ecriture des tests.

Dans le cadre d’Angular, un composant peut avoir besoin d’un service, on dit alors que le composant est dépendant du service. Le framework Angular joue alors le rôle de gestionnaire de dépendances.

Angular implemente une fonctionnalité qui permet d'utiliser ce mecanisme.

-- Le Framework Angular récupere les informations du service dont-il a besoin à partir de la proprietes "provider" du décorateur @NgModule, qui est le niveau le plus haut de l'application.

Lorsqu’un service est déclarée à ce niveau de l’application est généralement un singleton, à chaque fois qu’un élément du Framework demande ce service, ce sera la même instance qui lui sera retournée. Les dépendances déclarées à ce niveau agissent donc comme des singletons.

-- Si nous voulons crées des instances unique à chaque composants, il faut utiliser la propriété "provider" du décorateur @Component

Services Angular:

Dans l'architecture Angular L’objectif d’un service est de contenir toute la logique métier de l’application.

-- Le service doit avoir une seul responsabilité.

-- On peut injecter un service à l'aide l'annotation @Injectable.

 Ce décorateur n’est donc pas obligatoire lorsque le service ne possède aucune dépendance, mais le mettre dans tous les cas est une bonne pratique que nous vous conseillons.

 Création d'un service : cd src/app/login/

 Angular CLI : ng g service authetification

 crée : authentification.service.spec et authentification.service.ts

 Annotée @Injectable

 Pour utiliser ce service il faut le fournir dans la proprietes "providers" de @NgModule du module LoginModule.

 Donc, il faut import {AuthentificationService} from './authentification.service';

 Puis : providers: [AuthentificationService], dans @NgModule

 Pour pouvoir utiliser le service dans authentification.component, il faut :

 import {AuthentificationService} from '../authentification.service';

 Puis, dans le constructeur : constructor(public authentificationService: AuthentificationService)

 Nous mettons l'accesseur à public pour qu'il soit visible par tout les composants.

 Maintenant, nous allons utiliser le service et lui demander si un utilisateur et login ou non?

 this.authentificationService.isLoggedIn(this.username);

 Maintenant, créons la variable username:

 username = 'Naoufal';

 // Variable qui affiche le message retournée par le service

 isLoggedIn: boolean = false;

  ngOnInit() {

    this.isLoggedIn = this.authentificationService.isLoggedIn(this.username);

  }

  

  Pour afficher la variable isLoggedIn, nous devons modifier le fichier authetification.component.html

  Composant d'authentification !

  {{username}} -- {{isLoggedIn}}

-- Les informations sont afficher correctement.

Pour s'assurer que l'appel au service se fait correctement, nous allons changer le username.

Angular : Création d'un composant

 cd src/app/login/

/!\ Le composant ne doit contenir que la logique de présentation.

 ng g component authentification || ng g c authentification

 Dans le module LoginModule on voit que declarations: [AuthentificationComponent] a été ajouté.

 Pour la rendre exploitable par les autres modules on doit l'ajouter au paramétrés "Exports":, dans login.module.ts

 Donc : exports: [AuthentificationComponent] dans @NgModule

 Maintenant nous allons personnaliser le css et html de notre component.

 --authentification.component.css => p{ color : green}

 --authentification.component.html => Login component

 Pour savoir le component tag de votre application il faut ouvrir :

 --authentification.component.ts

 puis, dans @Component le paramétre selector : dans notre cas, c'est :

 app-authentification

 copier, coller dans app.component.html

 --Relancer "ng serve"

Angular : La vue et le two-way data binding

Le "two-way" Data Binding : 

C'est une combinaison du Property Binding et du Event Binding sous une unique annotation.
Dans ce cas là, le component se charge d'impacter le DOM en cas de changement du modèle, et le DOM avertit le Component d'un changement via l'émission d'un évènement.

Le mécanisme se rapproche du fameux ngModel Angular 1, mais avec des algorithmes de Data Binding différents.

Pour pouvoir afficher et éditer le nom du produit, la syntaxe ngModel est nécessaire.
Il suffit d’assigner la propriété du produit avec ngModel pour que la liaison de donnée soit effective. Si l’utilisateur édite le champ dans l’input, la variable dans le code sera modifiée, et la réciproque est aussi vraie.

Cela veut dire que si une méthode ou un mécanisme est amené à modifier le nom du produit, l’utilisateur verra cette modification immédiatement dans son interface.

'ngModel' en détail :

Pour comprendre exactement ce qui se passe lorsqu’on utilise l’instruction [(ngModel)], il faut décortiquer la structure de sa syntaxe.

Les deux crochets [ ], représentent le property binding (la liaison à la propriété).
Cela signifie que la valeur circule depuis le modèle (dans le code) vers ce qui est affiché dans la vue.
C’est tout simplement le one-way (unidirectionnel) data binding du modèle vers la vue.

Les deux parenthèses ( ), quant à elles, représentent l’event binding (la liaison à l’événement).
C’est l’inverse du property binding, car c’est la vue qui va notifier le modèle d’un événement.
C’est un one-way data binding de la vue vers le modèle dans ce cas.

Ainsi, en utilisant les deux ensembles, un two-way data binding est créé et le flux circule dans les deux sens.

Pour plus d'information : https://vsavkin.com/two-phases-of-angular-2-applications-fda2517604be

Angular : Data binding

Laison des données : Ce "data binding" va permettre de synchroniser les données entre les composants et les vues.

Une modification d’une propriété d’un composant sera automatiquement reflétée sur l’interface, et inversement une modification d’un contrôle HTML mettra à jour les propriétés du composant.

http://www.learn-angular.fr/le-data-binding-angular/ 

Binding supporter par Angular (DOM <->Component):

<->

Angular a défini quatre sortes de Data Binding pour synchroniser le template et le Component:

Mécanisme du one-way binding

Veut dire que le flux du données part d'une data source à la vue 

1. {{value}} :  Interpolation template=> Ce mécanisme permet de modifier le DOM à partir du modèle, si un changement est intervenu sur une valeur de ce dernier. On peut faire des calculs ou appeler des fonctions défini dans le composant à l’intérieur {{value}}. les limitations de l’utilisation : https://angular.io/guide/template-syntax
2. [propriete] = "valeur" : Ce mécanisme permet de valoriser une propriété d'un composant ou d'une directive à partir du modèle, si un changement est intervenu sur une valeur de ce dernier. Interpolation vs porpriete binding : https://www.codementor.io/adekunleoyaniyi/interpolation-vs-property-binding-in-angular2-eu1tzbyn4
3. (evenement) = "fonctionHandler" : Ce mécanisme permet d'exécuter une fonction portée par un Component suite à un évènement émis par un élément du DOM.
4. [(ng-model)] = "propriete"

--Event Binding (Laison d'evenement) : permet à une application Angular d’exécuter du code, des actions, lorsqu'un événement est levé.

il suffit de décorer de parenthèses le nom de l’événement DOM à écouter et de fournir la méthode à exécuter sur cet événement

L'objet $event : est disponible dans la variable $event fournie par Angular. 

C’est cet objet qui contient la donnée que nous voulons récupérer. 

Une première solution est de passer cet objet $event dans une méthode qui est définit dans le composant, ensuite d’aller chercher l’entrée utilisateur à l’intérieur.

Angular : Angular CLI

Création de l'application avec Angular CLI.

-- scaffolder de la part de gOOGLE :  exposant un ensemble de commandes permettant d’accélérer le processus d’initialisation du projet.

-- facilite la création des applications Angualr

-- npm install -g @angular/cli 
-- npm update @angular/cli en cas de probléme  
-- ng new "le nom du projet" --routing 
-- cd "nom du projet" 
-- ng serve --host 0.0.0.0 --port 4200