1. Instalar Node.js
Para utilizar su gestor de paquetes npm.
Url para la instalación: https://nodejs.org/en/download/
2. Crear un directorio para proyecto Angular, donde se servirá la aplicación
mkdir angular2
cd angular2
También lo podemos crear la carpeta como siempre desde windows
3. Crear el fichero tsconfig.json
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
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
Lo añadimos a la raíz del proyecto, nos sirve para definir las dependencias necesarias del proyecto para que el gestor de paquetes de node las gestione e instale lo necesario:
{
"name": "angular2-prueba",
"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"
}
}
6. Instalamos las dependencias en el proyecto
npm install
7. Creamos nuestro primer componente
Para ello creamos un nuevo subdirectorio dentro del principal:
mkdir app
cd app
Creamos un archivo llamado app.component.ts:
// 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: 'Primera Prueba con Angular 2'
})
// Clase del componente donde iran los datos y funcionalidades
export class AppComponent { }
8. Creamos el main.ts dentro del directorio app
Se encarga de lanzar el framework al cargar la página:
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
9. Creamos index.html en el directorio raíz
<html>
<head>
<title>Angular 2 - Hola mundo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Cargando...</my-app>
</body>
</html>
10. Compilamos y llamamos la aplicación.
npm start
El compilador de Typescript revisa los cambios en el código para compilarlo y lite-server cargará index.html refrescando los cambios, por lo que para ver los cambios realizados no tenemos que estar refrescando la página.
Podemos entrar con http://localhost:3000/ que carga lite-server o accediendo directamente al directorio donde esté guardado el proyecto.
Fuentes:
1.https://angularjs.org/ 2. http://victorroblesweb.es/2016/04/11/instalar-angular-2-hola-mundo/3. http://www.aprende-facilmente.com/angular-2/tutorial-de-angular-2-parte-1/
No hay comentarios:
Publicar un comentario