/ Angular

Angular-cli configuracion y utilizacion

Con angular cli, los desarrolladores frontEnd seguro tendremos más aprecio a este framework, ya que, en la versión 2 era muy tedioso iniciar un nuevo proyecto. Con angular cli podemos generar proyectos rápidamente, utilizando comandos que veremos a continuación.

Para el desarrollo de este tutorial, doy por hecho que ya tienes instalado TypeScript, nodejs y un editor como Visual Studio Code u otro de tu preferencia.

Aprovecharé este tutorial para generar la estructura de una aplicación angular que creare en el próximo tutorial, Será un directorio de libros muy sencillo para empezar a utilizar las rutas, servicios y autenticación en angular.

1. Instalación y configuración global de angular cli

npm install -g @angular/cli@latest

A día de hoy angular cli está en la versión 1.0.0, si estás utilizando una versión inferior puedes ver la guía de actualización.

Ya tenemos angular cli instalado en nuestro sistema, para comprobarlo podemos ejecutar ng en la consola para visualiza el listado de comandos y sus opciones.

Si ha funcionado el comando anterior, entonces tenemos todo listo para utilizar angular cli.

Para listar la ayuda de angular cli utilizamos ng help o bien la ayuda para una opción específico ng help new, por defecto nos muestra la ayuda de todos los comandos disponibles.

2. Generar nueva aplicación con angular cli

Para crear un nuevo proyecto con angular cli ejecutamos:

ng new BookDirectory

El comando anterior genera un directorio con el nombre asignado al proyecto, con lo necesario para iniciar una aplicación básica configurada para el desarrollo.
generar nuevo proyecto en angular cli

¿Que ha realizado angular cli por nosotros?

  1. Ha inicializado una nueva aplicación angular 5, basándose en los estándares que se proponen en la documentación oficial de angular 5.
  2. Ha instalado por nosotros todas las dependencias del proyecto utilizando npm.
  3. TypeScript configurado.
  4. Configurado las pruebas unitarias.
  5. Ha generado el módulo principal de la aplicación.

Opciones del comando ng new

Estás son algunas de las opciones más relevantes de este comando, para verlas todas puedes utilizar ng help new

En mi opinión, estos son las opciones más relevantes a la hora de general un proyecto.

  • --style (String) (Default: css) Yo utilizo SCSS con lo cual, utilizo --style=scss
  • --routing (Boolean) (Default: false) Configura el módulo principal de la aplicación.
  • --prefix (String) (Default: app) prefijo utilizado en el selector de los componente, normalmente lo cambio por una abreviatura de la empresa del proyecto.
  • --skip-git (Boolean) (Default: false): No inicializa un repositorio .git dentro dentro del proyecto.

Este sería el código que utilizaría para iniciar un proyecto con angular cli:

ng new BookDirectory --style=scss --routing=true --prefix=gp

3. Arrancar la aplicación con ng server

para iniciar la aplicación creada anteriormente, ejecutamos el siguiente comando dentro del directorio BookDirectory: ng server

> ng server
** NG Live Development Server is running on http://localhost:4200 **
 11% building modules 14/24 modules 10 active ...emo/node_modules/zone.js/dist/zone.jswebpack: wait until bundle finished: /
Hash: cc2934f7726c936592f4
Time: 9089ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 171 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.48 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

ejecutar-aplicacion con angular cli

4. El generador de angular CLI

El comando ng generate será el más utilizado durante el desarrollo, nos ayuda a generar nuevos componentes, módulos, servicios, rutas, pipes y otras funcionalidades.
Gracias al generador de angular cli podemos realizar lo siguiente de forma simple.

  1. Generar módulos con ng generate module mi-modulo
  2. Generar componentes con ng generate component mi-componente
  3. Generar servicios con ng generate service mi-servicio
  4. Generar pipe con ng generate pipe mi-servicio

4.1 Generar nuevo módulo con ng generator

para generar nuevos módulos con angular cli utilizaremos el siguiente comando:

ng generate module [nombre]

Al igual que el comando new, este tiene opciones que podemos utilizar, aquí las más relevantes.

  • --flat (Boolean) (Default: false) Determina si el módulo a generar, será contenido en una carpeta.
  • --module (aliases: -m) Especifica donde se debe importar el módulo.
  • --routing (Boolean) (Default: true) Especifica si debe generar el módulo de rutas.

Este sería el código para generar un nuevo módulo, con rutas en su propio directorio:

ng generate module layout --routing=true

generar-modulo-angular-cli

Nos ha generado el módulo layout y el módulo de rutas. Además LayoutRoutingModule está correctamente configurado en el módulo LayoutModule.

4.2 Generar nuevo componente

Quiero generar el componente Login en la carpeta app, utilizaré la configuración por defecto de angular cli para generar componentes.

ng g c login

generar-componentes-con-angular-cli

Como puedes ver en la imagen anterior, nos ha generado todos los archivos necesarios del componente. Si te fijas en la última línea, angular cli es inteligente y registra el componente en el módulo encontrado al mismo nivel que el componente.

También es posible que quieras generar un componente dentro de un módulo ya existente, para ello utilizamos el siguiente comando:

ng g c layout/main-header

generar-componentes-en-angular-cli

