Crear una clase para los datos en Angular 2

Estamos definiendo nuestros datos directamente dentro de nuestro componente. Eso está bien para una demostración, pero ciertamente no es una buena práctica. Veamos como crear una clase para los datos en Angular 2. Esto es como un modelo de datos o entidad dentro de Angular.

Nuestro componente app.component.ts, en el array creamos objetos Pelicula:

import {Component} from 'angular2/core';
import {Pelicula} from './model/pelicula';

@Component({
    selector: 'my-app',
    templateUrl: 'app/views/peliculas.html',
})
export class AppComponent {
  titulo = 'Peliculas Angular 2';
  peliculas = [
    new Pelicula(1, 'Batman v. Superman', "Zack Snider", 2016),
    new Pelicula(2, 'La verdad duele', 'Will Smith', 2015),
    new Pelicula(3, 'Una historia real', 'Desconocido', 2014),
  ];
}

Creamos el fichero model/pelicula.ts, definimos la clase y sus propiedades:

export class Pelicula {
  constructor(
    public id:number,
    public pelicula:string,
    public director:string,
    public anio:number) { }
}

Creamos la plantilla views/peliculas.html y recorremos el array de peliculas:

<h1>{{titulo}}</h1>

<h3>Primera pelicula harcodeada:</h3>
<p>Pelicula: {{peliculas[0]["pelicula"]}}</p>
<p>Director: {{peliculas[0]["director"]}}</p>
<p>Año: {{peliculas[0]["anio"]}}</p>

<h3>Listado de peliculas:</h3>
<ul>
    <li *ngFor="#peli of peliculas">
      <p>Titulo: {{peli.pelicula}}</p>
      <p>Director: {{peli.director}}</p>
      <p>Año: {{peli.anio}}</p>
    </li>
</ul>

<hr>
&copy; Copyright 
<a href="http://victorroblesweb.es">http://victorroblesweb.es</a>

Con esto ya sabemos crear una clase para los datos en Angular 2.

Más información:
https://angular.io/docs/ts/latest/guide/displaying-data.html

Víctor Robles WEB

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

2 Comentarios

  1. Hola Victor,
    Muchas gracias por el apunte, muy claro y rápido.

    Pero…

    En app.component.ts indicas templateUrl: ‘app/views/peliculas.html’,
    sin embargo dices que creemos la plantilla en view/peliculas.html,
    esta correctamente escrito o se te ha escapado la s en view??

    En cualquier caso lo probaré… y lo confirmo, muchas gracias por el apunte.

    Responder
  2. Hola y para crear una fecha que tipo de dato se le pondría?

    Responder

Poner un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *