IDE
INTEGRATED DEVELOPMENT ENVIRONMENT / ENVIRONNEMENT DE
DÉVELOPPEMENT INTÉGRÉ
ID
Identifiant unique de génération automatique généralement
nombre non nul .
O.S :
Operating System :système d’exploitation exemple:Windows , Unix ,
Macos
UI/UX :
User Interface / User eXperience
HTML
HYPER TEXT MARKUP LANGUAGE
Langage de balisage qui permet la création des
éléments des pages web
CSS
CASCADING STYLE SHEET / FEUILLE DE
STYLE EN CASCADE
Langage de styling et mise en forme des pages
web .
Il existe 3 méthodes d’intégrations du CSS
1. External :
-créer une fichier ( .css) dans un dossier CSS .
-déclaration des classes dans le fichier (.css) .
-dans le fichier (.html) importer le fichier (.css) avec la balise<link href= ‘ ’ /> puis faire
l’appel de la classe dans la balise avec l’attribut class= ‘nom-de-la classe’.
2. Internal
Pas de declaration du fichier (.css) , dans le même fichier HTML entre la balise <head> et
<body> déclarer les classes css dans la balise <style> ……</style>
3. Inline
Pas de declaration du fichier (.css) , dans le même fichier HTML , dans la balise appeler le
style desiré appliqué avec l’attribut style= ‘‘….’’
il existe 3 méthode d'intégration de BS :
1-TÉLÉCHARGEMENT
Site officiel : [Link]
Download .zip puis extraction du dossier
Copier les deux fichiers [Link] et [Link] et les coller dans le projet .
2- méthode CDN (contenent delevery network )
Site officiel : [Link]
Copier et coller les deux liens dans <head> du html .
3—méthode NPM (node package manager )
TEMPLATE
Ensemble des interfaces graphique réutilisable préparées par des
développeurs basés sur BS (responsive design ) contenant des
projet .
BOOTSTRAP « BS »
C’est un framework (cadre de travail ) CSS open source avec
Responsive Design (adaptation du code à n’importe quelle résolution
ou taille de l’écran. )qui facilite le styling et la mise en page des
pages web grâce à une squelette prédéfinie contenant des fichiers
CSS et JS utilisons le grid system .
Framework
cadre de travail prédéfinie contenant ensembles de modules (bibliothèque
des fonctions prédéfinies)
JAVASCRIPT :JS
Langage de programmation qui permet les animations et les interactivité des
pages web en transformant l’algorithme en un langage de machine . c’est le seul
langage qui fournit le coté backend(BE) et frontend (FE) en même temps .
Il existe plusieurs versions du JS tel que:
Js natif , type script , ecmascript ,jsx ..(même objectif mais différents syntaxe )
JSON
JAVASCRIPT OBJECT NOTATION
Format spécifique des données , ensemble d’attributs et des valeurs .
[Link]
Fonction JS prédéfinie pour convertir un objet en une chaine de caractères .
[Link]
Fonction JS prédéfinie pour convertir une chaine en un objet .
.VALUE
Fonction JS prédéfinie pour récupérer une valeur du ( .html) vers ( .JS).
.PUSH
Fonction JS prédéfinie pour insérer un objet dans un tableau
LOCAL STORAGE (LS)
Un espace de stockage des données locaux sur le navigateur contenant
un tableau initialement vide (key,value)
il existe 4 fonctions prédéfinies de LS :
· setItem(key,value) : pour enregistrer et ajouter un objet dans LS.
· getItem(key) : récupérer les données .
· removeItem(key) : supprimer une clé.
· Clear ( ) : pour effacer le tout .
Git Bash
Terminal qui permet d'exécuter toutes les commandes
Angular
un framework front-end JS développé par Google, principalement
utilisé pour la création d'applications web dynamiques et interactives.
Component
classe exportable ayant une partie Graphique
Environnement d’Angular ?
node JS : NPM:
environnement d'exécution du node package manager
code JS en dehors du Browser
Gestionnaire des packages
http//localhost:
hyper text transfert protocol : serveur locale (sur machine)
<app-root></app-root>
sélecteur Angular prédéfinie pour faire un appel au composant principal
<router-outlet></router-outlet>
Balise Dynamique qui injecte automatiquement des composants selon le
path (doit être déclaré dans :[Link])
classe
modélisation / représentation d’1 objet de la vie réel ayant des attributs
et des méthodes (prototype)
SPA
Single Page Application , tout le projet est généralement rendu dans une
seule page web, souvent nommée [Link].
Routing
la navigation entre les composants
Data Binding
la liaison entre la partie logique et la partie graphique dans un
component
4 méthode :
(event binding)
{{string interpolation}}
.html .ts
[property binding ]
[(2 way data binding )]
TDF:
Template Driven Form
ngForm: mot technique TDF pour donner un ID au formulaire .
ngSubmit : mot technique TDF pour faire appel à une méthode
(déclaré dans .ts)dans .html .
ngModel : mot technique TDF pour donner un attribut aux Inputs .
Reactive Form
formGroup: mot technique Reactive Form pour donner un ID au
formulaire .
formControlName: mot technique Reactive Form pour donner
un nom a chaque Input .
(click) : mot technique Reactive Form pour faire appel à une méthode
(déclaré dans .ts)dans .html .
ngOnInit( ) { } :
méthode Angular prédéfinie qui s'exécute
automatiquement lors de l’appel d’un
composant par son sélecteur
@Input :
décorateur qui assure le passage des données
d’un composant parent a un composant child .
constructor( ) { }
méthode Angular prédéfinie pour la création
des instances
Router :
type prédéfinie qui assure la navigation
entre les composant (.navigate)
ActivatedRoute :
type prédéfinie pour la gestion des params
from path (.params)
les directives structurelle :
*ngFor: coditionnelle Graphique .
*ngIf : boucle Graphique.
les directives d’attributs:
*ngStyle:
*ngClass :
les 4 parties de [Link] :
● declarations [ :// les noms des classes des
composants générées // ];
● imports:[ ://modules (prédéfinies angular)//];
● providers[ ://services// ];
● bootstrap:[ appComponent]
les pipes
une classe qui assure le formatage des
données côté Template.
appel d,une pipe : {{ valeur | nomDuPipe}} .
il existes deux types des pipes :
Pipes Personnalisés et Pipes Natifs:Json ,
KeyValue ,Percent , Decimal ,TitleCase
,UpperCase ,LowerCase ,Currency ,Date….
DOM
Document Object Model
(structure/ arborescente d’une page web )
transform( ){ }
méthode prédéfinie angular qui s'exécute
automatiquement lors de l’appel d’un pipe par
son nom
service
une classe qui assure la communication entre la partie Front End et
la partie Back End (send request + retourner response ).
Action HTTP rôle URL
Get ( @B.E ) récupérer tous les obj [Link]
Get ( @B.E ) récupérer l’Obj par un “ID” [Link]
Post ( @B.E , Obj ) envoyer un objet [Link]
Delete ( @B.E ) Delete obj par “ID” [Link]
Put (@B.E , Obj ) modifier un obj [Link]