fcbk
Conéctate con TwitterConéctate con Facebook
3

Crea tu primer componente en Angular 2

6893Puntos

hace un año

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:
  1. Ve a https://angular.io/ sección de Get Started, ahí encontrarás tres archivos con la configuración inicial:
  • El primero, package.json que instala todas las dependencias del proyecto.
  • El segundo tsconfig.json un archivo de TypeScript con toda la configuración inicial.
  • El último es systemjs.config.js, donde tienes la configuración que usa system.js para generar todo el proyecto en HTML.
  1. Copia estos tres archivos en tu directorio inicial. Después ve a la consola y ejecuta:
    npm install
  1. Espera unos minutos, ve a la terminal, y escribe:
ls
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.

Creando un componente

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í:
import {Component} from '@angular/core';
Después creas el decorador de componente:
@Component ({

})
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.
@Component ({
  selector: 'my-app',
  template: '<h1> Este es mi primer componente</h1>'
})
Ahora, para terminar el componente, debes a exportar una clase, con el nombre que elijas, en este caso AppComponent:
export class AppComponent{}
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.

Creando un Módulo

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:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './componets/app.component';
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:
@NgModule ({

})

Para el decorador de NgModule, primero vas a importar los módulos que vas a necesitar:
@NgModule ({
  imports : [
    BrowserModule
  ],
})
Después haces una declaración con los componentes que vas a generar:
@NgModule ({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent,
  ],
})
Finalmente haces un llamado Bootstrap, para indicar que componente es el principal dentro de tu proyecto:
@NgModule ({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule{}
Con esto tendrías la estructura básica de un archivo app module en Angular.jsAhora 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:
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
Después importas el módulo que acabas de generar:
import {AppModule} from './app.module';
Solo falta declarar una constante donde vamos a poner nuestra plataforma:
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
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á:carpetas

Dale vida a tu componente

En el directorio principal crea index.html con el siguiente formato:
<html>
 <head>
 <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">

 <!-- 1. Load libraries -->
 <!-- Polyfill 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. Configure SystemJS -->
 <script src="systemjs.config.js"></script>
 <script>
 System.import('app').catch(function(err){ console.error(err); });
 </script>
 </head>

 <!-- 3. Display the application -->
 <body>
 <my-app>Loading...</my-app>
<!-- La anterior es la llamada de mi componente -->
 </body>
</html>
Ahora puedes ejecutarlo en el navegador. Para esto ve a la terminal, y en el directorio raíz ejecuta:
npm start
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 Desarrollo Web con Angular 2, donde aprenderás desde usar Typescript, componentes, eventos, rutas y conectarse a otros servicios web.
Juan Pablo
Juan Pablo
@unmalnick

6893Puntos

hace un año

Todas sus entradas
0
3 meses

Disculpa, como puedo hacer para establecer propiedades a mi componentes, es decir, supongamos que quiero tener un componente que encapsule un <div> que corresponda a una seccion de entrada de un blog, el cual contara con titulo de la entrada, fecha, texto, por ejemplo, lo que quiero es hacer un componente parecido a esto

<blog-post titulo="Titulo de Entrada" fecha="20/10/2016" texto="Este es el texto de la entrada"></blog-post>

Se como crear el componente, pero no como crearlo con esas propiedades, me ayudas?