Primeros pasos con angular 2.0

Empezando con Angular2

Diferencias entra angular 1 Angular 2

La principal diferencia entre angular1 y angular2(y las posteriores versiones que han salido basadas en esta última) consiste en que angular1 tendía a estar montado en un tipo de arquitectura basada en programación estructurada, mientras que a partir de angular2 en adelante se ha introducido una programación basada en el modelo vista controlador para frotend usando typescript que nos permite compilar nuestros archivos con extensión .ts a .js en tiempo real

A nivel de código los ejemplos más recurrentes conforme a lo que usa son los siguientes.

 
Componentes Angular 1 
(function (){ angular.module('app')     
.controller('Controlador1Controller', Controlador1Controller);     
function Controlador1Controller() {  var valor1 = this;     
valor1.data= { id: 45, titulo: 'Una historia real' };   
} })(); 

 
Componentes Angular 2 
import { Component } from 'angular2/core';   
@Component({   selector: 'contenedor',   
template: '
{{controlador1.titulo}}
' }) 
export class controlador1Component {    
public valor1 = { id: 69, titulo: 'Contenido valor1' }; } 

 <
b>Bootstraping Angular 1.0 
En la etiqueta html el valor se colocaba 
el siguiente valor ng-app="app"
 

 Bootstraping Angular 2.0  
import { bootstrap } from 'angular2/platform/browser';  
import { AppComponent } from './app.component';   
bootstrap(AppComponent);   

 Directivas Angular 1.0 
En la lista li podriamos ng-repeat="objeto in objeto.data" 
y dentro de ella {{objeto.titulo}}

 Directivas Angular 2.0  
En el li pondriamos *ngFor="#objeto of objects" y debajo de ella 
*ngFor="#objeto of objects" {{objeto.titulo}} 

 Data binding Angular 1.0 
 Interpolación entre etiquetas
 Por ejemplo entre etiquetas {{peliculas.data.titulo}} 
 Una direccion binding ng-bind Por ejemplo entre etiquetas {{peliculas.data.titulo}} 
 El ng-model por ejemplo en input ng-model="peliculas.data.titulo"
 Eventos on click on blur en botones por ejemplo ng-click="peliculas.log('click')" ng-blur="peliculas.log('blur')" 
 

 Data binding Angular 2.0 
 Interpolación 
{{pelicula.titulo}}
  
 Binding en una sola dirección 
 
[innerText]="pelicula.titulo"
  
 Binding en el modelo 
 [(ngModel)]="pelicula.titulo"
    
 Eventos en botones  
(click)="log('click')"  (blur)="log('blur')">Aceptar
 
 

 Servicios en Angular1
 angular.module('app').service('PeliculasService', PeliculasService);   
 function PeliculasService() 
 {this.getPeliculas = function () 
	 {    
	  return [{ id: 1, titulo: 'Peli 1' },{ id: 2, titulo: 'Peli 2' },
	  { id: 3, titulo: 'Peli 3' } ];   
	  }; 
  
  }  

 
  Servicios en Angular 2 
  

  import { Injectable } from 'angular2/core';   
  @Injectable() export class PeliculasService { 
  public getPeliculas = () => [{ id: 1, titulo: 'Peli 1' },       
  { id: 2, titulo: 'Peli 2' }, 
  { id: 3, titulo: 'Peli 3' } ]; } 
 
  
  

Las principales diferencias entre versiones reside en todo lo que se ha comentado en artículo a partir de este momento procederemos a continuar con los programas que tenemos que instalar para empezar a trabajar con angular2 y empezar a mostrar contenido

Instalación de programas

Principalmente para empezar a trabajar con angular2 necesitaremos los siguientes pasos para poder comenzar a trabajar

• 1-Un buen editor para programar como netbeans phpstorm eclipse sublime etc
• 2-Descargar node js desde la web e instalarlo dándole todo el rato a siguiente hasta terminar la instalación. A continuación dejo el link para la descarga para tu sistema operativo correspondiente. Descargar Node JS
• 3-Instalar cualquier programa tipo wampserver,appserv,lamp etc o similares para que arranque nuestro servidor web con sus servicios A continuación dejo el link a Wampserver para que sea descargado según el sistema operativo de cada uno Ir a Wampserver

Empezar con angular y mostrar un hello world

Partimos de la base de que ya tenemos instalado Node.JS y que este está funcionando correctamente. Desde este momento vamos a seguir con los pasos para que angular2 nos muestre nuestros primeros contenidos.

Buscamos nuestra carpeta raiz donde se publican los contenidos de nuestra web en nuestro servidor. Las rutas donde se ecuentre dicha carpeta variarán dependiendo que programa estemos usando para ello. En el caso que yo he propuesto que era usando wamp server basta con ir a c:/wamp/www ahora que ya estamos en la raiz mediante consola o usando el navegador creamos una nueva carpeta en nuestro caso será angularexample y copiamos los archivos que hay continuación en un zip descargándolos en la carpeta anteriormente dicha. Descargar Carpeta

En la carpeta que se ha puesto a disposición hay los siguientes archivos con la siguiente composición

tsconfig.json

Configuración para el compilador de TypeScript:

 
  { "compilerOptions": { "target": "es5","module": "system",    
  "moduleResolution": "node","sourceMap": true,     
  "emitDecoratorMetadata": true, "experimentalDecorators": true,"removeComments": false,     
  "noImplicitAny": false},   "exclude": ["node_modules","typings/main","typings/main.d.ts"   ] }  
  

typins.json
Creamos el archivo typings.json este fichero también es para que TypeScript funcione correctamente:
{"ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"} }
Creamos el fichero package.json
Define las dependencias necesarias del proyecto y que el gestor de paquetes de node las gestione.
{ "name": "angular2-jesusclaramonteweb", "version": "1.0.0",
"scripts": {"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install" }, "license": "ISC",
"dependencies": {"angular2": "2.0.0-beta.14", "systemjs": "0.19.25",
"es6-shim": "^0.35.0", "reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2", "zone.js": "0.6.6" },
"devDependencies": { "concurrently": "^2.0.0",
"lite-server": "^2.2.0", "typescript": "^1.8.9", "typings":"^0.7.12" } }

Ahora llegados a este punto es el momento de usar la consola y colocarnos en la carpeta donde están estos archivos y escribir en ella las siguientes palabras npm install y con esto se instalará todo lo que necesitamos para tener angular en nuestro equipo. Una vez realizado estoa será el momento de empezara a crear nuestro primer componente. Con todos estos pasos estamos preparados para que nuestro programa lite server interprete todo lo que vayamos a programa de ahora en adelante y podamos ver los fallos o el estado del programa, mientras estamos introduciendo código.

Vamos a seguir con el tutorial centrádonos en crear nuestra carpeta el directorio app y dentro los archivos main.ts,app.component.ts

app.component.ts

// Importar el núcleo de Angular import {Component} from 'angular2/core'; // Decorador component, indicamos en que etiqueta se va a cargar la plantilla @Component({ selector: 'my-app', template: 'Hello World!! First Component' })
// Clase del componente donde iran los datos y funcionalidades export class AppComponent { }

Archivo Main.ts el cual lanza el framework de la página

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);

Y ahora en la raiz del proyecto debemos crear nuestro archivo index.html, el cual lo dejo preparado en el siguiente enlace para que se coloque en su debido lugar cogiendo solo el index.html
Descargar Index Html

Ya para terminar el tutorial nos falta poner todo esto en funcionamiento para ello debemos lanzar el lite-server usando el raiz de nuestro proyecto el comando npm start. Desde este momento activaremos el compilador de Typescript que nos creará nuestros js nos mostrará el estado del código que vayamos haciendo y finalmente para lo que se nos muestra podremos entrar en la web mediante el servidor que nos crea angualr con una url parecida a la siguiente http://localhost:3000/ que carga lite-server o accediendo al directorio donde se encuentre guardado el proyecto.

El siguiente tutorial angular se centrará en ir programando desde cero, el uso de type script e ir haciendo pequeñas aplicaciones.