Instalar Angular 2 RC2 + Pruebas con el Router

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.

instalar angular 2

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í:
componente router angular 2

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

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

Poner un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *