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

Gracias totales!

Ahora si, a codear!!

Angular Basics

By Estefanny seguro

Angular Basics

  • 206
Loading comments...