Primer proyecto Angular

Posted by in Angular, Inicio Angular

Una vez se han instalado las herramientas necesarias explicadas en la entrada anterior, el siguiente paso es crear un nuevo proyecto. Este proceso es algo lento, dependiendo de la velocidad de conexión y potencia de la máquina donde se ejecute. Para ello se debe:

  1. Mediante terminal situarse en el directorio donde se quiere crear el proyecto
  2. Ejecutar el comando ng new NombreProyecto. Esto empezará a crear el proyecto, descargando todas las dependencias necesarias. Es posible que se pregunte durante la creación si se quiere añadir el routing de Angular durante la instalación y si se quiere utilizar algún estándar para la gestión de estilos. Esto ayudará bastante a la hora de gestionar el tema de la navegación.

Una vez creado el proyecto se abre con el editor seleccionado y aparece la siguiente estructura de ficheros:


Los ficheros más importantes son:

  • e2e: contiene ficheros para realizar pruebas de forma automática
  • node_module: contiene todas las dependencias de nodejs necesarias para el proyecto.
  • src: contiene la parte fuerte de la aplicación, donde se declaran todos los modelos, componentes, etc… que forman parte del peroyecto
    • app.component.ts: archivo typescript que representa la lógica del componente app
    • app.component.spect.ts: archivo destinado a las pruebas del componente app
    • app.component.html: archivo html que representa la parte gráfica del componente app
    • app.component.css: archivo css que representa los estilos que se aplicarán al archivo html
    • app.module.ts: archivo encargado de englobar todos los componentes que pueden ser utilizados
    • app-routing.module.ts: archivo destinado a la gestión de la navegación en la aplicación
  • assets: recursos disponibles para la aplicación.
  • index.html: archivo html que será el mostrado de forma inicial
  • main.ts: archivo typescript que será el encargado de crear el proyecto cuando
  • style.css: archivo que tiene todos los estilos globales de la aplicación

El siguiente paso es ver la aplicación generada en ejecución. Para ello hay que navegar desde la consola hasta la ubicación del proyecto (es recomendable hacerlo desde la consola integrada del IDE o plugo instalado) y ejecutar el comando ng serve (opcional -o para que lo abra en el navegador por defecto -p para indicarle el puerto donde lo monta). Este comando crea un servidor web donde se muestra la aplicación en el navegador predeterminado desde el puerto 4200