angular 2 release final
TRANSCRIPT
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 : [email protected]
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