Angular 2, esqueleto de la aplicación

En el articulo anterior vimos, como crear un hola mundo, en este articulo vamos a ver como hacer el esqueleto de nuestra aplicación, vamos a dividir la pantalla en los siguientes apartados:

• Cabecera: Sera donde se encontrara la cabecera de nuestra aplicación.
• Cuerpo: Es donde vamos a establecer las pantallas, de nuestra aplicación.
• Pie: Es donde pondremos la información de nuestra aplicación.

En el siguiente enlace  se puede encontrar este articulo.

Crear una plantilla par el componente de aplicación

Ahora los que vamos a ver es como separar el controlador de la vista, para lo cual simplemente en la configuración del decorador del componente, cambiaremos el atributo de template, por el de templateUrl en el que le vamos a indicar donde se va a encontrar el archivo donde se va a encontrar el fichero con la nueva plantilla ('/app/app.component.html'). A partir de ahora sera la forma de indicar donde se encuentra la plantilla que representa la región de vista que controlara nuestro controlador.

app.component.html

<p>Nueva pagina de hola mundo.</p>

Cambiamos el testo que tiene la plantilla y creamos el nuevo fichero de la vista para que nos salude.

 app.component.ts

import {Component} from 'angular2/core';
@Component({
  selector:'my-app',
  templateUrl:'/app/app.component.html'
})
export class AppComponent{};

Ahora que por un lado hemos visto como se puede separar en angular la vista y el controlador en dos ficheros independientes, vamos a crear un componente nuevo por las 3 nuevas regiones que vamos a establecer.

La norma que voy a seguir, es la de llamar igual a la vista y el controlador. Para que sea fácil buscarlo.

Creamos el componente de la cabecera:

Ahora vamos a crear el componente cabecera, que tendrá el selector dbpCabecera .

/app/component/comun/cabecera.component.html

<p> Aqui ira la cabecera </p>

/app/component/comun/cabecera.component.ts

import {Component} from 'angular2/core';
@Component({
  selector:'dpbCabecera',
  templateUrl:'/app/component/comun/cabecera.component.html'
})
export class CabeceraComponent{}

Creamos el componente del cuerpo:

Ahora vamos a crear el component cuerpo, que tendrá el selector dbpCuerpo.

/app/component/comun/cuerpo.component.html

<p> Aqui ira el código del cuerpo </p>

/app/component/comun/cuerpo.component.ts

import {Component} from 'angular2/core';

@Component({
  selector:'dbpCuerpo',
  templateUrl:'/app/component/comun/cuerpo.component.html'
})
export class CupoerComponent{}

Creamos el componente del pie

Ahora vamos a crear el componente del pie, que tendrá el selector dbpPie. 

/app/component/comun/pie.component.html

<p>Aqui ira el código del pie</p>

/app/component/comun/pie.component.ts

import {Component} from 'angular2/core';
@Component({
  selector:'dpbPie',
  templateUrl:'/app/component/comun/pie.component.html'
})
export class PieComponent{}

Ahora que ya tenemos creados los 3 componentes que van a representar las regiones de pantalla que hemos detallado al principio del articulo, tenemos que ver como vamos a vincular a nuestro componente principal, estos tres componentes.

Asociamos a los componentes nuevos a la aplicación.

Antes de nada aquí vamos a ver un primer ejemplo que angular 2 la forma que tiene de construir la pantalla, es con un árbol de componente que se irán asociando y se puede comunicar entre ellos. Para lo cual tenemos que realizar 2 cosas:

• Asociar el componente al controlador.
• Indicar en la plantilla del componente padre donde vamos a pintar cada uno de los componentes.

Asociar al controlador:

En este caso lo que vamos hace es indicarle al componente donde se encuentran sus hijos para lo cual por un lado lo tenemos que importar por un lado el componente y por otro lado pasárselos al componente con el parámetro directives.

import {Component} from 'angular2/core';
import {CabeceraComponent} from './component/comun/cabecera.component';
import {CuerpoComponent} from './component/comun/cuerpo.component';
import {PieComponent} from './component/comun/pie.component';
@Component({
  selector:'my-app',
  templateUrl:'/app/app.component.html',
  directives:[CabeceraComponent,CuerpoComponent,PieComponent]
})
export class AppComponent{};

Indicarlo en la plantilla donde ira cada componente

Ahora solo tenemos que indicar, donde vamos a pintar cada uno de los elementos en la pantalla de la aplicación.

<dpbCabecera></dpbCabecera>

<dbpCuerpo></dbpCuerpo>

<dpbPie></dpbPie>

Conclusión

Como podemos ver en este articulo, por un lado que separa la vista del controlador, como se monta un árbol de componente básicos y como se pueden asociar.