- Cuarto, creamos systemjs.config.js que es una alternativa para cargar nuestros módulos de aplicaciones y bibliotecas.
| (function(global) { | |
| // Mapa que indica al cargador del sistema dónde buscar cosas | |
| var map = { | |
| ‘app‘: ‘app‘, | |
| ‘@angular‘: ‘node_modules/@angular‘, | |
| ‘angular2-in-memory-web-api‘: ‘node_modules/angular2-in-memory-web-api‘, | |
| ‘rxjs‘: ‘node_modules/rxjs‘ | |
| }; | |
| // paquetes que indica al cargador de Sistema de cómo se carga cuando no hay nombre de archivo y / o sin extensión | |
| 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‘, | |
| ]; | |
| function packIndex(pkgName) { | |
| packages[‘@angular/‘+pkgName] = { main: ‘index.js‘, defaultExtension: ‘js‘ }; | |
| } | |
| function packUmd(pkgName) { | |
| packages[‘@angular/‘+pkgName] = { main: ‘/bundles/‘ + pkgName + ‘.umd.js‘, defaultExtension: ‘js‘ }; | |
| } | |
| var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; | |
| // Añadir entradas de los paquetes para los paquetes de angular | |
| ngPackageNames.forEach(setPackageConfig); | |
| var config = { | |
| map: map, | |
| packages: packages | |
| }; | |
| System.config(config); | |
| })(this); |
- Quinto instalamos nuestros paquetes npm en la carpeta de nuestro proyecto.
raitom@raitom-linux:~/Documents/Angular2$ npm install
- Sexto, creamos la carpeta app en nuestro proyecto para agregar los siguientes componentes:
app.component.ts este componente simple de inicio rápido tiene una estructura esencial que otros componentes tienen y es la de importar, decorar un selector y tener una clase de componente que controla la apariencia y una vista a través de su plantilla.
| import { Component } from ‘@angular/core‘; | |
| @Component({ | |
| selector: ‘my-app‘, | |
| template: ‘<h1>Usando angular2 con TypeScript</h1>‘ | |
| }) | |
| export class AppComponent { } |
main.ts con esto cargamos el componente raíz para poder importar las dos cosas que necesitamos para nuestro proyecto, en este caso El navegador de angular de la función platformBrowserDynamicla y el módulo de aplicación, AppModule.
| import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic‘; | |
| import { AppModule } from ‘./app.module‘; | |
| platformBrowserDynamic().bootstrapModule(AppModule); |
app.module.ts Componemos aplicaciones de angular en bloques estrechamente relacionados con la funcionalidad de los módulos angulares . Cada aplicación requiere al menos un módulo, el módulo de la raíz , que llamamos AppModulepor convención.
Crear el archivo app/module.ts con el siguiente contenido:
| 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 { } |
- Séptimo, agregamos index.html en la carpeta de nuestro proyecto, aquí definimos las bibliotecas de JavaScript, el archivo de configuración SystemJS, también importamos y ejecutamos el módulo app que se refiere al archivo main y por ultimo <my-app> etiqueta en el <body> que muestra la visión de nuestra aplicación entre estas etiquetas.
| <html> | |
| <head> | |
| <title>Angular 2 y TypeScript</title> | |
| <meta charset=«UTF-8«> | |
| <meta name=«viewport« content=«width=device-width, initial-scale=1«> | |
| <link rel=«stylesheet« href=«styles.css«> | |
| <!– 1. Cargar librerias –> | |
| <!– 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. cargamos la Configuracion SystemJS –> | |
| <script src=«systemjs.config.js«></script> | |
| <script> | |
| System.import(‘app‘).catch(function(err){ console.error(err); }); | |
| </script> | |
| </head> | |
| <!– 3. monitor de la apliación –> | |
| <body> | |
| <my-app>Cargando…</my-app> | |
| </body> | |
| </html> |
Si deseas agregar algo de estilo creamos styles.css y ponemos lo siguiente:
| h1 { | |
| color: #c91010; | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 250%; | |
| } | |
| body { | |
| margin: 2em; | |
| } |
- Octavo, abrimos nuestro terminal y nos localizamos en nuestro proyecto, generamos y ejecutamos nuestra aplicación.
tecgurus@tecgurus-linux:~/Documents/Angular2$ npm start y automáticamente se crearan los siguientes archivos.y lo que se ve en nuestro localhost.
Te esperamos en la segunda parte del artículo en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
