About the Author

OpenTuto

Création d’un projet Angular avec Angular CLI

Créer un projet Angular avec Angular CLI

La création d’un projet Angular avec Angular CLI est effectuée via la commande ng new :

Les applications Angular utilisent généralement un routeur et l’option –routing permet de rendre plus lisible la mise en œuvre de celui-ci en créant un fichier séparé pour spécifier la table de routage.

Créez le projet openApp:

Une fois la création du projet terminée, testez l’application par défaut associée à tout nouveau projet. Pour cela, utilisez la commande suivante :

En fait, cette commande réalise deux choses essentielles :

  • Elle lance un serveur local (le NG Live Development Server) qui en sous-main appelle le transpiler TypeScript qui transcode (transpile) en JavaScript tous les codes TypeScript que vous créez ou modifiez.
  • Elle exécute l’outil webpack, qui lie les codes JavaScript pour former différents bundles (des fichiers qui regroupent les codes et ressources et ne sont pas sauvegardés sur votre disque tant que l’application est en mode développement) et visualise votre application sur l’URL localhost:4200.

Ces deux opérations sont répétées dès que vous modifiez un de vos codes sources. Du code étant produit et la fenêtre de votre navigateur étant rafraîchie, ne sauvegardez donc vos fichiers qu’à bon escient.
Dans votre navigateur, invoquez le serveur local sur le port 4200 : localhost:4200.

Angular 8 – Installation d’Angular CLI

Installation d’Angular CLI

L’installation Angular CLI est effectuée par les commandes suivantes :

Globalement :

Localement :

L’option --save enregistre une dépendance dans le fichier de configuration package.json.

Angular CLI est donc géré via un module Node.js…

(Sous Linux/Ubuntu, il se peut que vous deviez passer en mode administrateur pour utiliser la commande précédente.)

angular-cli vs angular/cli

Une version obsolète (angular-cli) était installable par :

Si vous l’aviez installée (ici localement), vous pouvez la désinstaller (et installer la nouvelle version) ainsi :

 

Angular 8 – Présentation d’Angular CLI

angular cli

Angular CLI

Angular CLI est un outil qui permet :

  • D’installer les modules de Node.js (des modules supplémentaires devront être installés suivant vos besoins).
  • De créer la structure d’un projet Angular .
  • De créer les ossatures des différentes entités qui composent une application Angular et dont vous aurez besoin : les modules, les composants, les services, les directives, les pipes, les guards, les enums.
  • De spécifier et d’exécuter les tests unitaires ou d’intégration.
  • De créer la version de production de votre application.
  • Etc.

Une fois Angular CLI installé, exécutez vos actions via la commande ng en ligne de commande.

Java 8 – Interfaces fonctionnelles

Qu’est ce qu’une interface fonctionnelle ?

Pour simplifier, il s’agit  d’une interface java qui contient une seule méthode abstraite SAM(Single Abstract Method).

Il est recommandé d’avoir une annotation informative @FunctionalInterface sur toutes les interfaces fonctionnelles. Cela non seulement communique clairement le but de cette interface, mais permet également au compilateur de générer une erreur si l’interface annotée ne satisfait pas les conditions. A noter également qu’une interface fonctionnelle peut contenir zéro o plusieurs default methods.

Les méthodes par défaut ont été introduites pour fournir une compatibilité ascendante afin que les interfaces existantes puissent utiliser les expressions lambda sans implémenter les méthodes dans la classe d’implémentation. Les méthodes par défaut sont également appelées defender methods ou virtual extension methods.

Comment déclarer une interface fonctionnelle ?

N.B : l’annotation @FunctionalInterface est optionnelle, mais si vous l’utiliser il ne faudrait pas mettre plus qu’une méthode abstraite, le cas contraire, le compilateur générera une erreur.

Rechercher avec une classe (les sélecteurs jQuery)

Nous avons vu précédemment comment rechercher un élément HTML avec son identifiant. Sur le même principe nous pouvons rechercher un élément HTML qui possède une classe spécifiée et lui appliquer une mise en forme CSS.

Rechercher avec une classe

Nous reprenons l’exemple précédent dans lequel le script va rechercher l’élément HTML qui possède la classe .bordure et lui appliquer une bordure en CSS.

Voici l’affichage obtenu

les sélecteurs jQuery: Rechercher avec une classe

les sélecteurs jQuery: Rechercher avec une classe

