Angular CLI, développez des applications Angular sur Ubuntu

à propos d'angular-cli

Dans le prochain article, nous allons jeter un œil à la CLI angulaire. Au cas où tu ne sais toujours pas Angular est un framework de développement d'applications frontales open source, populaire et hautement extensible. Il peut être utilisé pour créer des applications mobiles et Web à l'aide de TypeScript, JavaScript et d'autres langages courants. Angular est un terme générique pour toutes les versions d'Angular qui viennent après AngularJS.

Ce cadre de développement est bien adapté à la création d'applications à partir de zéro, allant de petite à grande échelle. L'un des composants clés de la plate-forme angulaire pour faciliter le développement d'applications est l'utilitaire Angular CLI. C'est un outil de ligne de commande simple et facile à utiliser. Il est utilisé pour créer, gérer, construire et tester des applications créées avec Angular.

Dans les lignes suivantes, nous verrons comment nous pouvons installer l'outil de ligne de commande Angular sur notre système Ubuntu 19.04. Nous verrons également un exemple de base de cet outil.

Installer Node.js sur Ubuntu

Pour installer Angular CLI il sera nécessaire que nous ayons une version actuelle de Node.js et NPM installée sur notre système. Pour ce faire, il suffit d'ouvrir un terminal (Ctrl + Alt + T) et d'y écrire:

télécharger nodejs 12

sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

installation d'apt nodejs

sudo apt install -y nodejs

Aussi, pour compiler et installer des plugins NPM natifs, nous pouvons avoir besoin d'installer des outils de développement sur notre système. Pour ce faire, dans le même terminal, nous ferons ce qui suit:

sudo apt install -y build-essential

Installation de la CLI angulaire sur Ubuntu 19.04

Après l'installation de Node.js et NPM comme nous venons de le voir, nous pourrons installer Angular CLI à l'aide du gestionnaire de packages npm comme suit. Dans ce cas, l'option -g cela signifie que nous allons installer l'outil dans tout le système, pour être utilisé par tous les utilisateurs de celui-ci.

npm angular cli installer

sudo npm install -g @angular/cli

Après l'installation, nous pouvons démarrer Angular CLI à l'aide de l'exécutable ng qui devrait maintenant être installé sur notre système. Exécutez la commande suivante dans le terminal (Ctrl + Alt + T) pour vérifier la version de Angular CLI installée:

version ng

ng --version

Création d'un projet à l'aide de la CLI angulaire

Ubuntu-Apache
Article connexe:
Comment installer le serveur Web Apache sur Ubuntu 18.04?

Voyons maintenant comment nous pouvons créer, construire et servir un nouveau projet Angular de base. Premier, nous allons aller dans le répertoire webroot depuis notre serveur. Ensuite, nous allons créer une nouvelle application Angular comme suit:

création d'une application cli angulaire

cd /var/www/html/

sudo ng new ubunlog-app

Nous devrons décider si nous voulons partager des données anonymes avec l'équipe Angular. Nous continuons à aller dans le répertoire de l'application que nous venons de créer. Nous allons commencer à servir l'application comme indiqué dans ce qui suit:

Application compilée angulaire

cd ubunlog-app

ng serve

La commande précédente nous mettra à l'écran un lien qui nous dira comment nous pouvons voir notre application en fonctionnement.

Avant de pouvoir y accéder à partir d'un navigateur Web, en cas de fonctionnement d'un service de pare-feu, nous devons ouvrir le port 4200 en configurant ceci, comme indiqué ci-dessous:

sudo ufw allow 4200/tcp

sudo ufw reload

Après cela, nous pouvons ouvrir notre navigateur Web préféré et naviguer à l'aide de l'URL fournie par le terminal pour voir la nouvelle application s'exécuter, comme illustré dans la capture d'écran suivante.

Application CLI angulaire dans un navigateur Web

http://localhost:4200/

Nous pouvons également utiliser cette autre URL pour accéder à notre application:

http://IP_SERVIDOR:4200

Il convient de mentionner que si nous utilisons la commande "ng servir«Pour construire une application et la servir localement comme nous venons de le voir, le serveur reconstruit automatiquement l'application et recharge les pages Web lorsque nous modifions l'un des fichiers source.

Si nous voulons obtenir plus d'informations sur l'outil ng, nous pouvons exécuter la commande suivante dans le terminal (Ctrl + Alt + T):

ng aide

ng help

Dans cet article, nous avons vu comment effectuer un installation simple de Angular CLI sur notre système Ubuntu, en plus de créer, compiler et servir une application de base sur un serveur de développement.

Ce ne sont que les premières étapes les plus élémentaires pouvant être effectuées avec la CLI angulaire. Pour voir plus d'informations sur Angular CLI, nous pouvons consulter le site officiel du projet.


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués avec *

*

*

  1. Responsable des données: Miguel Ángel Gatón
  2. Finalité des données: Contrôle du SPAM, gestion des commentaires.
  3. Légitimation: votre consentement
  4. Communication des données: Les données ne seront pas communiquées à des tiers sauf obligation légale.
  5. Stockage des données: base de données hébergée par Occentus Networks (EU)
  6. Droits: à tout moment, vous pouvez limiter, récupérer et supprimer vos informations.