Etiquetavisualstudiocode

Como evitar ver .js y .map en Visual Studio Code

Cuando estas trabajando con Typescript, la verdad es que debes olvidarte de los .js y js.map para solo ver los .ts

Se que en algunos casos tenemos tasks runners que mueven ese tipo de archivo a una directorio, pero si y solamente quiere enfocarte en tus .ts en settings de visual studio code, poner excluir las extensiones de los archivos que no interesa ver y solo veras lo que consideramos importante.

"files.exclude": {

"**/.git": true,

"**/.DS_Store": true,

"nba/**/*.js": true,

"nba/**/*.js.mp":true

}

Creando Apps con Angular, Typescript y Visual Studio Code

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!!!

TypeScript y Angular con Visual Studio Code

En estos días me he visto en la necesidad de desarrollar una aplicación bastante grande en angular y he optado por apoyarme de TypeScript, pero para sacar la ventaja que me brinda TypeScript tengo que tener las definiciones de Angular disponibles para el compilador y en Visual Studio Code, ahora explico como agregar las definiciones a Visual Studio Code.

TypeScript y TypeScript Definition Manager

Primero vamos a instalar typescript y tsd (typescript definitions) es un gestor de definiciones de typescript que se encarga de buscar las definiciones y sus dependencias.(http://definitelytyped.org/tsd/), desde la terminal escribimos:
npm install typescript -g
npm install tsd -g

Con ellos instalados ahora haremos una app de prueba creamos un folder /king y lo abrimos Visual Studio Code creamos un archivo index.html y un directorio app/ donde tendremos nuestro app.ts.

Configurar Visual Studio Code

Configuraremos la tarea para compile todos los .ts presionamos shift + cmd + b para compilar y al realizar esta acción, nos notificara que no hay una tarea configurada, realizamos click en la opción “Configure Task Runner” al hacer click nos creara un folder .vscode/tasks.json en la primera tarea del json eliminamos el valor de “args” que contiene “HelloWorld.ts” y lo dejamos en blanco para que tome todos los proyectos de typescript.
// args is the HelloWorld program to compile.
"args": [ ],

En la raiz de nuestro proyecto creamos el tsconfig.json, tsconfig.json especifica al compilador de typescript las especificaciones para realizar compilar el proyecto:

{
"compilerOptions": {
"target": "es5"
}
}

vamos a nuestro app.ts y tratamos de crear un modulo:
Seguir leyendo

© 2017 Danywalls

Tema por Anders NorénSubir ↑