Rechercher avec l’identifiant (les sélecteurs jQuery)

Les sélecteurs CSS sont des critères de choix pour cibler les éléments d’une page web. Notez qu’il existe aussi des sélecteurs propres à jQuery. Dans cet article nous allons étudier la syntaxe du sélecteur qui permet de rechercher les éléments HTML des pages avec l’identifiant.

Rechercher avec l’identifiant

Dans cet exemple, nous avons trois paragraphes <p>, dont le second possède l’identifiant #deuxieme: <p id="deuxieme">.

L’objectif du script jQuery est d’appliquer une mise en forme CSS sur ce deuxième paragraphe identifié seul. Nous allons pouvoir le rechercher avec son identifiant #deuxieme.

Explication :

Une fois la page chargée avec le DOM, $(document).ready(function(){...});, le script recherche l’élément HTML avec l’identifiant #deuxieme: $("#deuxieme"). Une fois trouvé, une mise en forme CSS est appliquée à l’aide de la méthode jQuery css().

Voici l’affichage obtenu

Le même exemple en utilisant la recherche avec une classe.

Initialiser un script jQuery

La syntaxe

Une fois que vous avez lié vos pages web avec la bibliothèque jQuery, il faut maintenant indiquer à votre script qu’il peut être utilisé. Pour ce faire, il faut initialiser le script.

Le caractère $ est l’alias qui permet de cibler jQuery à partir du document (document) qu’est la page web. Cela permet de créer un objet jQuery.

Quand la page et tous ses éléments constitutifs sont chargés (ready()) nous pouvons utiliser le script : function(){...};.

Initialiser un script jQuery

La première syntaxe est la plus complète et la plus simple à comprendre. Mais, pour aller plus vite, vous pouvez aussi utiliser la syntaxe courte :

Ces deux syntaxes sont strictement identiques et elles produiront les mêmes résultats.

Télécharger et intégrer la bibliothèque jQuery

Les différentes versions de jQuery

La première solution consiste à télécharger la bibliothèque jQuery et à l’implémenter dans votre site. Pour ce faire, allez sur le site de jQuery : http://jquery.com

page de téléchargement jquery

Page de téléchargement jQuery

Sur cette page d’accueil, cliquez sur le bouton Download jQuery v3.3.1. Vous êtes alors dirigé vers la page http://jquery.com/download/. Vous y trouverez toutes les versions de la bibliothèque jQuery.

Il existe deux versions principales de jQuery : la version standard et la version slim.

  • La version standard est la version complète de jQuery, avec toutes les fonctionnalités.
  • La version slim ne possède pas toutes les fonctionnalités, elle n’inclut pas l’AJAX, les effets et les fonctions dépréciés.

Pour chaque version, standard et slim, vous pouvez utiliser la version compressed production ou la version uncompressed, development.

Télécharger les fichiers

Vous pouvez donc télécharger la version de développement pour concevoir vos sites web en local, sur vos machines, et la version de production pour la publication de ceux-ci chez un hébergeur. Dans les deux cas, nous allons télécharger la version standard, complète de jQuery.

Pour télécharger la version de production, sur la page de téléchargement :

Télécharger la version de production de jQuery

Télécharger la version de production de jQuery

Lier la bibliothèque jQuery

Maintenant, vous devez lier chacune de vos pages web où doit intervenir un script jQuery au fichier jQuery.

Pour bien organiser les fichiers de vos sites, je vous conseille de créer un dossier nommé js pour y placer toutes vos bibliothèques JavaScript.

Exemple d'une page web utilisant la librairie jQuery

Exemple d’une page web utilisant la librairie jQuery


Lier jQuery via un CDN

La deuxième solution qui s’offre à vous pour utiliser la bibliothèque jQuery est de la lier avec chacune de vos pages web par l’intermédiaire d’un serveur dédié sur le Web. Ces serveurs qui hébergent des bibliothèques et d’autres services web s’appellent des CDN : Content Delivery Network. Ils délivrent tous ces services et ces contenus de manière très rapide. Il existe de nombreux CDN qui hébergent la bibliothèque jQuery.

Pour lier vos pages web à jQuery avec un CDN, il suffit de créer une liaison <script> dans la section <head> de vos pages web :

  • Google CDN

Voir aussi :


Dans l’article suivant, nous verrons comment initialiser un script jQuery.