Angular 2 es la nueva versión de AngularJS, es una tecnología muy interesante, veamos como instalar Angular 2 y hacer un Hola Mundo!!
Vamos a preparar el entorno de desarrollo para desarrollar aplicaciones web con Angular 2.
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 cd angular-two
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": "system",
"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": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
}
}
5. Creamos el fichero package.json
Añadimos el archivo package.json a la raíz del proyecto, que nos sive 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\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.14",
"systemjs": "0.19.25",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.9",
"typings":"^0.7.12"
}
}
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 'angular2/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 iran 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 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
Ahora en la raíz del proyecto creamos el fichero index.html:
<html>
<head>
<title>Angular 2 - Hola mundo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Cargar librerías -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configurar SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Mostramos la aplicación -->
<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.
Podriamos entrar a la web desde http://localhost:3000/ que carga lite-server o accediendo directamente al directorio donde esté guardado el proyecto.
¿Tienes problemas con la instalación? Descarga este paquete con una instalación limpia de Angular 2: Angular 2 Instalación limpia Simplemente descomprímelo y con la consola entra dentro de el y lanza el comando npm start.
Más información:
https://angular.io/docs/ts/latest/quickstart.html
