Angular 2 – Router – Parent y Child Routes

Si en anteriores artículos veíamos como realizar un sencillo routing, hoy aprovechando la ponéncia de Brian Ford del Angular Connect (2015) veremos como hacer child routes.   Una de las ponéncias más sorprendentes del último angular connect fué la de “Routing in Eleven Dimensions with Component Router”     Child Routes   La idea del siguiente…

Leer más

Angular 2 – TypeScript en runtime

Otra opción si queremos ejecutar TypeScript en el navegador es hacerlo on the fly o en tiempo de ejecución. Vamos a ver que diferencias tenemos entre estas formas.   Tendremos la siguiente estructura:  │ │ index.html│└───src app.ts main.ts   index.html   <!DOCTYPE html> <html> <head> <title>Angular 2 – Typescript in runtime</title> <script> var start = new Date().getTime();…

Leer más

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