WORKSHOP

2021
Maria Alejandra buquete
 TO DO LIST
• SIN ESTADO
• los cambios a la lista de tareas pendientes se perderán si la
ventana del navegador se cierra o se vuelve a cargar.
• ng new todo --routing false --style css --skip-git --skip-tests
• ng serve
• http://localhost:4200
• En VS, file/open folder/ toto
 TSLINT

• TSLint es opcional, pero es recomendado para tener un estido de código

consistente.
• Instalarlo

• tslint.json
• ./node_modules/.bin/tslint - - init
• Este comando generara el archivo
tslint.json
DATA MODEL
• Para iniciar el modelo de datos para la aplicación, agregar un archivo
llamado
• todoItem.ts (la extensión ts es por typescript)
• en la carpeta todo/src/app
export class TodoItem {

constructor(taskVal: string, completeVal: boolean = false) {

this.task = taskVal;
this.complete = completeVal;

}
task: string;
complete: boolean;
}
• Si aparece un error subrayando export, “not using the local tslint
version found for”, entonces realice lo siguiente:

export class TodoItem {

constructor(taskVal: string, completeVal: boolean = false) {

this.task = taskVal;
this.complete = completeVal;

}
task: string;
complete: boolean;
OPERACIONES DEL TODO LIST
• Agregar un archivo llamado
• todoList.ts
• en la carpeta todo/src/app
Import { TodoItem } from “./todoItem”;
export class TodoList {
constructor(public user: string, private todoItems: TodoItem[]
= []) {
// nada
}
getItems():readonly TodoItem[] {
return this.todoItems:
}
addItem(task:string){
this.todoItems.push(new TodoItem(task));
}
}
VIEW
• Abrir un archivo llamado {{..}}  funciona como un enlace de datos
• app.component.html

• en la carpeta todo/src/app

<h3>
{{ username }}'s To Do List
<h6>{{ itemCount }} Items</h6>
</h3>
BINDING
• Abrir un archivo llamado
• app.component.ts
• en la carpeta todo/src/app
Conceptos Index.html

• Imports
• Decorator

• Class
Guardar
 Estilos de HTML
• Hasta ahora generamos contenido con texto plano
• Agreguemos el framework BOOTSTRAP para darle
estilo a nuestra app
• Ejecutar
• Npm install bootstrap@4.4.6
• Ng serve --open
• Agregar una entrada en el archivo angular.json para
que el browser interprete los stilos de Bootstrap
• "node_modules/bootstrap/dist/css/bootstrap.min.css“
• Angular.json es usado para configurar las herramientas del
Proyecto
• LINEAS 34 Y 95
Estilos de HTML
• He agregado los elementos de la plantilla a las clases que
cambiarán su apariencia.
• app.component.html

• Ejecutar
• ng serve
Tareas para completar el TODO LIST
• Displaying the List of To-Do Items
• Creating a Two-Way Data Binding
• Filtering To-Do Items
• Adding To-Do Items
• Displaying Completed To-Do Items
 import { Component } from '@angular/core';
import { TodoList } from "./todoList";
import { TodoItem } from "./todoItem";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
Mostrando la Lista styleUrls: ['./app.component.css']
})
de To-Do Items export class AppComponent {
private list = new TodoList("Bob", [
app.component.ts new TodoItem("Go for run"),
new TodoItem("Get flowers"),
new TodoItem("Collect tickets"),
]);
get username(): string {
return this.list.user;
}
get itemCount(): number {
return this.list.items.filter(item => !item.complete).length;
}
get items(): readonly TodoItem[] {
return this.list.items;
}
}
 <h3 class="bg-primary text-center text-white p-2">
{{ username }}'s To Do List
<h6 class="mt-1">{{ itemCount }} Incomplete Items</h6>
</h3>
<table class="table table-striped table-bordered table-sm">
<thead>
Mostrando la Lista <tr><th>#</th><th>Description</th><th>Done</th></tr>
</thead>
de To-Do Items <tbody>
<tr *ngFor="let item of items; let i = index">
app.component.html <td>{{ i + 1 }}</td>
<td>{{ item.task }}</td>
<td [ngSwitch]="item.complete">
<span *ngSwitchCase="true">Yes</span>
<span *ngSwitchDefault>No</span>
</td>
</tr>
</tbody>
</table>
Creando un Two-Way Data Binding

• Hasta ahora hemos usado “ONE WAY DATA BINDING”

• Podemos mostrar los datos, pero no Podemos MODIFICARLOS
• ANGULAR, soporta “TWO WAY DATA BINDING”
• Podemos mostrar y modificar los datos
• Se usa con elmentos del FORM de HTML
• Agregamos un element CHECKBOX al template para probarlo
 <h3 class="bg-primary text-center text-white p-2">
{{ username }}'s To Do List
<h6 class="mt-1">{{ itemCount }} Incomplete Items</h6>
</h3>
<table class="table table-striped table-bordered table-sm">
<thead>
Mostrando la Lista <tr><th>#</th><th>Description</th><th>Done</th></tr>
</thead>
de To-Do Items <tbody>
<tr *ngFor="let item of items; let i = index">
app.component.html <td>{{ i + 1 }}</td>
<td>{{ item.task }}</td>

<td><input type="checkbox" [(ngModel)]="item.complete" /></td>

