Voy a empezar a a documentar las pruebas que voy haciendo con angularjs 2, y la mejor forma es ir creando este tutorial. Angularjs es un framework de javascript, es un proyecto de código abierto que esta mantenido por Google y muchos más, y es por eso que esta cogiendo un gran impulso. El proyecto acaba de lanzar su versión de angularjs 2, y es por tanto la que voy a ir documentando.
El objetivo del proyecto es que los programadores desarrollen un código fuente de calidad, generando HTML semántico, que sea fácil de entender y por tanto de mantener. Se basa en el modelo Vista (HTML), Controlador (Programación) y Modelo (Lógica + base de datos) también conocido como MVC, que precisamente representa la necesidad de separar el código para que sea fácil de mantener.
Angularjs: Instalación
Para empezar necesitamos un servidor que nos permita realizar las pruebas necesarias. Si puedes contratar un servidor de pruebas asegúrate que tenga soporte ya que actualmente no hay mucho hosting que den este soporte.
El primer paso es instalar node.js, podemos descargarlo desde su web: https://nodejs.org/en/download/. Al instalarse tendremos acceso a una consola que usaremos para instalar dependencias.
Ahora es recomendable, aunque no obligatorio, instalar typescript, que es una librería que ayuda con la generación de código fuente javascript (siendo más amigable) que se usa en angularjs 2. Podemos instalarlo desde la consola:
$ npm install -g typescript
Para poder hacer pruebas vamos a crear un fichero HTML básico y lo guardamos con index.html.
<!doctype html> <html> <head> <title>Hola Angularjs 2</title> </head> <body> Kaixo </body> </html>
Además un proyecto angularjs se compone de:
- package.json: Lista de paquetes y scripts que se deben instalar.
- tsconfig.json: Compilar typescript.
- typings.json: Identifica los archivos de typescript.
- systemjs.config.js: Configuraciones js.
Podemos descargarnos estos ficheros de la web de angularjs: Descargar. Estos ficheros podemos colocarlos en la carpeta raíz del proyecto.
Y ahora solo queda desplegar los paquetes de package.json en nuestro proyecto para lo que desde la consola de node nos posicionamos dentro del proyecto y ejecutamos:
npm install
Ahora ya tendremos todos los ficheros necesarios para poder comenzar a usar angularjs, solo tenemos que llamarlos desde nuestro primer fichero:
<script src="node_modules/es6-shim/es6-shim.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script>
Primer ejemplo de angularjs 2
Ahora podemos empezar con nuestra primera aplicación, y podemos comenzar añadiendo una carpeta para guardar los css e imágenes que vayamos usando.
Ahora podemos crear nuestro primer código typescript:
import { bootstrap } from "@angular/platform-browser-dynamic";
import { Component } from "@angular/core";
@Component
(
{
selector: 'hola-angularjs2',
template:
`
<div>
Bienvenidos al mundo de angularjs 2
</div>
`
}
)
class HolaAngularjs2
{
}
bootstrap(HolaAngularjs2);
Aunque este código fuente puede parecer complejo, es muy simple si lo comparamos con la funcionalidad que nos ofrece y comparándolo con el javascript que habría que crear para que hiciese lo mismo. Es importante guardar este fichero con extensión .ts (typescript).
Con los important estamos llamando a los módulos de angularjs que queremos usar en esta aplicación: Componentes y Bootstrap. En este primer ejemplo no es necesario entender que hace cada cosa, lo iremos viendo poco a poco.
Los componentes de angularjs 2
Cuando creamos aplicaciones javascript hacemos referencia a diferentes etiquetas HTML, pero lógicamente solo podemos llamar a las etiquetas propias del DOM como FORM, SELECT, HEADER, etc.
Los componentes de angularjs 2 permiten crear nuestras propias etiquetas HTML, y es lo que acabamos de hacer en el primer ejemplo con la etiqueta: hola-angularjs2.
<hola-angularjs2></hola-angularjs2>
Un componente tiene 2 partes:
- La anotación o estructura de la nueva etiqueta (@componet({})), en donde se define el nombre de la misma: selector y la plantilla html que debe mostrarse cuando se invoca la etiqueta: template. CUIDADO: Las comillas de la template deben ser invertidas.
- Una clase del componente (class nameClass{}). En este primer ejemplo no hacemos uso de ella, pero veremos más adelante que permite crear funcionalidades potentes.
Probar nuestra primera aplicación con angularjs 2
En primer lugar debemos enlazar nuestra primera aplicación angularjs 2 con nuestro código fuente HTML. El código resultante será algo parecido a los siguiente:
<!doctype html>
<html>
<head>
<title>Hola Angularjs 2</title>
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<script src="systemjs.config.js"></script>
<script>
System.import('app-ejemplo.js').then(null, console.error.bind(console));
</script>
<hola-angularjs2></hola-angularjs>
</body>
</html>
Hemos añadido los componentes necesarios para angularjs 2: Carpetas node_modules, llamamos a nuestro css, hacemos referencia al fichero de configuración: systemjs.config.js, que veremos como configurarlo más adelante, y finalmente tenemos un script que carga la aplicación creada.
OJO: Estamos llamando a la aplicación con extensión JS cuando el fichero lo tenemos creado como: app-ejemplo.TS.
Para que todo funcione debemos compilar la aplicación. Primero debemos posicionarnos dentro de la carpeta del proyecto mediante los comandos cd .. (para ir hacia atrás) y cd RUTA (para ir entrando en las carpetas). Y ejecutamos:
tsc
Si estamos dentro de la carpeta del proyecto se creara el correspondiente fichero app-ejemplo.js.
Y con todo esto ya podemos ejecutar nuestra herramienta para lo que necesitamos arrancar el servidor:
npm run lite
Pasados unos instantes, en los que se inicia el servidor, se abrirá nuestro navegador establecido por defecto con la aplicación ejecutándose satisfactoriamente. La ruta por defecto es: localhost:3000 que se puede configurar en el fichero package.json.
Resumen del tutorial para instalar angularjs 2
- Descargar e instalar nodjs. (https://nodejs.org/en/download/).
- Instalar typescript. ($ npm install -g typescript)
- Crear ficheros angularjs 2 (package.json, tsconfig.json, typings.json y systemjs.config.js): (https://angular.io/docs/ts/latest/quickstart.html#!#prereq)
- Desplegar paquetes angularjs 2. (npm install => consola, dentro del proyecto)
- Compilar ficheros ts a js. (tsc => consola, dentro del proyecto)
- Arrancamos el servidor. (npm run lite=> consola, dentro del proyecto)