Explicación de la interfaz de línea de comandos angular

Angular está estrechamente asociado con su interfaz de línea de comandos (CLI). La CLI agiliza la generación del sistema de archivos Angular. Se ocupa de la mayor parte de la configuración detrás de escena para que los desarrolladores puedan comenzar a codificar. La CLI también tiene una curva de aprendizaje baja que es recomendable para cualquier principiante que quiera entrar de inmediato. ¡Caramba, incluso los desarrolladores de Angular experimentados confían en la CLI!

Instalación

La CLI de Angular requiere Node.js y Node Packet Manager (NPM). Puede comprobar si estos programas con el comando en el terminal: node -v; npm -v. Una vez instalado, abra un terminal e instalar el CLI angular con este comando: npm install -g @angular/cli. Esto se puede ejecutar desde cualquier lugar de su sistema. La CLI está configurada para uso global con la -gbandera.

Verificar la CLI está allí con el comando: ng -v. Esto genera varias líneas de información. Una de estas líneas indica la versión de la CLI instalada.

Reconozca que nges el componente básico de la CLI. Todos tus comandos comenzarán con ng. Es hora de echar un vistazo a cuatro de los comandos más comunes con el prefijo ng.

Comandos de teclado

• ng nuevo
• ng servir
• ng generar
• ng build
• ng actualización

Los términos clave para cada uno de estos son bastante reveladores. Juntos, comprenden lo que necesitará para comenzar a trabajar con Angular. Por supuesto, hay muchos más. Todos los comandos se describen en la documentación de GitHub de CLI1. Probablemente encontrará que los comandos enumerados anteriormente cubrirán las bases necesarias.

ng nuevo

ng newcrea un nuevo sistema de archivos Angular. Este es un proceso surrealista. Navegue a una ubicación de archivo deseable para la nueva generación de aplicaciones. Escriba este comando de la siguiente manera, reemplazando [name-of-app]con lo que quieras: ng new [name-of-app].

[name-of-app]Debería aparecer un sistema de archivos debajo de la carpeta . Siéntete libre de explorar lo que hay dentro. Intente no realizar ningún cambio todavía. Todo lo que necesita para ejecutar su primera aplicación Angular viene empaquetado en este sistema de archivos generado.

ng servir

Para que la aplicación se ejecute, el ng servecomando debe ejecutarse dentro de la [name-of-app]carpeta. Cualquier lugar dentro de la carpeta servirá. La CLI de Angular debe reconocer que está dentro de un entorno generado con ng new. Se ejecutará siempre que se presente esta condición. Seguir adelante y probarlo: ng serve.

La aplicación se ejecuta en el puerto 4200 de forma predeterminada. Puede ver la aplicación Angular navegando localhost:4200en cualquier navegador web. Angular funciona en todos los navegadores. A menos que esté utilizando una versión anterior de Internet Explorer, aparecerá la aplicación. Muestra el logotipo oficial de Angular junto con una lista de enlaces útiles.

Ok, la aplicación se ejecuta. Es de esperar que funcione, pero necesitas saber qué está pasando debajo del capó. Consulte de nuevo el [name-of-app]sistema de archivos. Navegar [name-of-app] -> src -> app. Ahí se encuentran los archivos responsables de lo que viste localhost:4200.

ng generar

Los .componentarchivos definen un componente angular que incluye su lógica ( .ts), estilo ( .css), diseño ( .html) y prueba ( .spec.ts). Destaca app.module.tsespecialmente. Juntos, estos dos grupos de archivos funcionan juntos como componenty module. Ambos componenty moduleson dos ejemplos separados de esquemas angulares. Los esquemas clasifican los diferentes bloques de código impulsados ​​por un propósito que se pueden generar con ng generate.

Por el bien de este artículo, comprenda que moduleexporta e importa activos hacia y desde un árbol de componentes subyacente. A se componentocupa de una sección de la interfaz de usuario. La lógica, el estilo, el diseño y las pruebas de esa unidad permanecen encapsulados en los distintos .componentarchivos.

En cuanto a ng generate, este comando puede generar esqueletos para cada uno de los esquemas angulares disponibles2. Navega a [name-of-app -> src -> app]. Intenta generar un nuevo componentejecutando: ng generate component [name-of-component]. Reemplácelo [name-of-component]con lo que desee. Aparecerá un nuevo archivo [name-of-component]junto con los componentarchivos necesarios .

Puede ver que ng generateacelera el código estándar de Angular. ng generatetambién conecta las cosas. Los esquemas creados dentro del contexto de un sistema de archivos angular se conectan con el módulo raíz del sistema. En este caso, estaría app.module.tsdentro del archivo [name-of-app -> src -> app].

ng build

Angular es una herramienta de interfaz. La CLI realiza sus operaciones en nombre de la interfaz. ng servese encarga de la configuración del servidor back-end. Esto mantiene el desarrollo completamente enfocado en la parte delantera. Dicho esto, también debe ser posible conectar su propio back-end a la aplicación Angular.

ng buildsatisface esta necesidad. Antes de probarlo dentro del sistema de archivos. Navega a [name-of-app] -> angular.json. Busque esta línea de código: "outputPath": "dist/my-app".

Esta línea de configuración determina dónde ng buildvuelca sus resultados. Los resultados son toda la aplicación Angular compilada en una carpeta dist/my-app. Dentro de esa carpeta, existe index.html. Se puede ejecutar toda la aplicación Angular index.html. No ng servees necesario desde aquí. Con este archivo, puede conectar fácilmente su back-end.

Darle una oportunidad: ng build. Nuevamente, esto debe ejecutarse dentro del sistema de archivos Angular. Basado en el valor clave de “outputPath:”in angular.json. Se generará un archivo donde la aplicación original está completamente compilada. Si se queda con “outputPath:”el mismo, la aplicación compilada será en: [name-of-app] -> dist -> [name-of-app].

ng actualización

En la actualización angular cli ng, realice una actualización automática en todos los paquetes angulares y npm a las últimas versiones.

Aquí está la sintaxis y las opciones que se pueden usar con ng update.

ng update [package]

Opciones

• en seco --dry-run (alias: -d)

  Ejecute sin hacer ningún cambio.

• fuerza --force

  Si es falso, aparecerá un error si los paquetes instalados son incompatibles con la actualización.

• todas --all

  Ya sea para actualizar todos los paquetes en package.json.

• siguiente --next

  Utilice la versión más grande, incluidas las versiones beta y RC.

• solo migrar --migrate-only

  Solo realiza una migración, no actualiza la versión instalada.

• desde --from

  Versión desde la que migrar. Solo disponible con un único paquete que se está actualizando y solo en la migración.

• a --to

  Versión hasta la que aplicar las migraciones. Solo disponible con un único paquete que se está actualizando y solo en migraciones. Requiere de para ser especificado. Por defecto a la versión instalada detectada.

• registro --registry

  El registro NPM que se utilizará.

Estos comandos cubren los conceptos básicos. La CLI de Angular es una comodidad increíble que acelera la generación, configuración y expansión de aplicaciones. Hace todo esto mientras mantiene la flexibilidad, lo que permite al desarrollador realizar los cambios necesarios.

Consulte esos enlaces localhost:4200si aún no lo ha hecho. No olvides correr ng serveantes de abrirlo. Con una mejor comprensión de la CLI, ahora está listo para aprender más sobre lo que generan sus comandos más esenciales.

Más información:

• Los mejores ejemplos angulares
• Los mejores tutoriales de Angular y AngularJS
• Cómo validar formas reactivas angulares