understanding angular 2 - shmuela jacobs - codemotion milan 2016
TRANSCRIPT
Understanding Angular 2Shmuela 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
Component Architecture
E-Store
search
4
E-Store
search
4
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
ComponentTemplate
</>
Controller{ }
Style {CSS}
ComponentTemplate
</>
Controller{ }
Directive { }
Component</> + { }
Service{ }
Style {CSS}
Hi Angular 2!
<h1> Hi {{ name }}! </h1>
name = 'Angular 2';
h1 { color: red}
ComponentTemplate
</>
Controller{ }
Directive { }
Component</> + { }
Service{ }
Style {CSS}
<h1> Hi {{ name }}! </h1>
name = 'Angular 2';
h1 { color: red}
Pipe{{ | }}
| uppercase
Hi ANGULAR 2!
Componentimport { 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 TypesStateful 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 Serviceinject
In my-store template:
Componentimport { 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 ComponentView 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
Zonesbrowser 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 Detectionusing OnPush
change detection strategy
product list changed
using immutable Objects
<input (keyup.enter)="search($event.target.value)">
<app-product-list [list]="searchProductList">
AngularModules
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
RendererRender
DirectivesDependency Injection
ChangeDetection
Elements/ TextEventsProperties
ANGULAR 2
https://angular.io https://github.com/angular/angular
• framework platform • web, mobile web • native mobile, desktop,
Arduino... • cutting edge • performance,
productivity, versatility
Shmuela Jacobs
linkedin.com/in/shmuelaj
github.com/shmool
@ShmuelaJ
ng-girls.org