XRL Tech Corner

Tutoriales online de programación, CMS, Raspberry y artículos sobre tecnología. La web de referencia para estudiantes universitarios de informática y aficionados a la tecnología.

Que es angular cli

En un anterior tutorial ya vimos una breve introducción a Angular 1.
A continuación vamos a detallar como instalar, y crear el esqueleto de una aplicación 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

 

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.

 

Que es angular cli

Angular cli es una herramienta en linea de comandos 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.

 

Valora este artículo del blog:
Analizamos los servidores vps de Digital Ocean
Instalar Joomla en Ubuntu

Artículos relacionados

 

Comentarios

No hay comentarios por el momento. Se el primero en enviar un comentario.
¿Ya està registrado? Ingresa Aquí
Invitado
Sábado, 18 Noviembre 2017
Si desea registrarse, por favor rellene los campos de nombre de usuario y nombre.

Imagen Captcha