Typescript nos facilita la posibilidad de poder crear Módulos y Controllers de Angular utilizando Clases de Typescript en vez de Funciones Javascript.

Esto nos permite aprovechar las ventajas de la programación OOP para poder implementar Interfaces , Herencia, Polimorfismo etc.

Los Controllers en angular nos permiten definir un modelo para la vista y los métodos a los cuales ella podrá acceder, cuando creamos un controller en angular con javascript realizamos lo siguiente:

– Registramos el controller en el módulo.
– Definimos las funciones e inyectamos las dependencias.
– Definimos variables que representan el controller
– Implementamos métodos para el modelo.

Como en este ejemplo:

angular.module(“pepapigtv”).controller(“InicioController”,[InicioController]);
function InicioController(){
var vm = this;
vm.tituloinicio = “Hola Pepapigtv”;
vm.yasalude = false;
vm.Saludar = function() {
vm.saludo = “Hola George”
vm.yasalude = true ;
}
}

Este mismo proceso lo realizaremos utilizando Clases de Typescript, para continuar con el proyecto de ejemplo de la pepapig del artículo anterior.

En el post de hoy realizaremos lo siguiente:

  • Vincular la vista con el Controller.
  • Crear una Interfaz que especifica lo que debe exponer el controller.
  • Crear una Clase Controller.
  • Registrar el Controller.
  • Renderizar las propiedades y metodos del modelo expuesto por el controller.

En el archivo pepapig.ts modificaremos la configuración del RouteProvider, este nos permite además de especificar el template que va a utilizar para una ruta, también decir que controller se encargará de esa vista.

Vamos a nuestro directorio raíz de la aplicación y modificamos el /app/pepapig.ts a cada template definido le especificamos su respectivo controller, el resultado final es el siguiente:

module pepapig{
var pepapigtv = angular.module("pepapigtv",["ngRoute"]);
console.log("Hola Soy Pepapig OINN!!!");
pepapigtv.config(pepaRouteConfig)
//Configuracion del router
function pepaRouteConfig($routeProvider: ng.route.IRouteProvider) : void {
$routeProvider.when("/inicio",{
templateUrl: "app/views/inicio.html",
controller: "inicioController as vm"
}).when("/personajes",{
templateUrl: "app/views/personajes.html"
}).when("/acerca",{
templateUrl: "app/views/acerca.html"
}).otherwise("/inicio");
}
}

Con lo anterior hemos dicho al RouteProvider que la vista inicio.html será manejada por el controller inicioController.

Interfaz y Controller:

Cuando creamos Controllers de Angular utilizando Typescript podemos usar interfaces, en la cual se definirán las variables y los métodos que nuestro controller proveerá.

El controller expondrá a la vista las propiedades y métodos que hemos acordado en la interfaz y podemos usar el constructor para definir valores iniciales a estas variables.

Creando el Controller

Vamos al directorio app/controllers/ aquí creamos “inicioController.ts”, para tener el código más organizado creamos nuestro controller dentro de pepapig.controllers.

las Interfaces deben empezar con I por estandar, en nuestro caso IInicioController, en él definimos las propiedades utilizando Type Anotation para especificarel tipo que es cada una y la firma de los métodos.

module pepapig.controllers {
interface IInicioController {
//titulo de la view de tipo string.
tituloinicio:string;
//para saber si ya se han saludado de tipo boolean true o false
yasalude:boolean;
//un metodo que saludara al usuario.
Saludar(): void;
}
}

Con la interfaz ya creada podemos implementarla en el controller y usamos la palabra class InicioController e “implements” la cual forza a que nuestra clase “InicioController” cumpla con el contrato de la interfaz IInicioController.

Definimos las variables de acuerdo a nuestra interfaz, además en el constructor le damos unos valores por defecto a las propiedades, nuestro código debería quedar como lo siguiente:

class InicioController implements IInicioController {
tituloinicio:string;
yasalude:boolean;

constructor(){
this.tituloinicio = "Hola Soy La Pepapig";
this.yasalude = false;
}

Saludar(){
this.yasalude = true;
this.tituloinicio = "Como te llamas tu ?"
}

}

Ahora nos falta registrar nuestro controller en el módulo de pepapig
al igual que en javascript usamos:

angular.module("pepapigtv").controller("InicioController",InicioController);

El resultado final sera este:

module pepapig.controllers {
interface IInicioController {
tituloinicio: string;
yasalude: boolean;
Saludar(): void;
}

class InicioController implements IInicioController {
tituloinicio: string;
yasalude: boolean;
constructor() {
this.tituloinicio = "Hola Soy La Pepapig";
this.yasalude = false;
}
Saludar() {
this.yasalude = true;
this.tituloinicio = "Como te llamas tu ?"
}
}
angular.module("pepapigtv").controller("InicioController", InicioController);
}

Ahora nos toca modificar la vista para que pueda renderizar los valores expuestos por el Controller, asi que vamos a inicio.html y utilizamos las expresiones de angular para renderizar el modelo en la vista y además usamos la directiva ng-click para poder llamar el método desde un button.

{{mv.tituloinicio}} renderizamos el valor del modelo mv y la propiedad tituloinicio,

creamos un input de tipo button y la directiva ng-click la vinculamos a la acción vm.Saludar().

*ng-click: nos permite vincular una accion a partir de un elemento que se le ha realizado un click.

Nuestra vista inicio.html debería quedar como esto:

<h1>Inicio</h1>
{{vm.tituloinicio}}

<input type="button" value="Hola" />

Compilamos y vinculamos en nuestro index.html el controller creado, justo después de pepapig.js luego de esto compilamos (ctrl + shift + b) e iniciamos nuestro webserver y vemos como nuestro controller interactúa con nuestra app.

En resumen, hemos visto como crear controllers de angular usando clases en typescript en implementando interfaces, aquí el resultado de nuestro .ts convertido en InicioController.js

var pepapig;
(function (pepapig) {
var controllers;
(function (controllers) {
var InicioController = (function () {
function InicioController() {
this.tituloinicio = "Hola Soy La Pepapig";
this.yasalude = false;
}
InicioController.prototype.Saludar = function () {
if (this.yasalude) {
alert("ya te salude!!!");
}
else {
this.yasalude = true;
}
this.tituloinicio = "Como te llamas tu ? " + this.yasalude.valueOf();
};
return InicioController;
})();
angular.module("pepapigtv").controller("inicioController", InicioController);
})(controllers = pepapig.controllers || (pepapig.controllers = {}));
})(pepapig || (pepapig = {}));

Happy Typescripting!!

Deja un comentario

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