Créer et exécuter un projet Angular

Qu'est-ce qu'Angular?

Angular est un framework frontend open-source maintenu par Google, utilisé pour construire des applications monopage (SPA) dynamiques. Il est basé sur TypeScript et offre une panoplie d'outils et de fonctionnalités permettant aux développeurs de créer des applications complexes de manière efficace. La philosophie centrale d'Angular repose sur les composants et la modularité, ce qui rend le code plus facile à organiser et à maintenir.

Principales caractéristiques et avantages d'Angular

• Componentisation : Construire l'interface utilisateur à travers des composants rend le code plus modulaire et réutilisable.
• Binding bidirectionnel : Synchronisation automatique du modèle de données et de la vue, facilitant la gestion des données.
• Injection de dépendances : Améliore la testabilité et la maintenabilité du code grâce à l'injection de dépendances.
• Outil CLI puissant : Angular fournit un outil en ligne de commande puissant (Angular CLI) qui simplifie la création, le développement et la construction de projets.
• Routage et gestion des formulaires intégrés : Angular offre des fonctionnalités de routage et de gestion des formulaires puissantes, facilitant la construction d'applications monopages.

Utiliser Angular aide les développeurs à construire des applications web modernes et réactives plus efficacement.

Créer et exécuter un projet Angular avec ServBay

Dans cet article, nous allons créer et exécuter un projet Angular en utilisant l'environnement Node.js fourni par ServBay. Nous utiliserons la fonctionnalité 'hébergeur' de ServBay pour configurer un serveur web et accéder au projet via un proxy inversé et un service de fichiers statiques.

Créer un projet Angular

1. Initialiser le projet

   Tout d'abord, assurez-vous d'avoir installé l'environnement Node.js fourni par ServBay. Ensuite, utilisez la commande suivante pour installer Angular CLI globalement :

   npm install -g @angular/cli

   Créez un nouveau projet Angular dans le répertoire racine du site recommandé par ServBay /Applications/ServBay/www :

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Suivez les instructions pour entrer le nom du projet (il est recommandé de le nommer servbay-angular-app) et sélectionnez les autres options nécessaires :

   ? Would you like to add Angular routing? Yes
   ? Which stylesheet format would you like to use? CSS

2. Installer les dépendances

   Entrez dans le répertoire du projet et installez les dépendances :

   cd servbay-angular-app
   npm install

Modifier le contenu de sortie du projet Angular

1. Modifier le fichier src/app/app.component.html

   Ouvrez le fichier src/app/app.component.html et modifiez le contenu pour afficher "Hello ServBay!" sur la page web :

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
   </div>

Entrer en mode développement

1. Exécuter le serveur de développement

   Démarrez le serveur de développement et spécifiez le port (par exemple : 8585) :

   ng serve --port 8585

   Cela lancera un serveur de développement local et exposera le port 8585.

2. Configurer le proxy inversé de l'hébergeur ServBay

   Utilisez la fonctionnalité 'hébergeur' de ServBay pour accéder au serveur de développement via un proxy inversé. Dans les paramètres de l'hébergeur de ServBay, ajoutez un nouveau proxy inversé :

   • Nom : Mon premier site de développement Angular
   • Domaine : servbay-angular-test.dev
   • Type d'hôte : Inverse proxy
   • IP : 127.0.0.1
   • Port : 8585

   Pour des étapes de configuration détaillées, consultez ajouter un site web de développement Nodejs.

3. Accéder au mode développement

   Ouvrez votre navigateur et accédez à https://servbay-angular-test.dev pour voir le projet en temps réel. Étant donné que ServBay prend en charge les noms de domaine personnalisés et les certificats SSL gratuits, vous bénéficierez d'une sécurité améliorée.

Construire la version de production

1. Construire la version de production

   Une fois le développement terminé, utilisez la commande suivante pour construire la version de production :

   ng build --prod

   Une fois la construction terminée, les fichiers statiques générés se trouveront dans le répertoire dist/servbay-angular-app.

2. Configurer le service de fichiers statiques

   Utilisez la fonctionnalité 'hébergeur' de ServBay pour accéder à la version de production via un service de fichiers statiques. Dans les paramètres de l'hébergeur de ServBay, ajoutez un nouveau site web statique :

   • Nom : Mon premier site de production Angular
   • Domaine : servbay-angular-test.prod
   • Type d'hôte : Statique
   • Répertoire racine du site : /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app

3. Accéder au mode production

   Ouvrez votre navigateur et accédez à https://servbay-angular-test.prod pour voir la version de production du projet. Grâce aux noms de domaine personnalisés et aux certificats SSL gratuits de ServBay, votre site sera plus sécurisé et digne de confiance.

En suivant ces étapes, vous avez réussi à créer et exécuter un projet Angular en utilisant les fonctionnalités fournies par ServBay pour gérer et accéder à votre projet.