Crear y ejecutar un proyecto de Angular

¿Qué es Angular?

Angular es un marco frontend de código abierto mantenido por Google para construir aplicaciones de una sola página (SPA) dinámicas. Está basado en TypeScript y proporciona herramientas y características ricas que permiten a los desarrolladores construir aplicaciones complejas de manera eficiente. El núcleo de Angular son los componentes y la modularidad, lo que hace que el código sea más fácil de organizar y mantener.

Características y ventajas principales de Angular

Componentización: Construir interfaces de usuario a través de componentes hace que el código sea más modular y reutilizable.
Data Binding Bidireccional: Sincroniza automáticamente el modelo de datos y la vista, facilitando la gestión de datos.
Inyección de Dependencias: Mejora la testabilidad y mantenibilidad del código mediante un mecanismo de inyección de dependencias.
Herramientas CLI Poderosas: Angular proporciona herramientas de línea de comandos poderosas (Angular CLI) que simplifican la creación, desarrollo y construcción del proyecto.
Enrutamiento y Manejo de Formularios Incorporados: Angular ofrece capacidades poderosas de enrutamiento y manejo de formularios, facilitando la construcción de aplicaciones de una sola página.

Usar Angular puede ayudar a los desarrolladores a construir aplicaciones web modernas y receptivas de manera más eficiente.

Crear y ejecutar un proyecto de Angular con ServBay

En este artículo, usaremos el entorno Node.js provisto por ServBay para crear y ejecutar un proyecto de Angular. Utilizaremos la función ‘Host’ de ServBay para configurar un servidor web y acceder al proyecto mediante un proxy inverso y servicio de archivos estáticos.

Crear un proyecto de Angular

Inicializar el proyecto
Primero, asegúrese de haber instalado el entorno Node.js provisto por ServBay. Luego, use el siguiente comando para instalar Angular CLI globalmente:
bash
```
npm install -g @angular/cli
```
1
En el directorio raíz del sitio web recomendado por ServBay /Applications/ServBay/www, cree un nuevo proyecto de Angular:
bash
```
cd /Applications/ServBay/www
ng new servbay-angular-app
```
1
2
Siga las instrucciones para ingresar el nombre del proyecto (se recomienda nombrarlo servbay-angular-app) y elija otras opciones según sea necesario:
bash
```
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
```
1
2
Instalar dependencias
Entre en el directorio del proyecto e instale las dependencias:
bash
```
cd servbay-angular-app
npm install
```
1
2

Modificar el contenido de salida del proyecto Angular

Modificar el archivo src/app/app.component.html
Abra el archivo src/app/app.component.html y modifique el contenido para mostrar "Hello ServBay!":
html
```
<div style="text-align:center">
  <h1>Hello ServBay!</h1>
</div>
```
1
2
3

Modo de desarrollo

Ejecutar el servidor de desarrollo
Inicie el servidor de desarrollo y especifique el puerto (por ejemplo: 8585):
bash
```
ng serve --port 8585
```
1
Esto iniciará un servidor de desarrollo local y expondrá el puerto 8585.
Configurar proxy inverso de host ServBay
Utilice la función 'Host' de ServBay para acceder al servidor de desarrollo mediante un proxy inverso. En la configuración de 'Host' de ServBay, agregue un nuevo proxy inverso:
- Nombre: My first Angular dev site
- Dominio: servbay-angular-test.dev
- Tipo de host: Proxy inverso
- IP: 127.0.0.1
- Puerto: 8585
Consulte los pasos detallados en añadir un sitio web de desarrollo Nodejs.
Acceder al modo desarrollo
Abra el navegador y visite https://servbay-angular-test.dev para ver el proyecto en tiempo real. Dado que ServBay admite dominios personalizados y certificados SSL gratuitos, disfrutará de mayor seguridad.

Construcción para producción

Construir la versión de producción
Una vez que haya terminado el desarrollo, construya la versión de producción con el siguiente comando:
bash
```
ng build --prod
```
1
Al finalizar la construcción, los archivos estáticos generados se ubicarán en el directorio dist/servbay-angular-app.
Configurar el servicio de archivos estáticos
Utilice la función 'Host' de ServBay para acceder a la versión de producción mediante el servicio de archivos estáticos. En la configuración de 'Host' de ServBay, agregue un nuevo sitio web estático:
- Nombre: My first Angular production site
- Dominio: servbay-angular-test.prod
- Tipo de host: Estático
- Directorio raíz del sitio web: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
Acceder al modo producción
Abra el navegador y visite https://servbay-angular-test.prod para ver la versión de producción del proyecto. Con los dominios personalizados de ServBay y certificados SSL gratuitos, su sitio web tendrá mayor seguridad y credibilidad.

Siguiendo los pasos anteriores, ha creado y ejecutado con éxito un proyecto de Angular utilizando las funciones proporcionadas por ServBay para gestionar y acceder a su proyecto.