Módulos y componentes

Un parte fundamental en Angular son los módulos.

Los módulos son las piezas mas grandes en las que se puede dividir una aplicación en Angular.

En el artículo Angular 4 – Parte 1 realizamos una pequeña introducción y como crear una estructura básica para un proyecto en Angular.

Dentro de esa estructura que se ha generado tenemos la carpeta src/app/ y allí se encuentra el archivo app.module.ts (app.component.ts).

Ese fichero es el módulo principal de Angular también llamado root module, y por convenio se le llama AppModule.

Dentro de la clase AppModule cargamos la aplicación e indicamos todas sus dependencias.

Como el resto de módulos se declara con el decorador NgModule.

A continuación un ejemplo creado con el CLI de Angular:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Aprovechando que esta recién creado y es mas fácil de visualizar, vamos a explicar el contenido de @NgModule:

• @NgModule: Es una palabra reservada para declarar un módulo.
  • declarations: Listado de nuestros componentes.
  • imports: Listado de módulos.
  • providers: Listado de servicios.
  • bootstrap: Componente con el que iniciamos la app.

Junto a app.module.ts existen otros ficheros, y uno de ellos es el componente que esta definido en el fichero app.component.ts.

Bien, ahora que sabemos que es un módulo continuemos con la definición de un componente.

Los componentes los podemos agrupar en tres tipos:

• Nativos: Módulos propios de angular (http, browser, forms, etc..)
• Terceros: Módulos realizados por otras personas o empresas y que pueden ser de pago o gratuitos.
• Propios: Módulos creado por nosotros mismo.

Estructura del componente:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "APP";
}

Dentro del fichero encontramos la siguiente estructura:

• @Component: Otra palabra reservada para declarar un componente
  • selector: Tag de HTML que se insertara en el componente
  • templateUrl o template: Si usamos templateURL entonces indicaremos el archivo html que va a usar el componente (app.component.html), pero si usamos template entonces añadiremos html directamente pero no es lo mas recomendable.
  • styleUrls: Indicamos el archivo de los estilos (app.component.css).

Data Binding

El data binding lo podemos definir como la comunicación entre el código Typescript y nuestro HTML.

En Angular tenemos 4 tipos de data binding:

• String Interpolation: Usando {{}} se evalúa el contenido.
• Property Binding: Usando [] se realiza el data binding de las propiedades.
• Event Binding: Usando () se escuchan los eventos desde HTML.
• Two Way Data Binding: Usando [()] se realiza el data binding en ambos sentidos, desde HTML hacia TypeScript y desde Typescript hacia HTML.

Es muy importante respetar la sintaxis para que dentro de nuestro HTML se puede entender Typescript cuando usemos el string interpolation ‘{{}}’.

A continuación un ejemplo aplicando los diferentes data binding que nos ofrece Angular:
app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:String = 'my-app';
  v1:Number = 10;
  v2:Number = 5;
  activate:Boolean = false;

  constructor() {
    setTimeout(()=> this.activate = true, 3000);
  }

  pulsame() {
    alert("Click");
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule} from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <hr>
  <h1>Ejemplo de Data binding</h1>
  <p>String interpolation {{ title }}</p>
  <p>{{v1}} + {{v2}} = {{v1 + v2}}</p>
  <p>{{v1}} - {{v2}} = {{v1 - v2}}</p>
  <p>{{v1}} * {{v2}} = {{v1 * v2}}</p>
  <p>{{v1}} / {{v2}} = {{v1 / v2}}</p>
  <hr>
  <p>Property Binding</p>
  <p><button [disabled]="!activate">click</button></p>
  <hr>
  <p>Event Binding</p>
  <p><button (click)="pulsame()">click</button></p>
  <hr>
  <p>Two way data Binding</p>
  <p>Título: <input type="text" placeholder="Cambiar el título" [(ngModel)]="title" /></p>
  <hr>
</div>