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.
¿Que ha realizado angular cli por nosotros?
- 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.
- Ha instalado por nosotros todas las dependencias del proyecto utilizando npm.
- TypeScript configurado.
- Configurado las pruebas unitarias.
- 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.
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.
- Generar módulos con ng generate module mi-modulo
- Generar componentes con ng generate component mi-componente
- Generar servicios con ng generate service mi-servicio
- 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
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
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
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.
- --flat (Boolean) (Default: false) Establece si genera o no una carpeta para ese componente.
- --export (Boolean) (Default: false) El componente generado será exportado en el módulo donde se ha registrado.
- --prefix Establece el prefijo de componente, por defecto se establece el utilizado al general la aplicación.
- --inline-style (aliases: -is) (default value: false( Establece si genera o no un archivo para los estilos.
- --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.
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.
- --module (aliases: -m) Especifica el módulo donde será registrado el servicio.
- --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
- --export Especifica si el pipi será exportado.
- --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.