Introducción

Angular CLI es una herramienta de línea de comandos que permite crear, administrar, construir y probar una aplicación Angular. Se basa en el Angular Development Kit, que es un conjunto de interfaces para usar la potencia de Angular más fácilmente.

Angular CLI está disponible en npm (https://www.npmjs.com/package/@angular/cli). Su instalación se puede verificar mostrando su versión:

ng v

Verificación de la presencia de Angular CLI y su version

Si el comando anterior devuelve un error, esto significa que Angular CLI no está instalado correctamente (consulte el capítulo Instalación).

Angular CLI permite generar el esqueleto de una aplicación, un componente, una directiva, un servicio, una clase TypeScript, una interfaz, un módulo y muchas otras cosas. Es una parte indispensable de la cultura Angular.

Creación de una nueva aplicación Angular

1. Generación de un nuevo proyecto con AngularCLI

cd C:\AngularYJavaScript\Angular\

ng new miProyectoAngular

Creación de un nuevo proyecto Angular

Después de aceptar el uso del módulo de enrutamiento y las hojas de estilo CSS, Angular CLI inicializa un nuevo proyecto Angular llamado miProyectoAngular en la carpeta actual.

La mayoría de los entornos de desarrollo profesional permiten la inicialización de un nuevo proyecto Angular.

WebStorm, por ejemplo, permite la creación de un nuevo proyecto Angular fácilmente:

File > New > Project > Angular CLI

Creación de un nuevo proyecto Angular con WebStorm

Este entorno de desarrollo no ha inventado nada de nada; rehace exactamente las mismas operaciones que las realizadas en la línea de comandos. Su única ventaja es hacer la operación más estética con menús y sombras en los cuadros de diálogo.

Visual Studio no permite de forma nativa crear un nuevo proyecto Angular de esta manera. La instalación de módulos adicionales es similar a lo que hace WebStorm, pero la instalación de módulos lleva casi tanto tiempo como escribir las dos líneas de comando para crear una aplicación Angular.

En su estado actual, el proyecto ya es funcional. Para estar seguro, simplemente abra una terminal dentro del entorno de desarrollo...

Componentes

Un componente es una clase de TypeScript que contiene toda la lógica. Posteriormente, se volverá más complejo al integrar una vista y un estilo.

El componente es la parte del controlador del patrón de arquitectura MVC (modelo-vista-controlador) que se utiliza en muchos marcos de aplicaciones web.

Angular CLI permite la creación de un componente de forma rápida y sencilla. Con fines educativos, crearemos un componente desde cero. La práctica al final de este capítulo utilizará el asistente de línea de comandos.

Este componente se ubicará en la carpeta src de la aplicación creada por Angular CLI.

mkdir C:\AngularYJavaScript\Angular\miProyectoAngular\src\app\ 
components\mpc

1. Clase TypeScript

El primer componente se creará en el archivo mpc.component.ts dentro de la carpeta mpc.

echo "" > C:\AngularYJavaScript\Angular\miProyectoAngular\src\app\ 
components\mpc\mpc.component.ts

code C:\AngularYJavaScript\Angular\miProyectoAngular

Por convención de nomenclatura, el archivo TypeScript de un componente angular siempre se llama nombre.component.ts.

Dado que un componente es solo una clase de TypeScript, su sintaxis es relativamente simple.

// C:\AngularYJavaScript\Angular\miProyectoAngular\src\app\ 
components\mpc\mpc.component.ts  
export class MpcComponent {  
  
}

La palabra clave export colocada antes de la palabra clave class permitirá...

Angular CLI y la creación de componentes

1. Generar un componente con AngularCLI

Afortunadamente, todas las acciones realizadas hasta ahora se han simplificado sobremanera con Angular CLI.

ng generate component nombreDelComponente [option(s)]

Este comando tiene diez opciones.

Para recrear el componente mpc de forma idéntica:

ng generate component components/mpc -inlineStyle=true 
-inlineTemplate=true -skipTests=true

Las tres opciones, respectivamente, le permiten no crear ni hojas de estilo, ni plantilla, ni archivo de prueba unitaria.

La buena práctica consiste, por el contrario, en deportar estos tres archivos. Dado que, por defecto, estas tres opciones están configuradas a false, el comando se vuelve aún más sencillo.

ng generate component components/mpc

Mejor aún, Angular CLI hace posible simplificar todavía más la generación de componentes utilizando solo la primera letra de estas palabras clave: ng g c components/mpc

Angular CLI va a:

crear el archivo TypeScript para los test unitarios,
crear el archivo TypeScript para la lógica del componente,
crear el archivo HTML para la plantilla,
crear el archivo CSS para la hoja de estilos,
agregar la importación y declaración del componente en el módulo principal.

Esto ahorra mucho tiempo, sabiendo que crear un componente desde cero lleva bastante tiempo a medida que una aplicación crece en tamaño....

Práctica

1. Enunciado

Cree una nueva aplicación Angular llamada PokemonManager.

Se tratará de una aplicación de gestión para Pokémon, una franquicia de Nintendo cuyos juegos han vendido más de 30 millones de copias. También es un juego de cartas y unos dibujos animados.

Esta aplicación será el hilo conductor de este libro. Nos permitirá la asimilación de todos los conceptos que debe dominar un desarrollador júnior de Angular. Al final de este libro, será una aplicación funcional real.

Cree dos componentes llamados generaciones y pokemons en un directorio de componentes en el directorio fuente de la aplicación.

Para ir más allá, cree un repositorio en GitHub que alojará el código de su aplicación.

Para ir aún más lejos, cree un archivo llamado .travis.yml (el primer «.» es importante, ya que así es como queremos decir que se trata de un archivo oculto) en la raíz de la aplicación PokemonManager para poder hacer una integración continua en el final de este libro.

2. Corrección

La creación de una nueva aplicación Angular se realiza gracias a Angular CLI en línea de comandos:

cd C:\AngularYJavaScript\Angular  
ng new PokemonManager

Se crea la estructura básica de la aplicación. La carpeta se puede abrir...

Angular CLI - Componentes