Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016

943 views

Published on

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.

Published in: Technology
  • Be the first to comment

Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016

  1. 1. Understanding Angular 2 Shmuela Jacobs MILAN 25-26 NOVEMBER 2016
  2. 2. Shmuela Jacobs - BSc in Physics, MSc in IM - Owns a deaf dog 
 and a one-eyed cat - organizer Developer & Consultant @ 500Tech
  3. 3. ngGirls ng-girls.org
  4. 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. 5. ✓ the language: TypeScript ✓ component architecture ✓ component types ✓ change detection ✓ NgModule ✓ dependency injection ✓ rendering architecture Understanding Angular 2
  6. 6. 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...
  7. 7. • ES6 classes • @decorators • dependency injection
  8. 8. http://www.typescriptlang.org
  9. 9. Component Architecture
  10. 10. E-Store search 4
  11. 11. E-Store search 4
  12. 12. 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
  13. 13. app my-storeheader search-bar product-list nav-bar product product product product x Component Tree
  14. 14. Component Template </> Controller { } Style {CSS}
  15. 15. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} Hi Angular 2! <h1> Hi {{ name }}!
 </h1> name = 'Angular 2'; h1 { color: red }
  16. 16. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} <h1> Hi {{ name }}!
 </h1> name = 'Angular 2'; h1 { color: red } Pipe {{ | }} | uppercase
 Hi ANGULAR 2!
  17. 17. 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
  18. 18. Component Types Stateful components Stateless components Routed components
  19. 19. Stateful 
 Component Container Component Smart Component
  20. 20. app my-storeheader search-bar product-list nav-bar product product product Products Service product-view inject Stateful Component this.products = this.productsService.getProducts();
  21. 21. Stateless 
 Component Presentational Component Dumb Component
  22. 22. 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:
  23. 23. 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(); }

  24. 24. Property & Event Binding <input [value]="defaultInput" [style]="getInputStyle()" (keyup.enter)="submit($event)"/> <button (click)="clickHandler()"> Click Me! </button>
  25. 25. ngModel <h1>{{ product.title }}</h1> <input [(ngModel)]="product.title"> Inputs & Outputs Hello! Hello!
  26. 26. Routed 
 Component View Component
  27. 27. E-Store search 4 https://mystore.com/products
  28. 28. E-Store search 4 https://mystore.com/product/8
  29. 29. app my-storeheader search-bar product-list nav-bar product product product product-view Routing <router-outlet></router-outlet> RouterModule
  30. 30. Change Detection Zones browser events setTimeout(), setInterval() Ajax requests and more...
  31. 31. 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">
  32. 32. 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">
  33. 33. Angular
 Modules Help organize an application into cohesive blocks of functionality
  34. 34. AppModule: NgModule CartModule app my-storeheader search-bar product-list nav-bar product shopping cart Component Tree ProductModule FormModule shopping cart service
  35. 35. NgModule Angular Module Components Directives Pipes Services NgModules
  36. 36. NgModule Angular Module - Feature Module Components Directives Pipes Services NgModules Imports Components Directives Pipes Declarations Providers
  37. 37. NgModule Angular Module - Feature Module Components Directives Pipes Services NgModules Imports Exports NgModules Components Directives Pipes Declarations Providers
  38. 38. NgModule Angular Module - Root Module Components Directives Pipes Services NgModules Imports Components Directives Pipes Declarations Providers Bootstrap
  39. 39. appModule: NgModule CartModule app my-storeheader search-bar product-list nav-bar product shopping cart Component Tree ProductModule FormModule shopping cart service
  40. 40. Dependency Injection Manages instances of services and injects the desired instance to the component
  41. 41. app my-storeheader search-bar products-list nav-bar product product product shopping cart service product x inject provide CartModule Dependency Injection AppModule import
  42. 42. Rendering Architecture Separation of application logic from the graphical aspects 
 of the application
  43. 43. Application Renderer Render Directives Dependency Injection Change Detection Elements/ Text EventsProperties
  44. 44. ANGULAR 2 https://angular.io https://github.com/angular/angular • framework platform • web, mobile web • native mobile, desktop, 
 Arduino... • cutting edge • performance, 
 productivity, versatility
  45. 45. Shmuela Jacobs shmuelaj@gmail.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ ng-girls.org

×