Conceptos básicos de Angular
@eseguro7
@ltciro
¿Qué es Angular?
Es un framework mantenido por google para desarrollar SPA (Single page applications)
Está escrito en Typescript, se pueden desarrollar aplicaciones Angular con Typescript o Javascript.
Componentes
Angular se basa en componentes, son la manera en que construimos carácteristicas de nuestra página y su lógica.
//INICIO DE DECORADOR
@Component(
//INICIO DE METADATA
{
selector: 'greet',
template: 'Hello {{name}}!'
}
// FIN DE METADA
)
// FIN DE DECORADOR
//DEFINICIÓN DE LA CLASE
class Greet {
name: string;
constructor() {
this.name = 'World'
}
}Hello World
Directivas
Interactuan con elementos HTML en el DOM del navegador.
Se dividen en 3 tipos de directivas
Componentes.
Directivas estructurales:
Directivas de atributo:
<span *ngIf="isMorning(); else elseBlock">good morning</span>
<ng-template #elseBlock>good afternoon</ng-template>
{{name}}! <div [style.background-color]="isMorning() ? 'cyan': 'magenta'">
//aquí puede ir el código de arriba
</div>Data Binding
Es un proceso donde los datos pasan del componente (controlador ) a la vista y viceversa.
<!--Interpolation-->
<span>{{name}}</span>
<!--Property-->
<p [hidden]="!isMorning()">es temprano!</p>
<!--Attribute-->
<p myHighlight>Highlight me!</p>
<!--Class-->
<button [ngClass]="{Highlight: isMorning()">
hola!
</button>
<!--Event-->
<button (click)="DoSomething()">Do something</button>
<!--Style-->
<div [style.font-size]="'12px'" >
este div tiene una fuente de 12px.
</div>
<!--Two-way-->
<input [(ngModel)]="name" />
{{name}}
Module
Identifica los componentes, directivas y demás que utiliza la aplicación.
Cada aplicación Angular tiene un módulo root.
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ Greet ],
bootstrap: [ Greet ]
})
export class AppModule {}Mas Características
Observables.
Lazy loading.
Gracias totales!
Ahora si, a codear!!
Angular Basics
By Estefanny seguro