En este tutorial te enseñamos algunos atajos que puedes usar en tus proyectos Angular para crear diferentes elementos de tu proyecto. Es decir, te enseñaremos a crear componentes, servicios y modelos de manera automática, para que no te tengas que preocupar de nada más.

Para ello es necesario que tengas instalado Angular CLI. Si no lo tienes, puedes lanzar este comando en la consola:

npm install -g @angular/cli

A continuación debes tener un proyecto creado. De no ser así, Angular CLI también nos ayuda. Puedes ejecutar este comando:

ng new nombreProyecto

Una vez hecho esto, ya tienes un proyecto creado y puedes proceder a lanzar los demás comandos generadores de elementos.

1Generar un componente

Nos vamos a la ruta donde tengamos la carpeta de los componentes y lanzamos:

ng generate component nombreComponente

Automáticamente nos creará una carpeta "nombre-componente" y en su interior encontraremos un fichero nombre-componente.component.ts, un nombre-componente.component.html y un nombre-componente.component.css.

Hecho esto, ya no tenemos que hacer nada más, ya que ya queda registrado el componente en nuestro app.ts

2Generar un servicio

Repetimos el mismo proceso que en el caso anterior, pero vamos a la carpeta de servicios y cambiaremos el "component" por "service".

ng generate service nombreServicio

En este caso nos genera la carpeta nombre-servicio y en su interior el servicio propiamente dicho: nombre-servicio.service.ts.

3 Generar un modelo

Este caso es un tanto distinto ya que no existe un comando específico para generar modelos de datos, pero podemos hacer un apaño. La metodología es la misma que en los casos anteriores pero con una pequeña variación.

Igualmente nos dirigimos a la carpeta de "modelos" y ejecutamos:

ng generate class nombreModelo --type=model

Como vemos, este comando no tiene la misma estructura que los anteriores, pero el resultado será el mismo. Nos genera dentro de nuestra carpeta de "modelos" una carpeta con nombre nombre-modelo en cuyo interior encontramos un fichero nombre-modelo.model.ts.

Como ves, es así de facil crear elementos para tu proyecto Angular, sin mucho esfuerzo, para que te puedas centrar en lo que realmente importa: desarollar tu programa.

Espero que te haya servido, y ¡hasta la próxima!