Instalar Angular 2 RC5 y hacer Hola Mundo

Hoy vamos a ver como instalar Angular 2 RC5 de forma fácil y estar listos para empezar a desarrollar aplicaciones con este framework sin problemas. Simplemente sigue mis instrucciones y copia y pega.

Vamos a preparar el entorno de desarrollo para desarrollar aplicaciones web con Angular 2 RC 5.

1. Instalar/Actualizar Node.js y actualizar NPM
Lo primero que tenemos que hacer es instalar Node.js (necesaria versión 4) para utilizar su gestor de paquetes npm. Lo puedes descargar e instalar desde https://nodejs.org/en/download/

Quizás sea recomendable actualizar a su ultima versión estable si ya lo tienes instalado. Es necesario tener la versión 3 de npm, así que lo actualizamos lanzando el comando:

npm install npm -g

Una vez que termine el de ejecutarse el comando, comprueba que tienes la versión 3 de npm con el comando:

npm -v

Si no te aparece una versión 3, descarga e instala node de nuevo y repite este proceso.

2. Crear un directorio para proyecto Angular

mkdir angular-two-rc5
cd    angular-two-rc5

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
      }
    }

4. Añadimos el fichero typings.json.
Creamos el archivo typings.json este fichero también es para que TypeScript funcione correctamente:

    {
      "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160602141332",
        "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
        "node": "registry:dt/node#6.0.0+20160807145350"
      }
    }

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": "angular2-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.5",
        "@angular/compiler": "2.0.0-rc.5",
        "@angular/core": "2.0.0-rc.5",
        "@angular/forms": "0.3.0",
        "@angular/http": "2.0.0-rc.5",
        "@angular/platform-browser": "2.0.0-rc.5",
        "@angular/platform-browser-dynamic": "2.0.0-rc.5",
        "@angular/router": "3.0.0-rc.1",
        "@angular/router-deprecated": "2.0.0-rc.2",
        "@angular/upgrade": "2.0.0-rc.5",
        "systemjs": "0.19.27",
        "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.15",
        "bootstrap": "^3.3.6"
      },
      "devDependencies": {
        "concurrently": "^2.0.0",
        "lite-server": "^2.2.0",
        "typescript": "^1.8.10",
        "typings":"^1.0.4"
      }
    }

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'
      };
      
      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);
      var config = {
        map: map,
        packages: packages
      };
      System.config(config);
    })(this);

Ahora instalamos todos las dependencias en el proyecto con el comando:

npm install

Es posible que despues de lanzar el comando npm install no se genere el directorio typings que es necesario para que typescript funcione dentro de Angular 2, para generarlo lanzamos el comando:

 
npm run typings install

7. Configurar la aplicación base para empezar con Angular 2
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 Component desde 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 { }

En esta nueva versión de Angular 2 se ha introducido el trabajo con módulos a través del ngModule, como sabes una aplicación de Angular está formada por infinidad de módulos y ahora su carga y gestión se hará en AppModule, de forma que ya no habrá que tocar mucho el main.ts como lo solíamos hacer si no que ahora modificaremos app.module.ts para cargar módulos, configuraciones, etc. Creamos el fichero app.module.ts

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent }  from './app.component';

    @NgModule({
      imports:      [ BrowserModule ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ]
    })

    export class AppModule { }

Estamos usando la función decorador @NgModule y le estamos indicando una serie de metadatos.

  • imports: aquí le pasamos los módulos o componentes internos de angular que es necesario que se carguen en este módulo. Por defecto es necesario cargar BrowserModule.
  • declarations: le pasamos los componentes y directivas que se van a usar en este modulo. En este caso pues se va a usar por defecto el componente AppComponent.
  • boostrap: le indicamos el componente principal que se va a cargar en la aplicación cuando se lance. Normalmente siempre será 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 { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app.module';

    platformBrowserDynamic().bootstrapModule(AppModule);

Ahora salimos de app y vamos a la raíz del proyecto

 cd .. 

y 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(transpilador) 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

Más información:
https://angular.io/docs/ts/latest/quickstart.html

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

1 Comentario

  1. ¡Muchas gracias por publicar estos tutoriales, me están ayudando mucho!

    Responder

Poner un comentario

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