Synchronisation des données entre la vue et le model (binding des données)

Synchronisation des données entre la vue et le model (binding des données) :

Dans ce tuto, nous allons voir comment faire pour synchroniser les données entre la partie vue (html) et model (controller).

Qu’est-ce que le data-binding ?

Tout simplement, c’est la liason entre la partie vue de votre application (view) et la partie logique (model). Donc, pour bien comprendre le principe, nous allons les directives suivantes.

 1. ng-bind :

Cette directive est utilisée pour faire la liason entre un élément HTML (view) et une propriété dans la partie logique (model).
N.B : Cette directive est utilisée juste pour l’affichage des propriétés, on peut l’utiliser par exemple dans une balise <p>

Exemple :

Remarque :

On peut utiliser l’expression {{}} au lieur de la directive ng-bind, cidessous un exemple :

2. ng-model :

On peut dire que la directive ng-model joue le rôle inverse de la directive ng-bind, cette dernière nous permet de lire une donée entrante par un utilisateur et l’envoyer au model pour traitement, on peut l’utiliser avec les balises (input, select, textarea,…).

Exemple :

 

 

Développer un portfolio en HTML, CSS et JavaScript

Dans cette serie de vidéos, nous allons développer ensemble un portfolio en HTML, CSS et JavaScript.

La première vidéo sera consacrée à la mise en place de l’environnement et la strcture du projet :

La deuxième vidéo vous montre comment installer les fonts à utiliser dans la création du portfolio ainsi que font awesome:

Dans cette troisième vidéo, nous allons développer la page d’accueil de notre portfolio :

L’objet History

L’objet History :

L’objet History représente un tableau d’URLs visitées par l’utilisateur. En utilisant cet objet, vous pouvez naviguer entre les pages, par exemple(aller à la page précédente, suivante, etc…).

N.B : vous pouvez accéder à l’objet History soit en utilisant l’objet window ou bien directement, ci-dessous un exemple :

– Les propriétés de l’objet History : en fait on a qu’une seule propriété, c’est la propriété length, cette dernière nous permet de retourner la longueur des URLs.

– Les méthodes de l’objet History :

  • back(); : la méthode back nous permet d’aller à la page précédente.

  •  forward(); : cette méthode nous permet d’aller à la page suivante.

  • go(3); : si cette méthode prend un nombre positif, par exemple 3 dans ce cas, on va aller à la page suivante numéro 3.

  • go(-3); : si cette méthode prend un nombre négatif, par exemple 3 dans ce cas, on va aller à la page précédente numéro 3.

 

L’objet Window

L’objet Window

Window est un objet qui correspond à la fenêtre dans laquelle s’affiche une page Web. Un objet window est créé automatiquement par le navigateur. Notez qu’un objet window est un objet du navigateur et non un objet javascript(les objets javascript sont : array, date, string, number…).

Nous allons voir certaines méthodes de l’objet window  :

Alert

Affiche un texte dans un message d’alerte u d’information, la boite de message n’est pas modifiable.

  • Exemple :

Confirm

Affiche le paramètre texte dans un message d’alerte avec 2 boutons de confirmation. Retourne true si l’utilisateur clique sur Ok, retourne false si l’utilisateur clique sur Annuler ou appuye sur la touche Echap.

  • Exemple :

Open

Ouvrir une nouvelle fenêtre.

  • Exemple :

Close

Fermer les fenêtres. Si la fenêtre est ouverte par la méthode open aucune confirmation ne sera demandée pour fermer la page sinon une demande de confirmation vous sera demandée.

  • Exemple :

Prompt

Une boite de dialogue est affichée avec une zone de texte saisissable, et deux boutons valider et annuler, si l’utilisateur clique sur valider la méthode retourne le texte saisi et si on clique sur annuler elle retourne null.

  • Exemple :

 

JavaScript Array

JavaScript Array :

JavaScript Array est une collection qui regroupe des éléments de même type, nous avons 3 méthodes pour créer un array :

1 – Initialisateur d’objet (Array) :

  • Syntaxe :

  • Exemple :

  • Résultat :

2 – le mot clé new :

Nous allons voir comment faire pour créer une instance array en utilisant le mot clé new.

  • Syntaxe :

  • Exemple :

  • Résultat :

3 – En utilisant un constructeur :

La troisième et dernière méthode pour créer une instance, c’est l’utilisation du constructeur.

  • Syntaxe :

  • Exemple :

  • Résultat :

 

Première Application Angular 2

Dans cette exemple, nous allons voir comment développer et exécuter une petite application Angular 2 et TypeScript.

Il est aussi possible de développer en Angular 2 avec JavaScript et Dart

Introduction:

Cette application respecte la structure d’une application Angular 2 réelle et affiche un message simple :

Voir le résultat final de l’application ici.

Développement de l’application

  • prérequis: Installer Node.js et npm.
  • Etape 1: Créer et configurer le projet.
  • Etape 2: Créer votre application.
  • Etape 3: Create et ajouter un composant à votre application.
  • Etape 4: Démarrer votre application.
  • Etape 5: Define the web page that hosts the application.
  • Etape 6: Développez et executer l’application.
  • Etape 7: Make some live changes.
  • Conclusion

Installer Node.js et npm

Si Node.js et npm ne sont pas installés dans votre machine, installez-les. Pour notre exemple, nous aurons besoin de la version node v5.x.x ou plus et npm 3.x.x ou plus.

Pour verifier quelle version utilisez-vous, exécuter node -v et npm -v dans le terminal (Invite de commande pour Windows).

npm est installé avec Node.js

Etape 1: Créer et configurer le projet

Créer le dossier du projet:

Utilisez le terminal/invite de commande pour créer le dossier/répertoire du projet et deplacez-vous à ce dernier.

Créer les fichiers de configuration

Notre projet Angular a besoin de plusieurs fichiers de configurations:

  • package.json ce fichier contient les dépendances du projet (fichier de configuration de NPM).
  • tsconfig.json ce fichier définit la façon dont le compilateur de TypeScript génère du JavaScript à partir des fichiers du projet.
  • typings.json
  • systemjs.config.js

 

Créez chacun de ces fichiers dans le répertoire de votre projet. Copier/coller le contenu ci-dessous :

package.json

tsconfig.json

typings.json

systemjs.config.js

Pour plus de détails sur les fichiers de configuration, lisez les deux guides Npm Package Configuration et TypeScript Configuration.

en cours de construction …

 

 

JavaScript String

JavaScript String :

Javascript String est un objet qui représente une séquence de caractère.

1- Comment créer un objet string en javascript :

Il y a en fait deux méthodes pour créer un objet javascript string :

       – Initialisateur d’objet (String) :

un objet string en javascript  est crée en utilisant les guillemet (doubles quotes).

Syntaxe : 

Exemple :

Résultat :

      – En utilisant le mot clé New :

Syntaxe :

Exemple :

Résultat :

2- Les méthodes String en javascript :

Nous allons voir quelques méthodes string qui nous permet de manipuler les chaines de caractères.

  • charAt(position) : retourne le caractère dans la position demandée.

Résultat :

  • toUpperCase() : retourne la valeur en majuscule.

Résultat :

  • toLowerCase() : retourne la valeur en minuscule.

Résultat :

 

Comment créer des objets en javascript

Comment créer des objets en javascript :

Un objet JS est une entité qui se compose des priorités et méthodes, il y a 3 façons pour créer un objet javascript.

1- Initialisateur d’objet :

Un initialisateur d’objet est une liste contenant plusieurs propriétés et leurs valeurs associées, cette liste étant entourée d’accolades ({}).

Syntaxe :

Exemple :

Résultat :

2- En utilisant le mot clé New :

Syntaxe :

Exemple :

Résultat :

 3- En utilisant un constructeur :

Tout d’abord, nous avons besoin de créer une fonction avec des arguments, Chaque valeur d’argument peut être attribuée dans l’objet actuel en utilisant le mot-clé this.

Exemple :

Résultat :

 

Les fonctions JS

Les fonctions JS :

javascript2

Les fonctions en général sont utilisées pour éviter la redondance et avoir un code bien structuré et organisé, du coup on aura deux principaux avantages : la réutilisation du code et ne pas avoir beaucoup de lignes de code.

Syntaxe (fonction sans paramètres) :

Exemple :

Syntaxe (fonction avec paramètres) :

Exemple :

 

Les structures répétitives

javascript2

Les structures répétitives :

Une structure répétitive, également appelée structure itérative ou encore boucle, permet de répéter plusieurs fois l’exécution d’une ou plusieurs instructions.

La boucle for :

Elle est utilisée dans le cas ou le nombre d’itération est connu

Syntaxe : 

Exemple :

La boucle While :

Il est recommandé d’utiliser la boucle while dans le cas ou le nombre d’itérations est inconnu.

Syntaxe :

Exemple :

La boucle Do…While :

Il est recommandé d’utiliser la boucle while dans le cas ou le nombre d’itérations est inconnu, la seule différence entre cette boucle et la boucle while c’est que la boucle do…while exécute le code au moins une fois même si la condition d’arrêt n’est pas vérifiée.

Syntaxe :

Exemple :