Se ha generado main-header dentro de layout. Con lo cual, para generar un componente registrado en un módulo, debes agregar la ruta del módulo (layout/[nombre]) antes del nombre del componente.

Opciones del comando ng generate module

Estos son algunos de los comando que veo más interesante tener presente.

  1. --flat (Boolean) (Default: false) Establece si genera o no una carpeta para ese componente.
  2. --export (Boolean) (Default: false) El componente generado será exportado en el módulo donde se ha registrado.
  3. --prefix Establece el prefijo de componente, por defecto se establece el utilizado al general la aplicación.
  4. --inline-style (aliases: -is) (default value: false( Establece si genera o no un archivo para los estilos.
  5. --inline-template (aliases: -it) (default value: false( Establece si genera o no un archivo para el template.

Si quieres ver más opciones del comando ng generate componente, utiliza la ayuda (ng help) de angular cli o la documentación oficial de angular cli.

4.3 Generar servicios con angular cli

Para genera un nuevo servicio con angular cli, utilizamos el siguiente comando:

ng generate service [nombre]

Hay que tener en cuenta que angular cli no lo registra en los providers del módulo de forma predeterminada. Si desea registrarlo en algún módulo debes especificarlo en la opción --module.

Ejemplo: Para generar un servicio que este registrado en app.component.ts debemos ejecutar el siguiente comando.

ng generate service demo --module=app.module

De esta forma, tenemos el servicio demo.service.ts registrado en el módulo app.module.ts y todos los componentes registrados en este módulo ya pueden utilizar este servicio.

generar-servicios-angular-cli

Como puedes notar, al ejecutar el comando anterior, angular cli actualiza automáticamente el module especificado, agregando el servicio en su propiedad providers.

Así quedaría el módulo app.modulo.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DemoService } from './demo.service';

@NgModule({
  declarations: [
    AppComponent,
    DemoComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [DemoService],
  bootstrap: [AppComponent],
  exports: [DemoComponent]
})
export class AppModule { }

Opciones del comando ng generate service

Con los servicios no tenemos muchas opciones, estás dos son las que más utilizo.

  1. --module (aliases: -m) Especifica el módulo donde será registrado el servicio.
  2. --spec Especifica si quieres generar archivo de prueba.

4.4 Generar pipe

Pipe es el equivalente a un filtro en angular 1.x. Nos ayuda a transformar valores en las plantillas.
para agregar pipe personalizados en nuestra aplicación utilizaremos el siguiente comando:

ng generate pipe add-icon

> ng generate pipe add-icon
installing pipe
  create src/app/add-icon.pipe.spec.ts
  create src/app/add-icon.pipe.ts
  update src/app/app.module.ts

El comando anterior nos genera el archivo add-icon.pipe.ts a nivel de AppModule, con lo cual el pipe se incluye en la propiedad declarations: [AddIconPipe] de AppModule en el archivo app.module.ts

Por defecto este pipe, sólo se puede utilizar en los componentes declarados en AppModule, si quieres compartir este pipe con otros módulos hay que exportarlo en el AppModule, De esta forma otros módulos pueden declararlos y dejarlo disponible para sus componentes.

Opciones del comando ng generate pipe

  1. --export Especifica si el pipi será exportado.
  2. --module (aliases: -m) Modulo donde será declarado.

Para visualizar todas las demás opciones, ejecuta ng generate --help en tu terminal.

EJEMPLO LOWERCASE PIPE

Un ejemplo claro es el Pipe lowerupper que trae angular por defecto.

/**
 * Transforms text to lowercase.
 *
 * {@example  common/pipes/ts/lowerupper_pipe.ts region='LowerUpperPipe' }
 *
 * @stable
 */
@Pipe({name: 'lowercase'})
export class LowerCasePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;
    if (typeof value !== 'string') {
      throw invalidPipeArgumentError(LowerCasePipe, value);
    }
    return value.toLowerCase();
  }
}

Otras utilidades que se pueden generar con angular cli

  • Generar clases: ng generate class [nombre]
  • Generar interface: ng generate interface [nombre]
  • Generar Guard: ng g guard mi-guard
  • Generar directivas: ng generate directive [nombre]

La gran mayoría los comandos utilizado en el generador de angular clic tienen una abreviatura:

  • ng g m [nombre] : Genera un módulo.
  • ng g c [nombre] : Genera un componente.
  • ng g s [nombre] : Genera un servicio.
  • ng g i [nombre] <type> : Genera una interfaz.
  • ng g d [nombre] : Genera directiva.
  • ng g p [nombre] : Genera Pipe.
  • ng g g [nombre] : Genera Guard.
  • ng g e [nombre] : Genera Enum.
  • ng g cl [nombre] : Genera clase.

Conclusión

En el transcurso del artículo hemos aprendido a iniciar un proyecto con angular cli, generar nuevas funcionalidades, etc.

Angular cli tiene muchas más herramientas importantes para realizar test o pasar nuestra aplicación a producción, pero son temas muy amplios que necesitan un artículo para ser bien explicado. Más adelante hablaremos de las pruebas unitarias en angular 5 y como llevar nuestra aplicación a producción con angular cli.

Mi idea es ir explicando todo el proceso de desarrollo de una aplicación angular, desde la configuración inicial hasta llevarla a producción.

Espero te sea de utilidad este tutorial.