Blue Flower

Chercher

Configuration requise pour commencer à apprendre Angular

Commençons par construire un exemple complet de projet d’application Web avec Angular

Installer l'environnement de développement pour Angular

Dans cette section, on va montrer comment configurer un environnement de développement local afin de pouvoir commencer à développer des applications avec Angular. Un véritable développement d'applications se produit dans un environnement de développement local (qui pourrait être votre machine personnelle). Suivez nos instructions de configuration pour créer un nouveau projet angulaire.

Pré-requis pour Angular: Installer NodeJS et npm

Node.js et npm sont essentiels au développement Web moderne utilisant Angular et d’autres plateformes. Node permet le développement de clients et la création d'outils. Nous allons utiliser le gestionnaire de paquets du noeud (npm) pour installer toutes les dépendances des bibliothèques JavaScript. Obtenez-les maintenant si elles ne sont pas installées sur votre ordinateur.

Note: Vérifiez les version de  "node et npm  en exécutant les commandes:  node -v et  npm -v dans une terminale. Les anciennes versions peuvent générer des erreurs, toutefois privilégier l'utilisation des nouvelles versions.

La commande CLI d'Angular

Les applications Angular sont créées et développées principalement via la commande Angular (CLI), qui facilite la création de projets, l’ajout de fichiers et la réalisation de diverses tâches de développement.
La commande CLI s’occupe de la configuration et de l’initialisation de diverses bibliothèques. Cela permet également d'ajouter des composants, des directives, des services, etc. à des applications Angular. Il convient également de mentionner que la CLI utilise Typescript et Webpack pour l’assemblage de modules, Karma pour les tests unitaires et Protractor pour les tests. CLI comprend tout ce dont on a besoin pour commencer à écrire une application Angular.

Pour installer la commande CLI , on exécute sur le console de commande la commande

npm install -g @angular/cli

Note: bien que cela ne soit pas recommandé, vous devrez peut-être ajouter "sudo" devant  pour installer les utilitaires de manière globale.

Important note: Si une version plus ancienne de la CLI est installée sur votre ordinateur, assurez-vous de la mettre à jour correctement avec la dernière version de  CLI .

Maintenant, commençons à construire le projet exemple d’application Angular

Si  Angular et ses dépendances sont installés, on peut continuer et commencer à construire notre application Angular. Commençons!

Démarrer une nouvelle application angulaire avec la CLI est facile! Depuis votre ligne de commande, lancez cette commande:

ng new "nouvelle-angular-app"

La commande ci-dessus créera un dossier nommé "nouvelle-angular-app" et copiera toutes les dépendances requises et les paramètres de configuration. La commande CLI d'Angular le fait:

  1. Créer un nouveau repertoire "nouvelle-angular-app"
  2. Télécharge et installe les libraires  Angular et les autres dépendances
  3. Installe  et  configure  TypeScript
  4. Installe et configure Karma et Protractor (testing libraries)

Vous pouvez également utiliser la commande ng init. La différence entre ng init et ng new est que ng new vous oblige à spécifier le nom du dossier. Il créera un dossier copiant les fichiers

ng init

copiera les fichiers dans le dossier en cours.

Après on peut par la commande "cd " entrer dans le répertoire qui vient d'être créé . Pour obtenir un aperçu rapide de votre application dans le navigateur, utilisez la commande:

ng serve

Cette commande exécute le compilateur en mode veille (recherche de modifications dans le code et recompile si nécessaire), démarre le serveur, lance l'application dans un navigateur et maintient l'application en cours d'exécution pendant la construction.

Le serveur Webpack Development écoute sur le port HTTP 4200. Par conséquent, si on ouvre l'URL "http://localhost:4200/", l'application sera exécutée.

Utilser la commande CLI pour Ajouter de nouvelles pages

Dans Angular, il y a plus de contraste que dans AngularJS (Angular 1).

..............