Angular 2 – Router

  Hoy vamos a hacer un sencillo ejemplo de como utilizar el routing que incluye Angular 2.   HTML   <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width”> <title>Angular 2</title> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css”> </head> <body> <h1>Angular 2</h1> <p>Testing Angular 2 with TypeScript</p> <my-app></my-app> </body> </html> <script src=”https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.90/traceur-runtime.js”></script> <script src=”https://jspm.io/system@0.16.js”></script> <script src=”https://code.angularjs.org/2.0.0-alpha.35/angular2.dev.js”></script> <script src=”https://code.angularjs.org/2.0.0-alpha.35/router.dev.js”></script><!–add…

Leer más

Angular 2 – Gulp – Transpile múltiples ficheros de Typescript a ES5 y organizar proyecto

  Si miramos en la documentación de angular.io nos deja un ejemplo de como podemos pasar de typescript a ES5 un sólo fichero. En este artículo veremos como podemos transformar múltiples a la vez y de paso como organizar un proyecto.   Precondición Tenemos instalados los paquetes descritos en los pasos de angular.io. Paso 1 y 2.…

Leer más

Angular 2 – Forms – Pipes

  Hoy os mostraremos como hacer un sencillo filter (ahora Pipe) en Angular 2.   Definimos nuestro Pipe: import {Pipe} from ‘angular2/angular2’; @Pipe({name: ‘capitalize’}) export class CapitalizePipe { capitalize(value) { return value.charAt(0).toUpperCase() + value.slice(1); } transform(value):string { return this.capitalize(value); } }   Creamos el componente el cuál usará el nuevo Pipe: import {Component, View, bootstrap}…

Leer más

Angular 2 – Forms – Template driven

  Hoy vamos a hacer un ejercicio simple con Angular 2 sobre formularios. En Angular 2 existen varias formas de hacer formularios, hoy vamos a ver el conocído como template driven el que es usado en la versión 1.X   Angular 1.X  <div ng-controller=”ExampleController”> <form name=”form”> Name: <input type=”text” ng-model=”user.name” name=”uName” required=”” aria-required=”true” class=”error”><label id=”uName-error”…

Leer más

Angular 2 – TypeScript, ES6, ES5, Traceur, Babel y lo que nos viene

Después de unas cuantas versiones probando las diferentes alphas de Angular 2 os mostraremos los puntos fuertes y también los principales obstáculos que tendremos en los siguientes años en el desarrollo web.   Actualidad: El Javascript en el que programamos nuestras webs y el que los navegadores interpretan es JS ES5. La mayoría de librerías…

Leer más