Aplicación Noticias UNQ

Comenzaremos creando un componente que se encargará de mostrar una noticia como html. El html elegido para representar una noticia lucirá algo así

<article>
  <header>Comienzan las clases en la UNQ</header>
  El receso de verano se pasó volando. Ampliaremos.
  <footer>por Claudio Fernandez - 42</footer>
</article>`

Como podemos notar, estamos usando uso de algunos tags de HTML5 (<article>, <header>, <footer>). Podemos pensar a los mismos simplemente como <div> con una semantica más fuerte.

Componente Noticia

Luego crearemos el componente post.component.js el cuál se encargará de renderizar una noticia. El mismo lucirá algo así.

src/frontend/app/components/post.component.js

import { Component } from '@angular/core'; @Component({ selector: 'post', inputs: [ 'data' ], template: `<article> <header>{{data.title}}</header> {{data.content}} <footer>por {{data.author}} - {{data.upvotes}}</footer> </article>` }) export default class PostComponent { }

Lo unico importante de resaltar de este nuevo component es que declara tener un input llamado data. El mismo es el parametro por medio del cual se le especificará al componente noticia cual noticia en particular mostrar.

luego debemos registrar el mismo en la lista de componentes de bootstrap.js para que angular tome conocimiento de su existencia.

src/frontend/bootstrap.js

... import AppComponent from './app/components/app.component' import PostComponent from './app/components/post.component' @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent, PostComponent ], bootstrap: [ AppComponent ] }) class AppModule { } ...

Ahora podemos probar la aplicación insertando una referencia a nuestro componente <post> dentro del componente principal de la aplicación. El problema es que un <post> necesita una noticia para mostar. A priori podemos construír una noticia dentro del componente app.component.js y usar esa.

  this.post =  { title: 'Noticia 1', content: 'Contenido 1', author: 'Claudio', upvotes: 0 }

Luego cambiaremos el template html para incluír una referencia al componente <post>

template: `<h1>Bienvenidos a {{name}}</h1>
             <post [data]=post></post>
            `

Binding

Por medio de la expresión [data]=post no solo estamos asignado el valor actual de this.post a la propiedad data del componente sino que estamos establiciendo un binding de forma de que en cualquier momento que this.post se modifique se actualizará este valor https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding

El archivo app.component.js tendrá entonces la siguiente forma

src/frontend/app/component/app.component.js

import { Component } from '@angular/core'; @Component({ selector: 'app-view', template: `<h1>Bienvenidos a {{name}}</h1> <post [data]=post></post> ` }) export default class AppComponent { constructor() { this.name = 'Noticias UNQ', this.post = { title: 'Noticia 1', content: 'Contenido 1', author: 'Claudio', upvotes: 0 } } }

Luego de correr webpack (recomendadisimo mantenerlo corriendo con --watch) y refrescar el browser veremos:

Renderizando una lista

Un escenario mas cercano al real es que nuestra aplicación muestre no un solo post sino una lista de posts. Para eso lo primero que haremos es cambiar la data mock que creamos en nuestro constructor por una lista.

src/frontend/app/component/app.component.js

... export default class AppComponent { constructor() { this.name = 'Noticias UNQ', this.posts = [ { title: 'Noticia 1', content: 'Contenido 1', author: 'Claudio', upvotes: 0 }, { title: 'Noticia 2', content: 'Contenido 2', author: 'Claudio', upvotes: 0 }, { title: 'Noticia 3', content: 'Contenido 3', author: 'Claudio', upvotes: 0 } ] } }

Y reemplazaremos el html template para que no muestre entonces un solo <post> sino que repita el mismo por cada una de las noticias dentro del array. Podemos repetir cualquier componente (o tag html) por medio de la directiva *ngFor

<h1>Bienvenidos a {{name}}</h1>
<post *ngFor="let item of posts" [data]=item></post>

GitHub

Como referencia dejamos el estado del proyecto en GitHub

Agregando estilos

Vamos a agregar algo de estilos CSS para hacer que nuestra aplicación tenga un poco mas de sentido.

Crearemos entonces un archivo styles.css en la carpeta src/frontend/assets de nuestra aplicación. Webpack ya está configurado para copiar todo el contenido de la misma al directorio dist.

En nuestro index.html solo deberemos linkear a la hoja de estilos por medio de:

<link rel="stylesheet" type="text/css" href="assets/styles.css">

Luego agregaremos algunos estilos:

src/frontend/assets/styles.css

body { background-color: #00AABB; } article { border-style: solid; border-color: black; border-width: 1px; padding: 5px; border-radius: 5px; margin-bottom: 5px; background-color: white; } article header { font-weight: bold; font-size: 1.3em; } article footer { font-weight: lighter; font-size: 0.7em; text-align: right; }

Y el resultado:

results matching ""

    No results matching ""