Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
7 likes1,411 views
The document provides an overview of Angular 2, focusing on its framework capabilities for web and mobile applications, along with components like TypeScript, change detection, and dependency injection. It includes foundational information on component architecture, stateful and stateless components, property and event binding, and Angular modules. Additionally, best practices for organizing applications and utilizing features such as routing and change detection strategies are discussed.
![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:](https://image.slidesharecdn.com/5iggik1bq1nrhk9mtzqs-signature-ac4d76cd8d3c3fe5514277e8f4652481914a804ba35c8624b52c92245310a4e2-poli-161201105708/85/Understanding-Angular-2-Shmuela-Jacobs-Codemotion-Milan-2016-23-320.jpg)
![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();
}](https://image.slidesharecdn.com/5iggik1bq1nrhk9mtzqs-signature-ac4d76cd8d3c3fe5514277e8f4652481914a804ba35c8624b52c92245310a4e2-poli-161201105708/85/Understanding-Angular-2-Shmuela-Jacobs-Codemotion-Milan-2016-24-320.jpg)
![Property & Event Binding
<input [value]="defaultInput"
[style]="getInputStyle()"
(keyup.enter)="submit($event)"/>
<button (click)="clickHandler()">
Click Me!
</button>](https://image.slidesharecdn.com/5iggik1bq1nrhk9mtzqs-signature-ac4d76cd8d3c3fe5514277e8f4652481914a804ba35c8624b52c92245310a4e2-poli-161201105708/85/Understanding-Angular-2-Shmuela-Jacobs-Codemotion-Milan-2016-25-320.jpg)
![ngModel
<h1>{{ product.title }}</h1>
<input [(ngModel)]="product.title">
Inputs & Outputs
Hello!
Hello!](https://image.slidesharecdn.com/5iggik1bq1nrhk9mtzqs-signature-ac4d76cd8d3c3fe5514277e8f4652481914a804ba35c8624b52c92245310a4e2-poli-161201105708/85/Understanding-Angular-2-Shmuela-Jacobs-Codemotion-Milan-2016-26-320.jpg)
![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">](https://image.slidesharecdn.com/5iggik1bq1nrhk9mtzqs-signature-ac4d76cd8d3c3fe5514277e8f4652481914a804ba35c8624b52c92245310a4e2-poli-161201105708/85/Understanding-Angular-2-Shmuela-Jacobs-Codemotion-Milan-2016-32-320.jpg)
![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">](https://image.slidesharecdn.com/5iggik1bq1nrhk9mtzqs-signature-ac4d76cd8d3c3fe5514277e8f4652481914a804ba35c8624b52c92245310a4e2-poli-161201105708/85/Understanding-Angular-2-Shmuela-Jacobs-Codemotion-Milan-2016-33-320.jpg)
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
- 1. Understanding Angular 2 Shmuela Jacobs MILAN 25-26 NOVEMBER 2016
- 2. Shmuela Jacobs - BSc in Physics, MSc in IM - Owns a deaf dog and a one-eyed cat - organizer Developer & Consultant @ 500Tech
- 4. ANGULAR 2 https://angular.io https://github.com/angular/angular • framework platform • web, mobile web • native mobile, desktop, Arduino... • cutting edge • performance, productivity, versatility
- 5. ✓ the language: TypeScript ✓ component architecture ✓ component types ✓ change detection ✓ NgModule ✓ dependency injection ✓ rendering architecture Understanding Angular 2
- 7. 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...
- 8. • ES6 classes • @decorators • dependency injection
- 11. E-Store search 4
- 12. E-Store search 4
- 13. 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
- 14. app my-storeheader search-bar product-list nav-bar product product product product x Component Tree
- 16. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} Hi Angular 2! <h1> Hi {{ name }}! </h1> name = 'Angular 2'; h1 { color: red }
- 17. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} <h1> Hi {{ name }}! </h1> name = 'Angular 2'; h1 { color: red } Pipe {{ | }} | uppercase Hi ANGULAR 2!
- 18. 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
- 19. Component Types Stateful components Stateless components Routed components
- 20. Stateful Component Container Component Smart Component
- 21. app my-storeheader search-bar product-list nav-bar product product product Products Service product-view inject Stateful Component this.products = this.productsService.getProducts();
- 22. Stateless Component Presentational Component Dumb Component
- 23. 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:
- 24. 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(); }
- 25. Property & Event Binding <input [value]="defaultInput" [style]="getInputStyle()" (keyup.enter)="submit($event)"/> <button (click)="clickHandler()"> Click Me! </button>
- 26. ngModel <h1>{{ product.title }}</h1> <input [(ngModel)]="product.title"> Inputs & Outputs Hello! Hello!
- 30. app my-storeheader search-bar product-list nav-bar product product product product-view Routing <router-outlet></router-outlet> RouterModule
- 31. Change Detection Zones browser events setTimeout(), setInterval() Ajax requests and more...
- 32. 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">
- 33. 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">
- 34. Angular Modules Help organize an application into cohesive blocks of functionality
- 35. AppModule: NgModule CartModule app my-storeheader search-bar product-list nav-bar product shopping cart Component Tree ProductModule FormModule shopping cart service
- 37. NgModule Angular Module - Feature Module Components Directives Pipes Services NgModules Imports Components Directives Pipes Declarations Providers
- 38. NgModule Angular Module - Feature Module Components Directives Pipes Services NgModules Imports Exports NgModules Components Directives Pipes Declarations Providers
- 39. NgModule Angular Module - Root Module Components Directives Pipes Services NgModules Imports Components Directives Pipes Declarations Providers Bootstrap
- 40. appModule: NgModule CartModule app my-storeheader search-bar product-list nav-bar product shopping cart Component Tree ProductModule FormModule shopping cart service
- 41. Dependency Injection Manages instances of services and injects the desired instance to the component
- 42. app my-storeheader search-bar products-list nav-bar product product product shopping cart service product x inject provide CartModule Dependency Injection AppModule import
- 43. Rendering Architecture Separation of application logic from the graphical aspects of the application
- 45. ANGULAR 2 https://angular.io https://github.com/angular/angular • framework platform • web, mobile web • native mobile, desktop, Arduino... • cutting edge • performance, productivity, versatility