Angular 2 - Release FinalPor Andrés Ciceri

Temas a tratar...

● Angular 2 y su evolución.● NgModule, Router, Directivas & Pipes.● Demo.● Conclusiones & recomendaciones.

Quien soy?

HUGO ANDRES ESCOBAR CICERI

Ing. Telemático

U. ICESI

Cargo:

Leader Frontend Developer

Empresa:

APES

En Curso:

Maestría Ing. Software - Uniandes.

Contacto:

Mail : andresciceri@gmail.com

Github: andresciceri

Twitter: @CiceriDev

Site : andresciceri.co (Coming Soon)

Angular 2

Angular 2 - Evolución

Tomado de: https://angularjs.blogspot.com.co

Angular 1 - Routing

Angular 2 - Que nos ofrece...

Components

Views

Models

Services

Router

Templates Styles

Interfaces

Directives Pipes

NgModule

Angular 1 vs Angular 2

Angular 1 vs Angular 2

Angular 2 - NgModule

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { HttpModule } from '@angular/http';import { routing } from './app.routing';import { AppComponent } from './app.component';import { StoresComponent } from './stores/stores.component';

@NgModule({ declarations: [ AppComponent, StoresComponent, ], imports: [ BrowserModule, FormsModule, HttpModule, routing ], providers: [], bootstrap: [AppComponent]})export class AppModule { }

Angular 2 - Definición Componente

import { Component } from '@angular/core';import { Router } from '@angular/router';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'app works!';}

@Router

Angular 2 - Router

import { ModuleWithProviders } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { StoresComponent } from './stores/stores.component';import { StoreDetailComponent } from './store-detail/store-detail.component';import { ProductsComponent } from './products/products.component';import { ProductDetailComponent } from './product-detail/product-detail.component';

const appRoutes: Routes = [ { path: '', component: StoresComponent }, {path: 'store-detail/:id', component: StoreDetailComponent }, {path: 'products', component: ProductsComponent }, {path: 'product-detail/:id', component: ProductDetailComponent }];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

@Pipes

Angular 2 - Pipes

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exponentialStrength'})export class ExponentialStrengthPipe implements PipeTransform { transform(value: number, exponent: string): number { let exp = parseFloat(exponent); return Math.pow(value, isNaN(exp) ? 1 : exp); }}

Tomado de: angular.io

@Directives

Angular 2 - Directives

import { Directive, ElementRef, Input, Renderer } from '@angular/core';@Directive({ selector: '[myHighlight]' })export class HighlightDirective { constructor(el: ElementRef, renderer: Renderer) { renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow'); }}

Tomado de: angular.io

Demo...

Conclusiones

Velocidad en desarrollo

Abstracción

Aislamiento

Organización y legibilidad del código

Experiencia de usuario

@Gracias