"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Crear proyectos con Angular CLI

Aunque es posible crear toda la estructura de un proyecto Angular a mano, Angular CLI nos permite hacerlo en cuestión de segundos.

Debemos pensar que Angular CLI es una herramienta de linea de comandos que nos permite trabajar con nuestro proyecto de Angular a muchos niveles. Con ella podemos crear el proyecto (el scaffolding de la aplicación), administrar los distintos recursos que tiene, levantarla en un navegador, depurar, testear, publicar…

Como vemos la potencia que tenemos mediante sus comandos es impresionante, por eso es parte del proyecto oficial de Angular y se recomienda su uso.

Hoy me voy a centrar en como crear proyectos con Angular CLI, ya que presenta muchas ventajas:

  1. La primera ventaja es la velocidad, ya que con esta herramienta un solo comando es suficiente para crear toda la estructura de archivos e instalar todas las dependencias necesarias para nuestro proyecto.
  2. La segunda ventaja es la personalización, ya que mediante el uso de parámetros podemos definir fácilmente que clase de proyecto y bajo que tecnologías se tiene que construir la aplicación.
  3. Integra todas las herramientas necesarias como Webpack ya configurado para hacer los empaquetados, o Jasmine, Protractor y Karma para los tests.
  4. Otra punto a tener en cuenta es el uso de buenas prácticas, no es simplemente construir la base, sino contruirla bien. Usando Angular CLI montamos una aplicación estructurada por los propios creadores del proyecto, y que usará siempre las mejores prácticas y convenciones.
  5. La última ventaja que le veo es que en un entorno colaborativo es mejor usar herramientas standard como Angular CLI. Si hacemos como nos da la gana las aplicaciones pueden funcionar, pero solo nosotros conocemos los entresijos de como está montada. Con este cliente será mas sencillo que otros desarrolladores sepan como está estructurado todo.

Por todos estos motivos es mejor crear nuestras aplicaciones con Angular CLI como recomienda en la documentación oficial.

Si quieres usar otras herramientas para hacer scaffolding de proyectos como Yeoman eres libre, pero dudo que aporten más a un proyecto Angular, que un cliente específico, creado y mantenido por los creadores del framework.

Instalar Angular CLI

Instalarlo es muy sencillo, solo recuerda que debes hacerlo como un paquete global porque la necesitas disponible en cualquier directorio para poder trabajar con sus comandos.

Escribe el siguiente comando:

npm install -g @angular/cli

Con esto ya esta instalada, para tener la certeza de que está funcionando y que tienes instalado puedes ejecutar el siguiente comando:

ng -v

Y debería mostrar algo como esto…

En este caso como estoy dentro de un proyecto se puede ver la paquetería que tiene, sin embargo independientemente de donde ejecutemos este comando tiene que funcionar y al menos mostrarnos la versión de nuestro CLI, de Node y la arquitectura del sistema operativo (esto es un Windows).

Ten claro también que todos los comandos de Angular CLI comienzan con ng. En caso de querer verlos todos de forma rápida puedes escribir

ng help

Crear un proyecto

Ya hemos explicado lo básico de este cliente, ahora vamos a ver como se crea un proyecto y los distintos parámetros que podemos pasarle al comando.

El comando básico para crear un proyecto es este…

ng new nombre_del_proyecto

Usamos new para indicar que queremos un proyecto, sin embargo podemos variar mediante parámetros un montón de características que este tendrá, voy a comentarlas una a una.

 

directory

Con este parámetro indicamos el directorio en que queremos crear nuestro proyecto.

Si lo omitimos usará el nombre del proyecto también para darle nombre al directorio de la instalación. En el siguiente ejemplo creará una carpeta llamada proyecto1 pero si miramos dentro del package.json el nombre de la aplicación será oscarlijo.

ng new oscarlijo --directory proyecto1

La forma abreviada de escribir este parámetro es

ng new oscarlijo -dir proyecto1

Esta bien que tenga esta opción, aunque para ser sinceros obtenemos el mismo resultado creando el proyecto sin él y renombrando después el directorio.

 

dry-run

Este parametro puede ser muy útil, se usa en más sitios y en todos sirve para lo mismo, simular la salida en consola de lo que se obtendría al lanzar el comando.

Es decir, cuando añadimos el parámetro dry-run realmente no va a hacer nada, pero podemos ver el listado de todos los ficheros que se crearían si hubiéramos escrito el comando sin él.

Para usarlo podemos hacer esto.

ng new oscarlijo --dry-run

La forma abreviada de escribir este parámetro es

ng new oscarlijo -d

Puedes hacer la prueba y ver el resultado (no vas a crear nada).

 

inline-style

Fuerza a que los componentes de nuestro proyecto tengan los estilos en linea en lugar de crear un fichero a parte para ellos.

Por defecto su valor es ‘false’, de manera que si lo que quieres es activar esta opción deberás escribirlo de esta manera.

ng new oscarlijo --inline-style=true

La forma abreviada de escribir este parámetro es

