Herramientas de usuario
wiki2:angular:specifics
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Próxima revisión | Revisión previa | ||
|
wiki2:angular:specifics [2016/07/13 10:59] alfred creado |
wiki2:angular:specifics [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== Angular Specifics ====== | ====== Angular Specifics ====== | ||
| + | ===== Templates ===== | ||
| + | |||
| + | Podemos ampliar el HTML de nuestra página: | ||
| + | <code> | ||
| + | <h3> | ||
| + | {{title}} | ||
| + | <img src="{{heroImageUrl}}" style="height:30px"> | ||
| + | </h3> | ||
| + | </code> | ||
| + | |||
| + | También evaluar expresiones: | ||
| + | <code> | ||
| + | <p>The sum of 1 + 1 is {{1 + 1}}</p> | ||
| + | <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p> | ||
| + | </code> | ||
| + | En esta evaluación de expresiones podemos usar el new de JS, encadenar expresiones con '';'' pero no podemos acceder al ''window'', ''document'', ''console.log'' o ''Math.max'' (sólo permite los miembros del contexto). | ||
| + | |||
| + | Cuando vemos algo tipo ''<nowiki>{{title}}</nowiki>'' nos referimos a la propiedad ''title'' del componente. Cuando vemos algo así ''[disabled]="isUnchanged"'' nos referimos a la propiedad ''isUnchanged'' del componente que se asigna a la propiedad ''disabled'' de la tag. | ||
| + | |||
| + | Para enlazar los eventos usamos la siguiente sintaxis: ''(event)="statement"'' | ||
| + | <code> | ||
| + | <button (click)="onSave()">Save</button> | ||
| + | </code> | ||
| + | |||
| + | Para enlazar una propiedad en two-way (es decir que cuando se cambie que también cambie el objeto Angular cuando cambie el valor en el HTML): ''[(target)] = "expression"'' | ||
| + | |||
| + | Cambiar propiedades: | ||
| + | <code> | ||
| + | <img [src] = "heroImageUrl"> | ||
| + | <hero-detail [hero]="currentHero"></hero-detail> | ||
| + | <div [ngClass] = "{selected: isSelected}"></div> | ||
| + | </code> | ||
| + | |||
| + | Cambiar eventos: | ||
| + | <code> | ||
| + | <button (click) = "onSave()">Save</button> | ||
| + | <hero-detail (deleteRequest)="deleteHero()"></hero-detail> | ||
| + | <div (myClick)="clicked=$event">click me</div> | ||
| + | </code> | ||
| + | |||
| + | Cambiar evento y propiedad: | ||
| + | <code> | ||
| + | <input [(ngModel)]="heroName"> | ||
| + | </code> | ||
| + | |||
| + | Cambiar un atributo: | ||
| + | <code> | ||
| + | <button [attr.aria-label]="help">help</button> | ||
| + | </code> | ||
| + | |||
| + | Cambiar la clase: | ||
| + | <code> | ||
| + | <div [class.special]="isSpecial">Special</div> | ||
| + | </code> | ||
| + | |||
| + | Cambiar el estilo: | ||
| + | <code> | ||
| + | <button [style.color] = "isSpecial ? 'red' : 'green'"> | ||
| + | </code> | ||
| + | |||
| + | Para editar el target más común usamos ''ngClass'': | ||
| + | <code> | ||
| + | <div [ngClass]="classes">[ngClass] binding to the classes property</div> | ||
| + | </code> | ||
| + | //Technically, Angular is matching the name to a directive input, one of the property names listed in the directive’s inputs array or a property decorated with @Input(). Such inputs map to the directive’s own properties.// | ||
| + | |||
| + | La propiedad ''hero'' de ''HeroDetail'' espera un objeto del tipo ''Hero'' (los brackets indican a Angular que evalue la expresión, sino sería tomado como un string): | ||
| + | <code> | ||
| + | <hero-detail [hero]="currentHero"></hero-detail> | ||
| + | </code> | ||
| + | |||
| + | Los siguientes pares hacen la misma acción: | ||
| + | <code> | ||
| + | <p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p> | ||
| + | <p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p> | ||
| + | |||
| + | <p><span>"{{title}}" is the <i>interpolated</i> title.</span></p> | ||
| + | <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p> | ||
| + | </code> | ||
| + | |||
| + | When developing data entry forms, we often want to both display a data property and update that property when the user makes changes. | ||
| + | |||
| + | Cuando tratamos con datos introducidos por el usuario querremos que lo que se muestra y lo que se almacena coincida, esto lo permite el ''[(ngModel)]'': | ||
| + | <code> | ||
| + | <input [(ngModel)]="currentHero.firstName"> | ||
| + | </code> | ||
| + | |||
| + | ==== Clausulas ==== | ||
| + | |||
| + | Hay clausulas ( :!: precedidas por ''*'') que permiten el render de la vista en bucle o condicional: | ||
| + | <code> | ||
| + | <li *ngFor="let hero of heroes"> | ||
| + | <span class="badge">{{hero.id}}</span> {{hero.name}} | ||
| + | </li> | ||
| + | </code> | ||
| + | |||
| + | El * para ''ngFor'' indica que el elemento <li> (y sus hijos) son una template. ''ngFor'' itera sobre los heroes devueltos por AppComponent.heroers y los añade a la template. El código entre comillas indica "coger cada hero en el array de heores, guardarlo en la variable hero y permitir su acceso desde ese elemento". El keyword led indica que hero es una variable de entrada. | ||
| + | |||
| + | === ngFor === | ||
| + | <code> | ||
| + | <div *ngFor="let hero of heroes">{{hero.fullName}}</div> | ||
| + | |||
| + | <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.fullName}}</div> | ||
| + | </code> | ||
| + | |||
| + | === ngForTrackBy === | ||
| + | |||
| + | === ngIf === | ||
| + | |||
| + | === ngSwitch === | ||
wiki2/angular/specifics.1468407557.txt.gz · Última modificación: 2020/05/09 09:25 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
