Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016

Understanding Angular 2 Shmuela Jacobs MILAN 25-26 NOVEMBER 2016

Shmuela Jacobs - BSc in Physics, MSc in IM - Owns a deaf dog   and a one-eyed cat - organizer Developer & Consultant @ 500Tech

ANGULAR 2 https://angular.io https://github.com/angular/angular • framework platform • web, mobile web • native mobile, desktop,   Arduino... • cutting edge • performance,   productivity, versatility

✓ the language: TypeScript ✓ component architecture ✓ component types ✓ change detection ✓ NgModule ✓ dependency injection ✓ rendering architecture Understanding Angular 2

JavaScript + Types TypeScript ES6 (ES-2015) JavaScript (ES5) • type checking  string, number, boolean, any, Array<T> • custom types - interfaces • code help - intellisense • decorators • and more...

• ES6 classes • @decorators • dependency injection

E-Store search 4 <header>  <a href="home.html">E-Store</a>  </header>  <aside>  <a href="cart.html">  4 <img src="cart.jpg">  </a>  </aside>  <main>  <div>  <input type="text">  <button>search</button>  </div>  <div id="products">  <ul>  <li>  <a href="product1.html">  <h3>Product Title</h3>  <img src="product.jpg">  </a>  </li> <li>...</li>  </ul>  </div>  </main> app my-storeheader search-bar product-list nav-bar product product product product x

app my-storeheader search-bar product-list nav-bar product product product product x Component Tree

Component Template </> Controller { } Style {CSS}

Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} Hi Angular 2! <h1> Hi {{ name }}!  </h1> name = 'Angular 2'; h1 { color: red }

Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} <h1> Hi {{ name }}!  </h1> name = 'Angular 2'; h1 { color: red } Pipe {{ | }} | uppercase  Hi ANGULAR 2!

Component import { Component } from '@angular/core';    @Component({  selector: 'app-hello',  template: `  <h1>{{ title }}</h1>`  })    export class HelloComponent { title = 'Hello World!'; }  <app-hello></app-hello> Somewhere in your app

Component Types Stateful components Stateless components Routed components

Stateful   Component Container Component Smart Component

app my-storeheader search-bar product-list nav-bar product product product Products Service product-view inject Stateful Component this.products = this.productsService.getProducts();

Stateless   Component Presentational Component Dumb Component

app my-storeheader search-bar product-list nav-bar product product product product-view Stateless Components <app-product-list [productList]="products" (addToCart)="addProductToCart($event)"> </app-product-list> ( output ) [ input ] this.products Products Service inject In my-store template:

Component import { Component, EventEmitter } from '@angular/core';    @Component({  selector: 'app-product-list',  template: `  <app-product *ngFor="let item of productList" [product]="item"> </app-product>`  })    export class ProductListComponent {   @Input() productList:string = '';   @Output() addToCart:EventEmitter<any> = new EventEmitter(); }

Property & Event Binding <input [value]="defaultInput" [style]="getInputStyle()" (keyup.enter)="submit($event)"/> <button (click)="clickHandler()"> Click Me! </button>

ngModel <h1>{{ product.title }}</h1> <input [(ngModel)]="product.title"> Inputs & Outputs Hello! Hello!

Routed   Component View Component

E-Store search 4 https://mystore.com/products

E-Store search 4 https://mystore.com/product/8

app my-storeheader search-bar product-list nav-bar product product product product-view Routing <router-outlet></router-outlet> RouterModule

Change Detection Zones browser events setTimeout(), setInterval() Ajax requests and more...

app my-storeheader search-bar products-list nav-bar product product product product x Change Detection <input (keyup.enter)="search($event.target.value)"> <app-product-list [list]="searchProductList">

app my-storeheader search-bar products-list nav-bar product product product product x Change Detection using OnPush change detection strategy product list changed using immutable Objects <input (keyup.enter)="search($event.target.value)"> <app-product-list [list]="searchProductList">

Angular  Modules Help organize an application into cohesive blocks of functionality

AppModule: NgModule CartModule app my-storeheader search-bar product-list nav-bar product shopping cart Component Tree ProductModule FormModule shopping cart service

NgModule Angular Module Components Directives Pipes Services NgModules

NgModule Angular Module - Feature Module Components Directives Pipes Services NgModules Imports Components Directives Pipes Declarations Providers

NgModule Angular Module - Feature Module Components Directives Pipes Services NgModules Imports Exports NgModules Components Directives Pipes Declarations Providers

NgModule Angular Module - Root Module Components Directives Pipes Services NgModules Imports Components Directives Pipes Declarations Providers Bootstrap

appModule: NgModule CartModule app my-storeheader search-bar product-list nav-bar product shopping cart Component Tree ProductModule FormModule shopping cart service

Dependency Injection Manages instances of services and injects the desired instance to the component

app my-storeheader search-bar products-list nav-bar product product product shopping cart service product x inject provide CartModule Dependency Injection AppModule import

Rendering Architecture Separation of application logic from the graphical aspects   of the application

Application Renderer Render Directives Dependency Injection Change Detection Elements/ Text EventsProperties

Shmuela Jacobs shmuelaj@gmail.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ ng-girls.org

Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016

More Related Content

What's hot

Viewers also liked

Similar to Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016

More from Codemotion

Recently uploaded

Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016