Esta guía explica cómo configurar su entorno para el desarrollo de Angular utilizando la herramienta Angular CLI. Incluye información sobre los requisitos previos, la instalación de la CLI, la creación de un espacio de trabajo inicial y una aplicación de inicio, y la ejecución de esa aplicación localmente para verificar su configuración.

Prueba Angular sin configuración local

Si es nuevo en Angular, es posible que desee comenzar con ¡Pruébelo ahora!, Que presenta los aspectos esenciales de Angular en el contexto de una aplicación de tienda en línea básica lista para usar que puede examinar y modificar. Este tutorial independiente aprovecha las ventajas interactivas StackBlitz entorno para el desarrollo online. No es necesario que configure su entorno local hasta que esté listo.

Prerrequisitos

Para usar el marco Angular, debe estar familiarizado con lo siguiente:

Conocimiento de Mecanografiado es útil, pero no obligatorio.

Para instalar Angular en su sistema local, necesita lo siguiente:

  • Node.js

    Angular requiere un LTS activo o LTS de mantenimiento versión de Node.js.

    Para obtener información sobre los requisitos específicos de la versión, consulte la engines clave en el package.json expediente.

    Para obtener más información sobre la instalación de Node.js, consulte nodejs.org. Si no está seguro de qué versión de Node.js se ejecuta en su sistema, ejecute node -v en una ventana de terminal.

  • administrador de paquetes npm

    Las aplicaciones Angular, Angular CLI y Angular dependen de paquetes npm para muchas características y funciones. Para descargar e instalar paquetes npm, necesita un administrador de paquetes npm. Esta guía utiliza el cliente npm interfaz de línea de comandos, que se instala con Node.js por defecto. Para comprobar que tiene instalado el cliente npm, ejecute npm -v en una ventana de terminal.

Instale la CLI angular

Utiliza la CLI de Angular para crear proyectos, generar código de aplicación y biblioteca, y realizar una variedad de tareas de desarrollo en curso, como pruebas, agrupación e implementación.

Para instalar Angular CLI, abra una ventana de terminal y ejecute el siguiente comando:

npm install -g @angular/cli

Crea un espacio de trabajo y una aplicación inicial.

Desarrollas aplicaciones en el contexto de un Angular espacio de trabajo.

Para crear un nuevo espacio de trabajo y una aplicación de inicio inicial:

  1. Ejecute el comando CLI ng new y proporcione el nombre my-app, como se muestra aquí:

    ng new my-app

  2. los ng new El comando le solicita información sobre las funciones que se incluirán en la aplicación inicial. Acepte los valores predeterminados presionando la tecla Intro o Retorno.

La CLI de Angular instala los paquetes npm de Angular necesarios y otras dependencias. Esto puede tardar unos minutos.

La CLI crea un nuevo espacio de trabajo y una aplicación de bienvenida simple, lista para ejecutarse.

Ejecuta la aplicación

La CLI de Angular incluye un servidor, para que pueda construir y servir su aplicación localmente.

  1. Navegue a la carpeta del espacio de trabajo, como my-app.

  2. Ejecute el siguiente comando:

cd my-app
  ng serve --open

los ng serve El comando inicia el servidor, observa sus archivos y reconstruye la aplicación a medida que realiza cambios en esos archivos.

los --open (o solo -o) abre automáticamente su navegador para http://localhost:4200/.

Si su instalación y configuración fue exitosa, debería ver una página similar a la siguiente.

¡Bienvenido a mi-aplicación!

Próximos pasos

  • Para obtener una introducción más detallada a los conceptos fundamentales y la terminología de la arquitectura de aplicaciones de una sola página y los principios de diseño de Angular, lea la sección Conceptos de Angular.

  • Trabaje con el Tutorial Tour of Heroes, un ejercicio práctico completo que le presenta el proceso de desarrollo de la aplicación mediante la CLI de Angular y le explica los subsistemas importantes.

  • Para obtener más información sobre el uso de la CLI angular, consulte la descripción general de la CLI. Además de crear el espacio de trabajo inicial y el andamiaje de la aplicación, puede usar la CLI para generar código angular, como componentes y servicios. La CLI admite el ciclo de desarrollo completo, incluida la construcción, las pruebas, la agrupación y la implementación.

  • Para obtener más información sobre los archivos angulares generados por ng new, consulte Espacio de trabajo y estructura de archivos del proyecto.