Angular 2 nació de un equipo de ingenieros de Google, como un framework para construir aplicaciones universales, esto quiere decir aplicaciones que funcionen en web, desktop y móviles, bajo dos principios: velocidad y modularidad. Para crear tu primer componente, primero debes instalar Angular 2:
Copia estos tres archivos en tu directorio inicial. Después ve a la consola y ejecuta:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>npm install</pre>
Espera unos minutos, ve a la terminal, y escribe:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>ls</pre>
Después de estos tres pasos verás que en tu directorio, está creada una carpeta llamada node_modules, en donde se encuentran todos los paquetes que se instalaron.
Vas a crear un directorio llamado app, y dentro creas otro llamado components, donde vas a guardar todos tus componentes. En esta última carpeta, vas a crear tu primer componente, que llamaremos app.component.ts. Para empezar debes importar un decorador del core de Angular, así:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>import {Component} from ‘@angular/core’;</pre>
Después creas el decorador de componente:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>@Component ({
})</pre>
Y dentro del decorador, vas a poner dos objetos: el primero es el selector, que te permite iniciar el componente en específico, y el segundo, un template.
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>@Component ({
selector: ‘my-app’,
template: ’
'
})</pre>
Ahora, para terminar el componente, debes a exportar una clase, con el nombre que elijas, en este caso AppComponent:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>export class AppComponent{}</pre>
El decorador de componente te va a permitir extender atributos de la clase que estás generando, es decir, el componente va a extender los atributos que existen en tu clase de AppComponent, va a generar un selector llamado my-app y un template con el contenido que ya definimos.
Ahora que tienes tu componente, vas a generar un archivo módulo donde podrás llamar al componente. En el directorio app, debes a generar un archivo que se llame app.module.ts, en este archivo vas a importar las librerias que necesitas para que funcione tu proyecto de Angular:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>import {NgModule} from ‘@angular/core’;
import {BrowserModule} from ‘@angular/platform-browser’;
import {AppComponent} from ‘./componets/app.component’;</pre>
NgModule te permite importar modulos y componentes. BrowserModule permite que tu código sea ejecutado en cualquier ordenador. AppComponent es el componente que creaste anteriormente. Ahora teniendo esto, usas el decorador de NgModule:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>@NgModule ({
})
</pre>
Para el decorador de NgModule, primero vas a importar los módulos que vas a necesitar:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>@NgModule ({
imports : [
BrowserModule
],
})</pre>
Después haces una declaración con los componentes que vas a generar:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>@NgModule ({
imports: [
BrowserModule
],
declarations: [
AppComponent,
],
})</pre>
Finalmente haces un llamado Bootstrap, para indicar que componente es el principal dentro de tu proyecto:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>@NgModule ({
imports: [
BrowserModule
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule{}</pre>
Con esto tendrías la estructura básica de un archivo app module en Angular.js Ahora necesitas generar un archivo main.ts para que desde System.js lo puedas llamar. Lo creas en el mismo nivel de app.module.ts, e importas platformBrowserDynamic:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’;</pre>
Después importas el módulo que acabas de generar:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>import {AppModule} from ‘./app.module’;</pre>
Solo falta declarar una constante donde vamos a poner nuestra plataforma:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);</pre>
Estos son los archivos necesarios para generar componentes en tu aplicación. Ahora solo falta llamarlos en un archivo index.html para System.js. Al final terminarás con una estructura de archivos como está: 
En el directorio principal crea index.html con el siguiente formato:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>
<title>Mi primer App de Angular 2</title>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link rel=“stylesheet” href=“styles.css”>
<script>System.import(‘app’).catch(function(err){ console.error(err); });<script>
<my-app>Loading…</my-app>
</pre>
Ahora puedes ejecutarlo en el navegador. Para esto ve a la terminal, y en el directorio raíz ejecuta:
<pre class=“EnlighterJSRAW” data-enlighter-language=“null”>npm start</pre>
Con esto se va a empezar a generar todo tu proyecto, y cuando esté listo, mostrará en el navegador tu primer componente. ¡Lo lograste! Ahora, si quieres construir una aplicación web completa, puedes iniciar con el Curso de Fundamentos de Angular, donde aprenderás desde usar Typescript, componentes, eventos, rutas y conectarse a otros servicios web.
