Hoy vamos a ver la instalación de Angular 2 de forma fácil y estar listos para empezar a desarrollar aplicaciones SPA 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 (versión final).
1. Instalar/Actualizar Node.js y actualizar NPM
Lo primero que tenemos que hacer es instalar Node.js (necesaria versión mayor a la 5) 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 angular2-final cd angular2-final
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+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}
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-final-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",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings":"^1.3.2"
}
}
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) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
Ahora instalamos todos las dependencias en el proyecto con el comando:
npm install
Es posible que después 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. Crear la aplicación básica con Angular 2 para empezar a programar
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';
const platform = platformBrowserDynamic();
platform.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">
<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>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<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.
Con esto como instalar Angular 2 (final), como crear un componente y como hacer un hola mundo.
Paquete de instalación limpia de Angular 2
Más información:
https://angular.io/docs/ts/latest/quickstart.html
