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

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 :
bash
```
npm install -g @angular/cli
```
1
Créez un nouveau projet Angular dans le répertoire racine du site recommandé par ServBay /Applications/ServBay/www :
bash
```
cd /Applications/ServBay/www
ng new servbay-angular-app
```
1
2
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 :
bash
```
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
```
1
2
Installer les dépendances
Entrez dans le répertoire du projet et installez les dépendances :
bash
```
cd servbay-angular-app
npm install
```
1
2

Modifier le contenu de sortie du projet Angular

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 :
html
```
<div style="text-align:center">
  <h1>Hello ServBay!</h1>
</div>
```
1
2
3

Entrer en mode développement

Exécuter le serveur de développement
Démarrez le serveur de développement et spécifiez le port (par exemple : 8585) :
bash
```
ng serve --port 8585
```
1
Cela lancera un serveur de développement local et exposera le port 8585.
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.
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

Construire la version de production
Une fois le développement terminé, utilisez la commande suivante pour construire la version de production :
bash
```
ng build --prod
```
1
Une fois la construction terminée, les fichiers statiques générés se trouveront dans le répertoire dist/servbay-angular-app.
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
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.