Angular 2 es la nueva versión de AngularJS y ya casi tenemos la versión final, hoy vamos a instalar Angular 2 RC2 y vamos a probar el nuevo sistema de rutas con el Router Alpha.7.
Vamos a preparar el entorno de desarrollo para desarrollar aplicaciones web con Angular 2 RC2.
1. Instalar Node.js
Lo primero que tenemos que hacer es instalar node.js para utilizar su gestor de paquetes npm. Lo puedes descargar e instalar desde https://nodejs.org/en/download/
2. Crear un directorio para proyecto Angular
mkdir angular-two-rc2 cd angular-two-rc2
3. Crear el fichero tsconfig.json
Creamos el fichero tsconfig.json con el siguiente contenido, este fichero es la configuración para el compilador de TypeScript:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
4. Añadimos el fichero typings.json.
Creamos el archivo typings.json este fichero también es para que TypeScript funcione correctamente:
{
"ambientDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}
5. Creamos el fichero package.json
Añadimos el archivo package.json a la raíz del proyecto, que nos sirve para definir las dependencias necesarias del proyecto y que el gestor de paquetes de node las gestione e instale lo necesario, le metemos el siguiente contenido:
{
"name": "angular2rc-victorroblesweb",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.2",
"@angular/compiler": "2.0.0-rc.2",
"@angular/core": "2.0.0-rc.2",
"@angular/http": "2.0.0-rc.2",
"@angular/platform-browser": "2.0.0-rc.2",
"@angular/platform-browser-dynamic": "2.0.0-rc.2",
"@angular/router": "3.0.0-alpha.7",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.2",
"systemjs": "0.19.31",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.12",
"bootstrap": "^3.3.6",
"contentful": "3.3.14"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^0.8.1"
}
}
6. Creamos el fichero systemjs.config.js
Este fichero es el fichero principal de configuración de Angular 2 y podríamos modificarlo para ajustarlo a nuestras necesidades, en nuestro caso lo dejamos por defecto.
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
// No umd for router yet
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
Ahora instalamos todos las dependencias en el proyecto con el comando:
npm install
Ahora vamos a crear nuestro primer componente en Angular 2 (un componente es una función que nos permite cargar plantillas y es la forma principal de definir y controlar la lógica de una aplicación), para ello en la raíz del proyecto creamos el directorio app:
mkdir app cd app
Creamos un archivo llamado app.component.ts con la siguientes lineas:
// Importar el núcleo de Angular
import {Component} from '@angular/core';
// Decorador component, indicamos en que etiqueta se va a cargar la plantilla
@Component({
selector: 'my-app',
template: '<h1>Hola mundo con Angular 2 !! victorroblesweb.es</h1>'
})
// Clase del componente donde irán los datos y funcionalidades
export class AppComponent { }
Ahora creamos el fichero main.ts en el directorio app, básicamente se encarga de lanzar el framework al cargar la página:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
Ahora en la raíz del proyecto creamos el fichero index.html:
<!DOCTYPE HTML>
<html>
<head>
<base href="/">
<title>Angular 2 - Hola mundo!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.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>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Cargando...</my-app>
</body>
</html>
Ahora compilamos y lanzamos la aplicación:
npm start
Ahora el compilador de Typescript va a estar revisando los cambios en el código para compilarlo y además se lanzará lite-server que cargará index.html y refrescará el navegador cuando haya cambios.
Podríamos entrar a la web desde http://localhost:3000/ que carga lite-server o accediendo directamente al directorio donde esté guardado el proyecto.
Pruebas con el nuevo Router Alpha.7
Crearemos dos componentes para hacer las pruebas, uno será coches.component.ts y otro ropa.component.ts.
coches.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'coches-tag',
template: `
<h2>COCHES</h2>
<p>Componente de coches</p>`
})
export class CochesComponent { }
ropa.component.ts
import { Component } from '@angular/core';
@Component({
template: `
<h2>ROPA</h2>
<p>Componente de ropa</p>`
})
export class RopaComponent { }
Creamos el fichero app.routes.ts que es el que tendrá toda la configuración de las rutas.
// Usamos el componente router de angular 2
import { provideRouter, RouterConfig } from '@angular/router';
// Importamos nuestros componentes
import { CochesComponent } from './coches.component';
import { RopaComponent } from './ropa.component';
// Definimos las rutas
export const routes: RouterConfig = [
{
path: '',
redirectTo: '/crisis-center',
terminal: true
},
{ path: 'coches', component: CochesComponent },
{ path: 'ropa', component: RopaComponent }
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
En el main.ts vamos a añadir los providers del router para que las rutas funcionen en la aplicación. En este caso el provider es el fichero app.router.ts que hemos creado antes.
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS
])
.catch(err => console.error(err));
El app.component.ts quedará así:
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'my-app',
template: `
<h1>Componente Router</h1>
<nav>
<a [routerLink]="['/coches']">Ruta Coches</a>
<a [routerLink]="['/ropa']">Ruta Ropa</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }
En la plantilla estamos utilizando la directiva routerLink para generar enlaces entre los componentes, que a su vez serán cargados dentro de la etiqueta router-outlet que de forma inteligente detectará en que ruta y que componente estamos, de esta forma no tenemos que cargar los componentes tal cual, por ejemplo para cargar el componente coches de forma aislada usariamos la etiqueta
<coches-tag>
En el navegador quedaría así:
Pues con esto ya sabemos instalar Angular 2 RC2 y usar el componente Router de forma básica 😉
Más información:
https://angular.io/docs/ts/latest/quickstart.html
