Cada dia que pasa con Typescript me doy cuenta de lo increible que realizar nuestras aplicaciones angular y sumado a la potencia de visual studio code aumenta en forma exponencial nuestra velocidad de trabajo y nos permite ser mas productivos y agiles a la hora de desarrollar nuestras aplicaciones.

Aqui explicare como hacer una aplicacion de Angular utilizando Typescript y Visual Studio Code, en esta primera fase tocare los siguientes puntos:

1- Crear estructura la estructura
2- Instalando dependencias (Typescript, Nodejs, Type definitions, librerias js etc).
3- Modulos
4- RouteProvider
5- Views

Primero creamos nuestra estructura de archivos para la aplicacion:

pepapig/
------/app
----------/controllers
----------/directives
----------/views
------/css
------/scripts
------index.html

Debemos tener instalado Typescript y TSD (TypeScript Definitions Manager) para poder tener las definiciones de angular en el nuestro Visual Studio Code, si no lo has realizado puedes ver mi post anterior (“TypeScript y Angular con Visual Studio Code”) o seguir los pasos.

Primero instalaremos Nodejs y luego de su instalacion con el gestor de paquetes NPM Node Package Manager, instalaremos los Typescript Definitions, desde la consola nos colocamos en la raiz del directorio (donde esta el index.html) e instalamos Typescript y TSD (TypesScript Definition Manager).

$ npm install -g typescript
$ npm install -g tsd

Ahora las definiciones utilizado el tsd de angular y angular-route con la opciones -r -s nos busca las dependecias y nos guarda en el tsd.json las typedefinitions instaladas:

$ tsd install angular angular-route -r -s

- angularjs / angular-route
-> angularjs > angular
-> jquery > jquery
- angularjs / angular
-> jquery > jquery

>> running install..

>> written 3 files:

- angularjs/angular-route.d.ts
- angularjs/angular.d.ts
- jquery/jquery.d.ts

Para poder visualizar nuestra aplicacion en un servidor local instalaremos el paquete http-server de nodejs que nos crea un servidor web, nos colocamos en el mismo directorio raiz y donde estamos escribimos:

npm install -g http-server

Ahora toca descargar la librerias de javascript de Angularjs y Angular-route (componente de angular para manejar las rutas en la url del navegador) estas las guardaremos en el directorio /scripts, tambien descargaremos Bootstrap para darle un poco de belleza a la aplicación.

Ahora crearemos nuestra pepapig.ts (ts, extension de typescript) en el directorio /app y creamos el modulo

module pepapig {
var pepapigtv = angular.module("pepapigtv",[]);
console.log("Hola Soy Pepapig");
}

Si nos fijamos el codigo anterior es casi identico a escribirlo con javascript, pero vamos a compilarlo shirt + ctlr + b , si todo ha salido bien debe crearse el archivo pepapig.js. En caso que te haya mostrado el mensaje que no hay tareas configuradas, es que no has configurado el entorno, puedes ver mi articulo anterior de Como configurar typescript, angular y visual studio code.

Nuestro archivo compilado pepapig.js debe ser muy parecido a esto:

var pepapig;
(function (pepapig) {
var pepapigtv = angular.module("pepapigtv", []);
console.log("Hola Soy Pepapig!");
})(pepapig || (pepapig = {}));

Ahora agregaremos todos los ficheros descargados y pepagin.js en nuestra pagina html, el la hoja de estilos de bootstrap en el top antes de y las librerias javascript antes del referenciaremos angularjs, angular-route.js y pepapig.js ademas agregaremos la directiva ng-app al body (ng-app define el ámbito sobre el que AngularJs actuara), nuestro html debe lucir algo similar a esto:

Router

Pero para definir rutas, usaremos el modulo de angular ngRoute, el cual debemos inyectarlo a el modulo pepapigtv.

El modulo ngRoute tiene un componente llamado $routeProvider el cual nos permite definir las ruta , por tanto inyectaremos el $routeProvider dentro del método config del modulo pepapigtv, vamos a pepapig.ts agregamos con lo siguiente:

En el RouteProvider configuraremos el when para especificar la ruta de nuestro template a partir de la ruta ejemplo cuando entre a http://localhost:8080/inicio me cargara la plantilla inicio.html
igual para los casos de personales o acerca, pero si entrara http://localhost:8080/lebronjames me enviara a inicio debido a que estoy utilizando otherwise “/inicio”.

pepapigtv.config(pepaRouteConfig)
function pepaRouteConfig($routeProvider: ng.route.IRouteProvider) : void {
$routeProvider.when("/inicio",{
templateUrl: "app/views/inicio.html"
}).when("/personajes",{
templateUrl: "app/views/personajes.html"
}).when("/acerca",{
templateUrl: "app/views/acerca.html"
}).otherwise("/inicio");
}

 Nos falta ahora crear esas plantillas en las rutas especificadas por tanto creamos inicio.html, personajes.html y acerca.html.

En cada una de ellas colocaremos un h1 que espefique que vista es ejemplo : vistainicio, vistapersonajes y vistaacerca.

Ahora modificare el index.html y agregaremos una lista con los links a las vistas:

Nos falta agregar el lugar donde se cargaran dichos templates para eso utilizamos la directiva ngView (ngView es una directiva, que nos ayuda a renderizar la vista asociada a una ruta, cada vez que la ruta cambia, el contenido del ella cambia) en nuestro index.html.

Con todo los cambios ya realizados, podemos compilar nuevamente y ver que nuestro pepapig.js se actualiza con los cambios de Router, desde la consola nos movemos al directorio raiz de nuestra aplicacion y escribimos http-server para iniciar el servidor web e iniciar la aplicacion en el browser.

$ http-server
Starting up http-server, serving ./
Available on:
http:127.0.0.1:8080
http:192.168.1.131:8080
Hit CTRL-C to stop the server

Ahora si visitamos la url nos debe salir la web con los links y hacer click en ella podemos visitar las vistas de cada una de ellas.

Happy Typescripting!!!

Deja un comentario

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