Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
•
7 likes•1,402 views
Angular 2 is a complete rewrite of the AngularJS framework, which introduces new approaches and leverages the latest technologies. Simplifying and generalizing core concepts, the performance is improved and the range of capabilities is broadened. In this session Shmuela will help you understand the core concepts of Angular 2 apps: the component-based architecture, dependency injection, change detection, and more.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Similar to Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016 (20)
More from Codemotion
More from Codemotion (20)
Recently uploaded
Recently uploaded (20)
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