Un vistazo a Angular 2 y Typescript para el impaciente

Buscando un poquito me topé con este tutorial muy interesante, que trata sobre Angular 2 y Typescript. Lo desarrollé usando Ubuntu 16.10.

https://www.sitepoint.com/angular-2-tutorial/

El tutorial me pareció fácil, por lo que recomiendo seguirlo.

TL; DR. Lo que se necesita hacer para poder llegar a la aplicación de juguete es(obs: el tutorial no incluye los estilos, por lo que sale el formulario sin ellos):

- Instalar npm :

sudo apt install npm

- Instalar angular-cli

npm install -g angular-cli

Esto tardó un montón, y asumiendo que funcionó, debería poder verse la versión de npm con este comando

ng version

Ahora ya se puede crear el boilerplate de la aplicación:

ng new angular2-todo-app

Esto crea una estructura de directorios lista para trabajar. se puede probar que la aplicación funciona escribiendo en la terminal:

ng serve

Dentro del directorio de la aplicación creada.
Gracias a Typescript se puede aprovechar la bien conocida orientación a objetos. Para la aplicación de juguete del tutorial, basta con crear una clase Todo:

ng generate class Todo

Que solamente crea el fuente:

src/app/todo.ts

Probablemente angular-cli cambió en algunas cosas desde que se escribió el tutorial original. Admito que no pude correr ningún test, y para la aplicación de juguete, no creo que se demasiado necesario.
Al fuente creado anteriormente se le reemplaza los contenidos con lo que se muestra abajo:

 export class Todo {  
  id: number;  
  title: string = '';  
  complete: boolean = false;  
  constructor(values: Object = {}) {  
   Object.assign(this, values);  
  }  
 }  

Y si en el tutorial original se obvia todo lo de los test, se puede crear un service typescript de la siguiente manera:

ng generate service Todo

Éste fuente typescript maneja la lógica que se aplica sobre la clase Todo. Éste comando genera dos archivos

src/app/todo.service.spec.ts
src/app/todo.service.ts

El primero sirve para los test (no lo uso por esta vez) y el siguiente es en donde se escribe la lógica. Se puede reemplazar sin inconveniente el código que aparece en todo.service.ts por lo siguiente (exactamente igual que en el tutorial original):

 import { Injectable } from '@angular/core';
import {Todo} from './todo';
@Injectable()
export class TodoService {

 lastId: number = 0;

 todos: Todo[]=[];

 constructor() { }

 // Simulate POST /todos
 addTodo(todo: Todo): TodoService {
  if (!todo.id) {
   todo.id = ++this.lastId;
  }
  this.todos.push(todo);
  return this;
 }

 // Simulate DELETE /todos/:id
 deleteTodoById(id: number): TodoService {
  this.todos = this.todos
  .filter(todo => todo.id !== id);
  return this;
 }

 // Simulate PUT /todos/:id
 updateTodoById(id: number, values: Object = {}): Todo {
  let todo = this.getTodoById(id);
  if (!todo) {
   return null;
  }
  Object.assign(todo, values);
  return todo;
 }

 // Simulate GET /todos
 getAllTodos(): Todo[] {
  return this.todos;
 }

 // Simulate GET /todos/:id
 getTodoById(id: number): Todo {
  return this.todos
  .filter(todo => todo.id === id)
  .pop();
 }

 // Toggle todo complete
 toggleTodoComplete(todo: Todo){
  let updatedTodo = this.updateTodoById(todo.id, {
   complete: !todo.complete
  });
  return updatedTodo;
 }

}

Después de obviar los test si se puede pasar a la sección: Creating the TodoApp Component. Ahí es donde en el tutorial tuve que hacer algunas cosas un poquito distintas (tal vez por los cambios que va sufriendo Angular 2 y Typescript). Luego de generar el boilerplate del componente:

ng generate component TodoApp

Se tienen los siguientes fuentes, tal como el tutorial original:

src/app/todo-app/todo-app.component.css
src/app/todo-app/todo-app.component.html
src/app/todo-app/todo-app.component.spec.ts
src/app/todo-app/todo-app.component.ts
src/app/todo-app/index.ts

Ahora bien, en todo-app.component.html se puede reemplazar el código html por el que muestra en el tutorial (no lo muestro acá porque blogger interpreta que es código de la entrada).

Ahora bien, a partir de acá es donde encontré diferencias, y es cuando se debe reemplazar el código de src/app/todo-app/todo-app.component.ts. El mío quedó así, a diferencia del tutorial original:

 import { Component, OnInit } from '@angular/core';
import {TodoService} from '../todo.service';
import {Todo} from '../todo';

@Component({
 selector: 'app-todo-app',
 templateUrl: './todo-app.component.html',
 styleUrls: ['./todo-app.component.css'],
 providers: [TodoService]
})
export class TodoAppComponent implements OnInit {

 //constructor() { }

 ngOnInit() {
 }

 newTodo: Todo = new Todo();

 constructor(private todoService: TodoService) {
 }

 addTodo() {
  this.todoService.addTodo(this.newTodo);
  this.newTodo = new Todo();
 }

 toggleTodoComplete(todo) {
  this.todoService.toggleTodoComplete(todo);
 }

 removeTodo(todo) {
  this.todoService.deleteTodoById(todo.id);
 }

 get todos() {
  return this.todoService.getAllTodos();
 }

}

Y si le das en seco ng serve la página no funciona como se espera, ésto es porque en el tutorial original no se menciona que se debe modificar el archivo src/app/app.component.html, y reemplazarlo por lo siguiente:

<app-todo-app></app-todo-app>

Ésto sirve para que se rutee de la página principal a la aplicación todo. Con esto debería ser suficiente para que la aplicación funcione en http://localhost:4200/angular2-todo-app/

Por último, la parte que habla de subir el código a github pages no me funcionó, por lo que tuve que verlo por mi cuenta. Mi sugerencia es que se versione todo el código, porque al tratar de subir a github pages se reemplazan los fuentes por código optimizado. Les recomiendo seguir un tutorial para subir una aplicación angular a github pages. Algo como esto:

http://developer.telerik.com/featured/quick-angular-2-hosting-angular-cli-github-pages/

Tengan en cuenta, que el index.html del código generado necesita una modificación, a saber:

  <base href="/angular2-todo-app/">

Esto debe quedar así, porque o sino en github pages no resuelve bien los js ni css.

Al final la fuente de la demo se encuentra en

https://github.com/lgmore/angular2-todo-app/

en la rama master

y en

https://lgmore.github.io/angular2-todo-app/

se encuentra la aplicación de juguete funcionando. Cheers!!