angular cli

En este artículo hacemos una introducción a angular cli

En un anterior tutorial ya vimos una breve introducción a Angular 1 para principiantes.
A continuación vamos a detallar como instalar, y crear el esqueleto de una aplicación con angular utilizando angular cli.

Como punto de partida para utilizar Angular cli, necesitamos al menos tener instalado Node 6.9.x y npm 3.x.x.
Si no conoces la versión actual de tu instalación, puedes ejecutar node -v y npm -v.

En el caso de que no tengas estas versiones hay que seguir los siguientes pasos:

#1 Descargar el binario para Linux, Windows, o ARM

Por ejemplo en el caso de un Linux x64:
wget https://nodejs.org/dist/v6.11.4/node-v6.11.4-linux-x64.tar.xz

#2 Descomprimir el fichero en /usr/lib/nodejs (o la ubicación que tú prefieras)

sudo mkdir /usr/lib/nodejs
sudo tar -xJvf node-v6.11.4-linux-x64.tar.xz -C /usr/lib/nodejs 
sudo mv /usr/lib/nodejs/node-v6.11.4-linux-x64 /usr/lib/nodejs/node-v6.11.4

#3 Editar el .profile de tu cuenta de usuario para añadir node al PATH

# Nodejs
export NODEJS_HOME=/usr/lib/nodejs/node-v6.11.4
export PATH=$NODEJS_HOME/bin:$PATH

Cargar el profile:
. .profile

#4 Verificar la versión de node y npm

$ node -v
$ npm -v

Por último es recomendable esto también:

sudo ln -s /usr/lib/nodejs/node-v6.11.4/bin/npm /usr/bin/npm
sudo ln -s /usr/lib/nodejs/node-v6.11.4/bin/node /usr/bin/node

Como sugerencia, te recomiendo algunos libros de html, libros de css, libros de javascript y libros de Java que sirven para entrar en detalle en estas materias.

Instalar angular cli

Una vez lo tengamos instalado instalamos angular cli globalmente:
npm install -g @angular/cli

En un par de minutos estará listo para su uso. Esto nos ofrece un nuevo comando que es ng.

Que es angular cli

Angular cli es una herramienta en modo de comandos (Command Line Interface) muy potente que permite crear una aplicación angularjs, crear componentes específicos, testear la aplicación en un entorno de desarrollo y ejecutar test unitarios o end-to-end.

Crear una aplicación angularjs nueva

Para crear una nueva aplicación basta con usar ng new xrl-app donde xrl-app es el nombre de la aplicación angular.

Angular cli es capaz de realizar muchas funciones, la primera es crear una estructura de directorios y de archivos particularmente útil. Veremos que crea varias carpetas con archivos, pero una carpeta importante es src y src/app con los códigos fuentes de un componente raíz (app-root) y sus ficheros en TypeScript (.ts), html, y css (vacío).

create xrl-app/src/app/app.module.ts (314 bytes)
create xrl-app/src/app/app.component.css (0 bytes)
create xrl-app/src/app/app.component.html (1120 bytes)
create xrl-app/src/app/app.component.spec.ts (986 bytes)
create xrl-app/src/app/app.component.ts (207 bytes)

Arrancar el servidor

cd xrl-app
ng serve --open (la orden --open abre un navegador en el servidor localhost)
si estás en un servidor en modo texto:
ng serve --host ip_servidor

se puede testear en el navegador accediendo a http://ip_servidor:4200/

Editar los componentes de la aplicación angularjs

Angular cli crea un componente raíz por defecto que se llama app-root.

Se encuentra en xrl-app/src/app/app.component.ts

Editando este fichero se puede cambiar el título por ejemplo:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
}

Cambiamos el title = 'Mi primera app';

El template para ese componente podría tener:

h1
Welcome to {{title}}!
h1

Para definir un estilo para ese componente editamos app.component.css: Por ejemplo con:

h1 {
color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%;
}

De este modo podemos configurar tanto el template como los styles del componente en cuestión, que en nuestro caso es simplemente el título en un encabezado.

Una de las principales características de angular cli es que podemos editar los cambios y ver el resultado a tiempo real en el navegador.

Es decir si cambio el componente (Typescript), el template (html) o los styles (css) automáticamente veo el resultado en el navegador.

Generar componentes, directivas, servicios y tuberías

Se pueden generar componentes usando el comando:ng generate component mi-comp. Para generar el resto se utiliza la misma sentencia pero cambiando la palabra component por directive, pipe, service, class, guard, interface, enum o module.

angular cli añadirá las referencias necesarias en el fichero app.module.ts

Si queremos ver la ayuda podremos lanzar el comando: ng --help.