Cómo ejecutar el proyecto Angular [Explicación paso a paso]

AngularJS es imprescindible para cualquier desarrollador de pila completa. Es crucial para el desarrollo front-end ya que simplifica el uso de directivas HTML. Desarrollar una aplicación web se vuelve mucho más fácil cuando usa Angular. Entonces, en este artículo, discutiremos cómo puede comenzar con Angular. Discutiremos cómo instalar Angular y cómo ejecutar un proyecto Angular.

CLI angular: una breve introducción

Si desea trabajar en proyectos Angular, debe tener Angular CLI. Es la herramienta oficial de Angular para trabajar en proyectos Angular e inicializarlos. CLI angular reduce muchas molestias del proceso de inicialización. No es necesario que realice varias configuraciones y cree herramientas para iniciar un proyecto si usa Angular CLI.

Angular CLI le permite iniciar un proyecto con un solo comando. Con otro comando, puede servir el proyecto utilizando un servidor de desarrollo local. La CLI angular funciona en Node.js. Entonces, para ejecutar Angular CLI en su sistema, primero debe tener Node.js en su sistema.

Node.js es para servidores y para desarrollar aplicaciones del lado del servidor, mientras que Angular es una solución de front-end. Node.js lo ayuda solo con Angular CLI.

¿Cómo instalar Angular?

Primer paso

Antes de instalar Angular en su sistema, debe tener Node y npm en su sistema. Puede usar el Administrador de versiones de nodos para instalarlo, o puede usar el administrador de paquetes oficial de su sistema operativo. También tienes la opción de instalar Node desde su sitio web. Recomendamos instalarlo desde el sitio web, ya que es rápido y sencillo. Solo tendría que dirigirse a la página de descarga de node.js.

Segundo paso

Una vez que esté en la página de descarga de node.js, seleccione la versión que necesita según su sistema operativo y luego siga los pasos especificados en el asistente de instalación. Si ya ha instalado node.js en su sistema anteriormente, puede omitir este paso (y el anterior).

Tercer paso:

Para verificar si Node está instalado en su dispositivo o no, abra el símbolo del sistema y ejecute el siguiente comando:

$ nodo -v

Mostraría la versión actualmente instalada de Node en su sistema.

Tercer paso

Después de verificar si tiene Node instalado en su sistema, puede instalar Angular en su dispositivo ejecutando el siguiente comando del símbolo del sistema:

$ npm instalar @angular/cli

Después de ejecutar el comando anterior, Angular CLI se instalará en su dispositivo. Ha completado la parte 'cómo instalar Angular'.

Aprenda: Salario de desarrollador angular en India: para principiantes y experimentados

¿Cómo ejecutar un proyecto angular?

Como instalamos Angular en nuestro sistema, ahora nos enfocaríamos en comenzar un nuevo proyecto.

Primer paso

Crearíamos un espacio de trabajo y la aplicación de inicio ejecutando el siguiente comando:

ng nueva gira angular de héroes

Hemos agregado angular-tour-of-heroes como el nombre de nuestro espacio de trabajo. El comando 'ng new' le indicará las funciones que desea agregar en la aplicación de inicio. Como es un tutorial, seleccionaremos los valores predeterminados y procederemos presionando Return o Enter.

Segundo paso

Ahora, Angular CLI ha instalado los paquetes y las dependencias npm necesarios. Tendría una 'aplicación de bienvenida' lista para usar y un nuevo espacio de trabajo. También tendría una carpeta raíz con el mismo nombre que la aplicación (angular-tour-of-heroes) y un proyecto de aplicación de esqueleto.

En este paso, tenemos que servir la aplicación. Lo haremos dirigiéndonos al directorio del espacio de trabajo e iniciando la aplicación:

cd angular-tour-of-héroes

ng servir -abrir

El comando 'ng serve' crearía la aplicación, iniciaría el servidor de desarrollo, cuidaría los archivos fuente de su proyecto y reconstruiría su aplicación a medida que modifica los archivos necesarios.

Tercer paso

Si desea modificar la aplicación, deberá dirigirse a la carpeta src/app en su IDE o editor. Editaremos nuestra aplicación cambiando los componentes de este proyecto. Los componentes son los componentes básicos de las aplicaciones Angular. Manejan casi todas las funciones fundamentales de un proyecto Angular, como mostrar datos, responder a entradas, etc.

En este paso, abra su IDE y diríjase al directorio del proyecto y busque los archivos de componentes de su proyecto:

• aplicación.componente.ts
• aplicación.componente.html
• aplicación.componente.css

El primer archivo es el código de la clase y está basado en TypeScript, el segundo archivo es la plantilla en HTML y el último tiene los estilos CSS privados.

Cuarto paso

Nuestro proyecto está configurado y tenemos todos los archivos listos. En este paso, lo personalizaremos agregándole un título. Para cambiar el título de su proyecto Angular, vaya al archivo app.component.ts y elimine la plantilla predeterminada presente. Angular CLI genera una plantilla de generación automáticamente. Puede reemplazarlo con lo siguiente:

<h1>{{su título}}</h1>

Las llaves son la sintaxis de enlace de interpolación. Puede reemplazar 'su título' con el título deseado. Una vez que haya ingresado el título deseado, actualice el navegador y su aplicación tendrá el nuevo título.

Quinto Paso

La personalización de la aplicación estaría incompleta sin ningún estilo. Entonces, en este paso, modificaremos el estilo de nuestra aplicación Angular. Angular CLI genera un archivo styles.css vacío para su aplicación cuando crea un nuevo proyecto. Puede introducir los estilos que desee aquí.

Abra el archivo src/styles.css en su IDE y comience a modificar el estilo de la aplicación. Modifica los estilos de la app y guarda los cambios. Cuando actualice el navegador, verá los cambios en su aplicación.

Pago: ¿Cómo implementar la paginación en Angular JS?

Obtenga más información sobre el desarrollo angular y de pila completa

Ahora sabe cómo instalar Angular en su sistema y cómo ejecutar un proyecto Angular. Una vez que lo domines, verás que trabajar con Angular es mucho más fácil de lo que pensabas. Con un poco de experiencia, puede comenzar a trabajar en proyectos de desarrollo web front-end con Angular.

Si está interesado en obtener más información sobre el desarrollo web Angular y front-end, aquí hay algunos recursos adicionales:

• Guía de currículum para desarrolladores front-end
• Las 10 mejores habilidades para convertirse en un desarrollador front-end
• Ideas de proyectos front-end

Por otro lado, puede tomar un curso completo de desarrollo y aprender de expertos de la industria a través de videos, proyectos y cuestionarios.

Si está interesado en obtener más información sobre el desarrollo de software de pila completa, consulte el Diploma PG de upGrad & IIIT-B en desarrollo de software de pila completa, que está diseñado para profesionales que trabajan y ofrece más de 500 horas de capacitación rigurosa, más de 9 proyectos y asignaciones. , estado de exalumno de IIIT-B, proyectos finales prácticos y asistencia laboral con las mejores empresas.