<td [ngSwitch]="item.complete">
<span *ngSwitchCase="true">Yes</span>
<span *ngSwitchDefault>No</span>
</td>
</tr>
</tbody>
</table>
 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from ‘@angular/forms’;
Mostrando la Lista
import { AppComponent } from './app.component';
de To-Do Items @NgModule({
app.module.ts declarations: [
AppComponent
habilitando la ],
imports: [
caracteristica de BrowserModule, FormsModule
],
two way binding providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Ejecutar
ng serve
Modificar un valor con un CHECKBOX
 import { Component } from '@angular/core';
import { TodoList } from "./todoList";
import { TodoItem } from "./todoItem";

Filtering To-Do Items @Component({

selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
• Borrar items del To-Do, })
export class AppComponent {
una vez que han sido private list = new TodoList("Bob", [
marcados como hechos new TodoItem("Go for run"),
new TodoItem("Get flowers"),
new TodoItem("Collect tickets"),
• Modificar el archivo ]);
app.component.ts get username(): string {
return this.list.user;
}
get itemCount(): number {
return this.items.length;
}
get items(): readonly TodoItem[] {
return this.list.ítems.filter(item => item.complete);
}
}
 Agregar ITEMS al To-Do LIST
<h3 class="bg-primary text-center text-white p-2">
{{ username }}'s To Do List
<h6 class="mt-1">{{ itemCount }} Incomplete Items</h6>
</h3>
• Modificar <div class="container-fluid">
app.component.html <div class="row">
<div class="col">
<input class="form-control" placeholder="Enter task here" #todoText
/>
</div>
<div class="col-auto">
<button class="btn btn-primary" (click)="addItem(todoText.value)">
Event Binding Add
</button>
</div>
</div>
</div>
<div class="m-2">
<table class="table table-striped table-bordered table-sm">
………………………
 import { Component } from '@angular/core';
import { TodoList } from "./todoList";
Agregar ITEMS al import { TodoItem } from "./todoItem";
@Component({
To-Do LIST …………………..
get username(): string {
return this.list.user;
• Modificar }
get itemCount(): number {
app.component.ts return this.items.length;
}
get items(): readonly TodoItem[] {
return this.list.ítems.filter(item => item.complete);
}
addItem(newItem){
if (newItem != “” ) {
this.list.addItem(newItem);
}
}
}
 Mostrar el To-Do List con los items hechos
• Modificar la columna de yes/no de la table del template del html app.component.html
<h3 class="bg-primary text-center text-white p-2"> <!-- <td [ngSwitch]="item.complete">
{{ username }}'s To Do List <span *ngSwitchCase="true">Yes</span>
<h6 class="mt-1">{{ itemCount }} {{ showComplete ? "" : <span *ngSwitchDefault>No</span>
"Incomplete" }} Items</h6> </td> -->
</h3> </tr>
<div class="container-fluid"> </tbody>
…… </table>
<table class="table table-striped table-bordered table-sm"> </div>
<thead> <div class="bg-secondary text-white text-center p-2">
<tr><th>#</th><th>Description</th><th>Done</th></tr> <div class="form-check">
</thead> <input class="form-check-input" type="checkbox"
<tbody> [(ngModel)]="showComplete" />
<tr *ngFor="let item of items; let i = index"> <label class="form-check-label" for="defaultCheck1">
<td>{{ i + 1 }}</td> Show Completed Tasks
<td>{{ item.task }}</td> </label>
<td><input type="checkbox" [(ngModel)]="item.complete" /></td> </div>
</div>
 Mostrar el import { Component } from '@angular/core';
import { TodoList } from "./todoList";
To-Do LIST con los import { TodoItem } from "./todoItem";
@Component({
items hechos …………………..
get username(): string {
• Modificar return this.list.user;
}
app.component.ts get itemCount(): number {
return this.items.length;
}
get items(): readonly TodoItem[] {
return this.list.items.filter(item => this.showComplete ||
!item.complete);
}
addItem(newItem){
if (newItem != “” ) {
this.list.addItem(newItem);
}
}
showComplete:boolean=false;
}
Resumen
• crear una primera aplicación Angular simple, que le permite al
usuario
• crear nuevos elementos de tareas pendientes
• marcar los elementos existentes como completos.
• comprender en esta clase la forma general de una aplicación angular,
que se basa en
• un modelo de datos,
• componentes
• y plantillas.
• Si tiene en cuenta estos tres bloques de construcción clave, tendrá un
contexto para todo lo que sigue.
 EJECUTANDO EN DESARROLLO
Esto es lo que recibe
• DESARROLLO el Browser
• ng serve
• localhost:4200/
JS
runtime Contiene código que procesa el contenido de los otros *js
polyfills Contiene el código que provee la implementación de
características que el browser no soporta
vendor Contiene código de 3eras partes, incluido el framework de
angular (en desarrollo ocupa mucha memoria, pero una vez
compilado se reduce a solo lo que usa del framework de
angular)
main Contiene las instrucciones de inicio
styles Contiene los estilos que la aplicación necesita
 Producción
• ng build - -prod
• Ejecutar lo compilado
• npx http-server@0.12.1 dist/todo --port 5000
• http://localhost:5000

Esto es lo que recibe

el Browser