ng new oscarlijo -is true

Esta definido dentro del fichero .angular-cli.json, y la clave que tenemos que buscar es inlineStyle, puedes verlo en la linea 62 de esta imagen.

 

inline-template

Fuerza a que los componentes de nuestro proyecto tengan el template en linea en lugar de crear un fichero a parte para él.

Por defecto su valor es ‘false’, de manera que si lo que quieres es activar esta opción deberás escribirlo de esta manera.

ng new oscarlijo --inline-template=true

La forma abreviada de escribir este parámetro es

ng new oscarlijo -it true

Esta definido dentro del fichero .angular-cli.json, y la clave que tenemos que buscar es inlineTemplate, puedes verlo en la linea 63 de esta imagen.

 

minimal

Antes decíamos que con Angular CLI se instalan una serie de herramientas externas para diversas tareas, pero puede que queramos un proyecto muy simple, o queremos ser nosotros quienes vayamos añadiendo las cosas.

Si ese es tu caso debes usar el parámetro minimal, que sirve para que el proyecto se cree con lo mínimo para funcionar.

Para usarlo podemos hacer esto.

ng new oscarlijo --minimal

 

prefix

Sirve para que definamos el prefijo de nuestros componentes, es lógico que tengamos que definir un prefijo ya que es común que consumamos componentes de terceros.

Si no usaramos prefijos, como generalmente usamos palabras parecidas para nombrar las cosas, podrían existir colisiones.

Por defecto el prefijo que usa nuestra aplicación es app, por ejemplo, si tras haberlo creado fueramos al archivo proyecto\src\app\app.component.ts veríamos que el selector que usa es app-root.

Con este parámetro modificamos esto.

ng new oscarlijo --prefix olb

La forma abreviada de escribir este parámetro es

ng new oscarlijo --p olb

Si creando el proyecto de esta manera fueramos al archivo de antes ahora el selector sería olb-root.
Esta definido dentro del fichero .angular-cli.json, y la clave que tenemos que buscar es prefix.

 

skip-install

Durante el proceso de creación, primero se hace el scaffolding de la aplicación, y una vez está creada la estructura de archivos se procede a instalar los paquetes, para que nos entendamos, se ejecuta un npm install.

Este comando sirve para omitir ese segundo paso de instalación de paquetes, creo que es sencillo de entender, pero como una imagen vale más que mil palabras…

Angular CLI - Skip install

Para usarlo podemos hacer esto.

ng new oscarlijo --skip-install

La forma abreviada de escribir este parámetro es

ng new oscarlijo -si

 

style

Uno de los parámetros mas útiles y significativos sin duda, es de esos de los que hay que acordarse. Sirve para definir bajo que lenguaje vas a escribir las hojas de estilos.

Por defecto si omites declararlo usará CSS, pero puedes pedirle que transpile desde otros lenguajes como LESS, Stylus, SASS y SCSS.

Por ejemplo, queremos hacer un proyecto Angular 5 que tenga los estilos en scss (que es lo que suelo usar), simplemente debes escribir este comando.

ng new oscarlijo --style=scss

Al hacer esto:

  1. Las hojas de estilo del proyecto ya tienen extensión .scss
  2. Las hojas de estilo que definimos a partir de entonces usando el cliente también se crean con esta extensión.
  3. Hemos instalado los paquetes necesarios para trabajar con él, en este caso node-sass.
  4. Y hemos configurado el webpack para que transpile desde este lenguaje tanto las hojas de estilo independientes, como los estilos «en linea» en los componentes.

Lo mismo es válido para los otros casos, aunque no es el tema de este artículo creo que es interesante aclarar que podemos cambiar en cualquier momento el lenguaje que usamos para los estilos.

Esta definido dentro del fichero .angular-cli.json, y la clave que tenemos que buscar es styleExt, os dejo una captura…

Angular CLI - Styles

También puedes cambiarlo usando el comando.

ng set defaults.styleExt scss

Pero tienes que tener en cuenta que modificar este parámetro no va convertir tus estilos mágicamente a otro lenguaje, tampoco te va a cambiar las extensiones de las hojas de estilos creadas anteriormente.

De manera que es mejor que tengas claro que lenguaje vas a utilizar antes de empezar con el proyecto, porque si decides cambiarlo después cuando ya tengas muchos ficheros y mucho código. El trabajo de renombrar las extensiones y de refactorizar los estilos ya declarados te lo vas a comer.

 

verbose

Este parámetro sirve para que la consola muestre más información durante el proceso (en este caso de creación del proyecto).

Para usarlo podemos hacer esto.

ng new oscarlijo --verbose

La forma abreviada de escribir este parámetro es

ng new oscarlijo -v

En el proceso de creación no vas a notar la diferencia, yo al menos he probado a crear dos proyectos al mismo tiempo, uno en modo verbose y otro sin él y la salida por consola fue la misma.

Para otros comandos si que tiene más sentido, para el de instalación poco lo vas a usar, salvo que te rompa el proceso (que es muy raro).

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)