Perl, ASP, PHP, Apache, MySQL
NodeJs, Java, C#, MongoDB, Javascript, REST API
function paraCada(unArray, unaFuncion) {
for (i=0; i < unArray.length; i++) {
unaFuncion(unArray[i], i);
}
}
paraCada([10,20,'hola', 'que', 87], function(elem, index) {
console.log('Elemento:', elem, index)
});
function mapear(unArray, unaFuncion) {
var answer = [];
for (i=0; i < unArray.length; i++) {
answer.push(unaFuncion(unArray[i], i));
}
return answer;
}
function cuad(a) {
return a*a;
}
console.log(mapear([1,2,3,4,5], cuad));
var cuad, cubo, array = [1,2,3,4];
cuad = function(a){
return a * a;
};
cubo = function(a) {
return cuad(a) * a;
};
var array = [3,5,7,9,11,14];
array.map(cuad) + array.map(cubo);
console.log(array.reduce(0, suma));
array.filter(function (elem){ return elem > 10})
.map(function (elem) { return elem * elem });
function suma(a,b) {
return a + b;
}
function makeAdder(a) {
return function(b) {
return a + b;
};
}
var x = makeAdder(5);
var y = makeAdder(20);
x(6); // ?
y(7); // ?
var object = {name: 'Jon'};
object.lastName = 'Smith';
object.print = function(){
console.log('Name:', this.name);
console.log('LastName:', this.lastName)};
object.print();
{
"glossary":{
"title":"example glossary",
"GlossDiv":{
"title":"S",
"GlossList":{
"GlossEntry":{
"ID":"SGML",
"SortAs":"SGML",
"GlossTerm":"Standard Generalized Markup Language",
"Acronym":"SGML",
"Abbrev":"ISO 8879:1986",
"GlossDef":{
"para":"A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso":[
"GML",
"XML"
]
},
"GlossSee":"markup"
}
}
}
}
}
var padre = {nombre: 'Pepe', apellido: 'Perez'};
var hijo = Object.create(padre);
padre.mostrarNombre = function() { console.log(this.nombre)};
hijo.nombre = 'Pedro';
padre.mostrarNombre();
hijo.mostrarNombre();
console.log(hijo.apellido);
// Shape - superclass
function Shape() {
this.x = 0;
this.y = 0;
}
// superclass method
Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info('Shape moved.');
};
// Rectangle - subclass
function Rectangle() {
Shape.call(this); // call super constructor.
}
// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var rect = new Rectangle();
console.log('Is rect an instance of Rectangle?',
rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'
Crear una funcion buscar(array, criterio, siVacio), que reciba un array y dos funciiones si criterio es verdadero devolver el elemento encontrado sino doveolver el resultado de ejecutar la otra funcion "siVacio"
buscar(
[1,2,3,4],
function(each){ return each === 5},
function() {return 'no encontrado'}
);
Completar el ejemplo de Shape para que incluya circulos y triangulos, un metodo para mostrar cada uno por consola y un metodo para escalar cada figura en un porcentaje
Crear mediante un objeto literal la estructura de 3 carreras de grado y una de pregrado de la utn con sus materias, duracion de cada carrera, nombre de la materia y descripción.
A partir de este arbol mostrar por consola codigo html que represente este arbol con un formato amigable (h1, h2 para titulos, ol, ul para listas, etc)
Shiba Inu
Dog Breed
Estp es una descripcion del perro
Link
import { Component } from '@angular/core';
import {TodoItem} from './todo-item'
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
list: Array<TodoItem>;
item: TodoItem;
constructor() {
this.list = [];
this.item = new TodoItem;
}
add( anItem: TodoItem) {
this.list.push(anItem);
this.item = new TodoItem;
}
remove( index: number) {
this.list.splice(index,1);
}
}
<h1 [ngClass]="{'big': list.length > 5}" >Todo {{list.length}}</h1>
<input type="text" [(ngModel)]="item.text">
<input type="button" value="Add" (click)="add(item)">
<ul>
<li
[ngClass]="{'done': todoItem.done}" \
*ngFor="let todoItem of list; let i = index">
<input type="checkbox" [(ngModel)]="todoItem.done">
{{todoItem.text}}
<input
*ngIf="todoItem.done"
(click)="remove(i)"
type="button"
name="name"
value="X">
</li>
</ul>
Resultado {{2+2}}
{{items.length === 0 ? 'Vacio' : items.length}}
#Palabras: {{palabras.split(' ').length}}
Permite incluir o eliminar un elemento del DOM con una condición
No hay resultados en la lista
0">
- Elemento 1
- Elemento 2
Permite incluir o eliminar classes de un elemento dinamicamente
X
X
X
X
X
X
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>
<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
[class.special]="!isSpecial">This one is not so special</div>
<button [style.color] = "isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
<table border=1>
<!-- expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
<!-- ERROR: There is no `colspan` property to set!
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
-->
<tr><td>Five</td><td>Six</td></tr>
</table>
Permite iterar por una coleccion y generar elementos DOM en cada iteracion
-
{{language}}
Crear una Lista de tareas para hacer en en un unico componente Angular, usando las directivas del framework
La lista se compone de un input de texto con un boton de agregar y una lista de tareas donde cada una se puede eliminar tambien con un botón
Ademas puede setear cada tarea como completada/incompleta con un boton adicional en cada una
Ejemploimport {Component} from '@angular/core';
@Component({
selector: 'counter',
template: `
Count: {{num}}
`
})
export class CounterComponent {
num = 0;
increment() {
this.num++;
}
}
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'counter',
templateUrl: 'app/counter.component.html'
})
export class CounterComponent {
@Input() count = 0;
@Output() result = new EventEmitter();
increment() {
this.count++;
this.result.emit(this.count);
}
}
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'counter',
templateUrl: 'app/counter.component.html'
})
export class CounterComponent {
@Input() count = 0;
@Output() countChange = EventEmitter();
increment() {
this.count++;
this.countChange.emit(this.count);
}
}
import { Component } from '@angular/core';
@Component({
selector: 'child',
template: `
Child Component
`
})
export class ChildComponent {
}
Contenido proyectado.
Section Content
div with .class-select
Header Content
Child Component with Select
ngOnChanges
- cuando cambia un binding inputngOnInit
- despues del primer ngOnChanges
ngDoCheck
- despues de cada change detection ngAfterContentInit
- despues de inicializado el contenidongAfterContentChecked
- despues de cada checkeo del contenidongAfterViewInit
- despues de incializada la vistangAfterViewChecked
- despues de cada check de la vistangOnDestroy
- justo antes de destruir el componentengOnInit
- despues del primer ngOnChanges
ngOnChanges
- cuando cambia un binding inputngOnDestroy
- justo antes de destruir el componenteimport { Component, ViewChild } from '@angular/core';
import { AlertComponent } from './alert.component';
@Component({
selector: 'app-root',
template: `
My alert
`
})
export class AppComponent {
@ViewChild(AlertComponent) alert: AlertComponent;
showAlert() {
this.alert.show();
}
}
import { Component, QueryList, ViewChildren } from '@angular/core';
import { AlertComponent } from './alert.component';
@Component({
selector: 'app-root',
template: `
Step 1: Learn angular
Step 2: Love angular
Step 3: Build app
`
})
export class AppComponent {
@ViewChildren(AlertComponent) alerts: QueryList;
alertsArr = [];
ngAfterViewInit() {
this.alertsArr = this.alerts.toArray();
}
showAlert(step) {
this.alertsArr[step - 1].show(); // step 1 is alert index 0
}
}
import { AfterContentInit, Component, ElementRef } from '@angular/core';
@Component({
selector: 'app-root',
template: `
My App
{{ node }}
`
})
export class AppComponent implements AfterContentInit {
node: string;
constructor(private elementRef: ElementRef) { }
ngAfterContentInit() {
const tmp = document.createElement('div');
const el = this.elementRef.nativeElement.cloneNode(true);
tmp.appendChild(el);
this.node = tmp.innerHTML;
}
}
<!-- phone refers to the input element; pass its `value` to an event handler -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>
<!-- fax refers to the input element; pass its `value` to an event handler -->
<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
import { ZipCodeValidator } from "./ZipCodeValidator";
let myValidator = new ZipCodeValidator();
NgModule(options : {
constructor(options?: NgModuleMetadataType)
providers : Provider[]
declarations : Array<Type<any>|any[]>
imports : Array<Type<any>|ModuleWithProviders|any[]>
exports : Array<Type<any>|any[]>
entryComponents : Array<Type<any>|any[]>
bootstrap : Array<Type<any>|any[]>
schemas : Array<SchemaMetadata|any[]>
})
import { Component, Input, Output, EventEmitter } from '@angular/core';
import {TodoItem} from './todo-item';
@Component({
selector: 'todo-line',
template: `
<input type="checkbox" [(ngModel)]="item.done">
{{item.text}}
<input type="button" name="name" value="X" (click)="remove(item)">
`
})
export class TodoLine {
@Input() item: TodoItem;
@Output() removeRequested: EventEmitter<any> = new EventEmitter();
remove( index: number) {
this.removeRequested.emit(this.item)
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Un servicio es un componente no visual en Angular
Sirven para comunicar componentes, reutilizar funcionalidad o guardar información
Angular provee un servicio de Inyeccion de Dependencias
Inversion de Control
El componente no instancia sus dependencias, solo especifica lo que necesita
export class ProfileComponent {
profileService = new ProfileService();
}
export class ProfileComponent {
constructor(private profileService: ProfileService) {}
}
Angular lo tiene muy integrado
La estructura de modulos determina la inyeccion
En Angular se usa para principlamente para unit test
import { Injectable } from '@angular/core';
@Injectable()
export class TodoService {
constructor() { }
}
@Injectable()
export class ProfileService {
constructor(private httpClient: HttpClient) {}
}
export class ProfileComponent {
constructor(
private profileService: ProfileService,
private: BreakpointService) {}
}
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [TodoService],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class TodoService {
constructor() { }
}
export class ProfileService {
constructor(private httpClient: HttpClient) {}
}
@Component({
/* . . . */
providers: [ProfileServicet]
})
export class ProfileComponent {
constructor(
private profileService: ProfileService,
private: BreakpointService) {}
}
Tomar el codigo del branch servicios bajarlo a su proipio repo e implementar en otro servicio llamado LocalStorageService el guardado de la lista de forma persistente segun las apis del navegador
La World Wide Web (Web), es una red de recursos de información.
scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]Ejemplos
Hyper Text transfer protocol
Actualmente el protocolo por defecto para trabajar en el browser
Ultimamente el mas popular para intercambio de datos entre aplicaciones
GET /u/1819149?s=64&v=4 HTTP/1.1 Host: avatars0.githubusercontent.com Pragma: no-cache Cache-Control: no-cache User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) Accept: image/webp,image/apng,image/*,*/*;q=0.8 Referer: https://github.com/ Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9,es;q=0.8
HTTP/1.1 200 OK Accept-Ranges:bytes Access-Control-Allow-Origin:* Cache-Control:max-age=300 Connection:keep-alive Content-Length:2581 Content-Type:image/jpeg Date:Wed, 14 Mar 2018 20:03:17 GMT Expires:Wed, 14 Mar 2018 20:08:17 GMT Last-Modified:Mon, 26 Aug 2013 02:08:22 GMT Timing-Allow-Origin:https://github.com JPGBASE64BBFSD
En la version 9 solo podemos usar el HttpClientModule
En versiones anteriores habia otra opción
El modulo usa observables para la notificación y manejo de ejecución asincrona
Basicamente es un objeto que mantiene una lista de suscriptores a los que les avisa cuando se produce un cambio
Es una bibliototeca para el manejo de eventos, documentación
En angular el cliente de http devuelve un observable que emite un evento cuando llega la respuesta
import { Injectable } from '@angular/core';
@Injectable()
export class TodoService {
list = [];
constructor(private: http: HttpClient) { }
getList() {
this.http.get('https://myapi.todo.com/v1/items')
.subscribe(response => this.list = response.items)
}
}
También cuando hacemos un POST, tenemos que suscribirnos, sino no se hace la llamada
import { Injectable } from '@angular/core';
@Injectable()
export class TodoService {
list = [];
constructor(private: http: HttpClient) { }
addItem() {
this.http.post('https://myapi.todo.com/v1/item',
{description: 'comprar yerba', isCompleted: false}
).subscribe(response => this.list = response.items)
}
}
Los observables incluyen varias formas de manejo de error, ya sea con una callback
import { Injectable } from '@angular/core';
@Injectable()
export class TodoService {
list = [];
constructor(private: http: HttpClient) { }
getList() {
this.http.get('https://myapi.todo.com/v1/items')
.subscribe(
response => this.list = response.items,
error => this.error = error)
}
}
Operadores como catchError
import { Injectable } from '@angular/core';
@Injectable()
export class TodoService {
list = [];
constructor(private: http: HttpClient) { }
getList() {
this.http.get('https://myapi.todo.com/v1/items')
.pipe(catchError(error => {return []}))
.subscribe(response => this.list = response.items)
}
}
Por defecto se trabaja con json y se observa el body
options: {
headers?: HttpHeaders | {[header: string]: string | string[]},
observe?: 'body' | 'events' | 'response',
params?: HttpParams|{[param: string]: string | string[]},
reportProgress?: boolean,
responseType?: 'arraybuffer'|'blob'|'json'|'text',
withCredentials?: boolean,
}
Para setear headers se utiliza el objeto options
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'my-auth-token'
})
};
this.http.post(url, body, options).subscribe()
}
Con un usuario hardocdeado agregar un boton a un articulo del ejercicio anterior y hacer que le agregue un comentario ingresado en un textarea. tenemos que llamar el metodo login que nos va a devolver un objeto con un token. Ese token lo tenemos que agregar en un header del post para agregar el comentario con el siguiente formato
Authorization: Token [aca concatenado va el token obtenido]
En una SPA no hace falta el ruteo entonces
Las rutas de una app estan en una array,
Con este array y el RouterModule se crean las rutas
const routes: Routes = [
{ path: 'component-one', component: ComponentOne },
{ path: 'component-two', component: ComponentTwo },
{ path: 'component-three', component: ComponentTwo },
{ path: '', redirectTo: 'component-one', pathMatch: 'full' },
];
export const routing = RouterModule.forRoot(routes);
Despues se importa este modulo
...
import { routing } from './app.routes';
@NgModule({
imports: [
BrowserModule,
routing
],
declarations: [
AppComponent,
ComponentOne,
ComponentTwo
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
Component One
this.router.navigate(['/component-one']);
export const routes: Routes = [
{ path: '', redirectTo: 'product-list', pathMatch: 'full' },
{ path: 'product-list', component: ProductList },
{ path: 'product-details/:id', component: ProductDetails }
];
goToProductDetails(id) {
this.router.navigate(['/product-details', id]);
}
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'product-details',
template: `
Showing product details for product: {{id}}
`,
})
export class LoanDetailsPage implements OnInit, OnDestroy {
id: number;
private sub: any;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = +params['id']; // (+) converts string 'id' to a number
// In a real app: dispatch action to load the details here.
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
import { Routes, RouterModule } from '@angular/router';
import { AccountPage } from './account-page';
import { LoginRouteGuard } from './login-route-guard';
import { SaveFormsGuard } from './save-forms-guard';
const routes: Routes = [
{ path: 'home', component: HomePage },
{
path: 'accounts',
component: AccountPage,
canActivate: [LoginRouteGuard],
canDeactivate: [SaveFormsGuard]
}
];
export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(routes);
import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { AccountPage } from './account-page';
@Injectable()
export class SaveFormsGuard implements CanDeactivate {
canDeactivate(component: AccountPage) {
return component.areFormsSaved();
}
}
Realizar una aplicación que permita editar una lista de usuarios La aplicación debe tener una pagina de login, el usuario logueado es parte de esa lista. La aplicación debe tener una pagina para mostrar la lista Otra para editar los usuarios Otra para dar de alta un usuario Otra para ver un usuario. (Se puede usar el formulario de edición con los campos en readonly) Y otra para eliminar los usuarios Cada usuario tiene permisos de agregar nuevos usuarios, editar usuarios eliminar usuarios editar sus propios datos El usuario no puede eliminarse a si mismo
Framework para manejar formularios y validaciones en angular
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
export class NameEditorComponent {
name = new FormControl('');
}
updateName() {
this.name.setValue('Nancy');
}
export class ProfileEditorComponent {
profileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
});
}
updateProfile() {
this.profileForm.patchValue({
firstName: 'Nancy',
address: {
street: '123 Drew Street'
}
});
}
profileForm = new FormGroup({
firstName: new FormControl('Andres', [Validators.required, Validators.maxlength(10)]),
lastName: new FormControl('', Validators.required),
});
}
export function ValidateUrl(control: AbstractControl) {
if (!control.value.startsWith('https') || !control.value.includes('.io')) {
return { validUrl: true };
}
return null;
}
profileForm = new FormGroup({
url: new FormControl('Andres', [Validators.required, ValidateUrl]),
});
}
Usando la rama reactive-forms
del repositorio de ejemplos
Modificar el ejemplo de Todolist para que permita: