7 - Componentes Avanzados - Entendiendo Angular

Ya estuvimos hablando de los componentes, y sabemos que son la gran mayoria de lo que vamos a escribir... porque deberiamos pensar en componentes.. Angular es un arbol de componentes, por lo tanto vamos a ver un poco mas a fondo todavia los componentes y entender un poco mas su integración.
import { Component } from '@angular/core';
​
@Component({
    selector: 'login',
    templateUrl: 'login.component.html'
})
export class LoginComponent{
​
    //contructor es quien recibe la inyeccion de las dependencias => capítulo 9
    constructor(){
​
    }
​
​
    // lifeCycle => capítulo 10
    ngOnInit(){
    }
    ngOnDestroy() {
    }
​
​
}
Vimos como crear un componente, agregarle entradas, salidas... pero hay mucho mas todavía.. vamos a ver/pensar todo lo que podemos hacer con un Componente...
Primero , el componente principal va a ser quien cargue la aplicación,
Por medio de los lifecycle vamos a poder modificar cosas ( o determinar si se abre o no ) 
Por medio de router vamos a poder abrir componentes dentro de otros (sin que sean childcomponents, expecificamente)
Vamos a poder pasar datos entre componentes padres e hijos (cuantos tengamos en la rama)
Vamos a poder manejar distintos tipos de estados
Vamos a poder pasar datos por medio de la Inyección de dependencias ( servicios ) 
Generar funcionalidad encapsulada
manejo de formularios
Manejo de eventos en la UI
Detección de cambios (AngularZone)
Claro podemos hacer muchisimas cosas y todo eso gracias a toda la funcionalidad de Angular, y para eso vamos a tener que avazar con los capitulos ... pero queria mostrar como quedaria un componente super completo, mas alla que podrias no entender/saber algunas cosas de las que vamos a ver ahora, pero si podrias identificarlas.
import { Component, NgZone } from '@angular/core';
​
import { FormBuilder, FormGroup } from '@angular/forms';
​
import { Store } from '@ngrx/store';
import { INCREMENT, DECREMENT, RESET } from './services/counter';
import { Observable } from 'rxjs/Observable';
​
import { Router } from '@angular/router';
​
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { AuthProviders, AuthMethods } from 'angularfire2';
​
interface AppState{
  counter: number;
}
​
@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  votacion = '';
  data:any;
  myForm : FormGroup;
  counter: Observable<number>;
  dataFirebase:any;
  errorMessage:any;
​
  constructor(
    private fb: FormBuilder,
    private store: Store<AppState>,
    private _ngZone:NgZone,
    private router: Router,
    private af : AngularFire
    ){
​
      this.callTicketsMongo();
​
      this.ticketFirebase = af.database.list('/ticket');
​
      this.dataFirebase.push({
          'id': 1, 'texto': 'no me funciona nada', 'estado': 'enojado'
      });
​
​
      this.af.auth.login({
        provider: AuthProviders.Google,
        method: AuthMethods.Popup
      });
​
      this.counter = store.select('counter');
​
    this.tickets = ticketService.getTickets();
​
    this.myForm = fb.group({
      'name': ['Jorge']
    });
​
  }
​
  callTicketsMongo():void{
    this.ticketService.getTicketsMongo()
        .then(
          tickets => this.ticketMongo = tickets,
          error => this.errorMessage = <any>error
        );
  }
​
  votos = [
    {title : 'Opción 1'},
    {title : 'Opción 2'},
    {title : 'Opción 3'},
    {title : 'Opción 4'}
  ];
​
  addVoto(response: string) {
    this.votacion = "Usted eligio: " + response;
  }
​
  cantidad = 5;
  factor = 1;
​
  onSubmit(value:string):void{
    console.log("El formulario tiene", value);
  }
​
  increment(){
    this.store.dispatch({type: INCREMENT});
  }
​
  decrement(){
    this.store.dispatch({type: DECREMENT});
  }
  reset(){
    this.store.dispatch({type: RESET});
  }
​
  progress: number = 0;
  label:string;
​
  processWithinAngularZone(){
    this.label="inside";
    this.progress = 0;
    this._ngZone.runOutsideAngular(()=>{
      this._increaseProgress(()=>{
        this._ngZone.run(()=>{console.log("Finalizado con ngzone")})
      })
    })
  }
  _increaseProgress(doneCallBack: ()=>void){
    this.progress+=1;
    console.log(`Progreso: ${this.progress}%`);
    if(this.progress<100){
      window.setTimeout(()=>{
        this._increaseProgress(doneCallBack);
      },10);
    }
    else{
      doneCallBack();
    }
  }
​
  verDatos(id:number):void{
     this.router.navigate(['/ticket', id ]);
  }  
​
  updateDatos(key):void{
    console.log(key);
    this.datosFirebase.update(key, {estado: 'avanzado'});
  }
​
  removeDatos(key):void{
    console.log(key);
    this.datosFirebase.remove(key);
  }
​
  removeAllTicket():void{
    this.datosFirebase.remove();
  }
}
Claro esto se esta poniendo interesante ( a decir verdad, este componente hasta podria ser "chico" comparado con otros), hay muchas mas funcionalidades en esta porción de código, pero no siempre es necesario tener todo ahi... seguramente mucho lo podriamos abstraer en otro componente... por lo tanto es importante entender lo siguiente:
Los componentes deben cumplir una función única, si tiene mas de una se pueden hacer dos componentes (uno podria ser hijo del otro)
Importante: Este capítulo va a estar siempre en modo WIP (work in progress) ya que angular va a ir avanzado y este capítulo va a estar para esos avances, la idea de este capitulo es que entiendan que apartir de ahora vamos a agregar un monton de funcionalidad que puede estar en un solo componente o entender que podemos utilizar la "atomicidad" y poder reutilizar todos los componentes que realicemos para nuestros desarrollos.

Capítulo 6 - Directivas - Previous

6 - Directivas

Next - Capítulo 8 - Router

8 - Router

Last modified 3yr ago

Copy link