Iniciando con Angular

Vitmar Aliaga (@cruzjhonson)

Vitmar Aliaga

@cruzjhonson

Systems Engineer / Frontend Developer

Vitmar Aliaga (@cruzjhonson)

Empecemos

Vitmar Aliaga (@cruzjhonson)

Install

Instalar

$ npm -v

$ node -v

Vitmar Aliaga (@cruzjhonson)

Angular Command Line Interface

Vitmar Aliaga (@cruzjhonson)

Crear un proyecto

$ ng new lamb-aplicacion --routing true --prefix lamb

$ ng new lamb-aplicacion

Vitmar Aliaga (@cruzjhonson)

Arquitectura detrás de Angular

Vitmar Aliaga (@cruzjhonson)

Decorador

Vitmar Aliaga (@cruzjhonson)

Crear un módulo

$ ng generate module home --routing true

Vitmar Aliaga (@cruzjhonson)

Crear un componente

$ ng generate componente home/home

Vitmar Aliaga (@cruzjhonson)

Cuatro formas de data binding

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'lamb-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public saluda = 'Hola Chicos de Lamb';
  public apps: string = []

  constructor() { }

  ngOnInit() {
    this.apps.push('LAMB')
    this.apps.push('ERP')
    this.apps.push('PATMOS')
  }
   
  seleccionarTodo() {
    console.log('selecionaste todo!')
  }

}

<div>{{ saluda }}</div>
<apps-lista [apps]="apps"></apps-lista>
<div (click)="seleccionarTodo()"></div>

* Interpolación.

* Property binding.

* Event binding.

* Two-way binding

{{ saluda }}

[apps]="apps"

(click)="seleccionarTodo()"

<input [(ngModel)]="nameApp">

Vitmar Aliaga (@cruzjhonson)

Componente

Vitmar Aliaga (@cruzjhonson)

Componente

Vitmar Aliaga (@cruzjhonson)

Property binding

Vitmar Aliaga (@cruzjhonson)

Crear un servicio

$ ng generate service home/shared/home

Vitmar Aliaga (@cruzjhonson)

Inyección de dependencia

constructor(private service: HeroService) { }

providers: [
  BackendService,
  HeroService,
  Logger
],

Vitmar Aliaga (@cruzjhonson)

Inyección de dependencia

Vitmar Aliaga (@cruzjhonson)

Crea un directiva

ng g directive my-new-directive

* Directivas estructurales.

* Directivas de Atributo

<div *ngFor="let todo of todos"></div>
<todo-detail *ngIf="selectedTodo"></todo-detail>

<div [ngStyle]="setStyles()"></div>

Vitmar Aliaga (@cruzjhonson)

Crear una clase

$ ng generate class payment/share/voucher

Arquitectura

Vitmar Aliaga (@cruzjhonson)

https://angular.io/guide/architecture

Demo 🎉

Vitmar Aliaga (@cruzjhonson)

Es todo!

Preguntas?

Github: http://github.com/valiaga

Slides : h ttp://slides.com/vitmaraliaga