Intro to Angular 2

Angular 2 basics introduction:
- setup
- app architecture
- component
- inputs and outputs
- built in directives
- change detection
- services
- routing

Presented in front of IDF soldiers of the intelligence department.

Transcript

1. Angular 2 Shmuela Jacobs 500Tech
2. Shmuela Jacobs - BSc in Physics, MSc in IM - Owns a deaf dog 
 and a one-eyed cat - Got here with her classic VW Sr. Web Developer @ 500Tech
4. /user/AngularJSIL www.meetup.com/AngularJS-IL
5. http://www.meetup.com/Angular-AfterHours
6. ReactNext 2016 September 15 Dan Panorama, Tel Aviv http://react-next.com
7. Angular 2 https://angular.io https://github.com/angular/angular
8. Angular 2 Newest technology Built on top of the vast experience and success of Angular 1 Fast, robust Lots of (expected) users Supported by large companies Targets various platforms: web, mobile... Simple, clean, fun! -why?
10. 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... Typescript: Angular 2's Secret Weapon - Dan Wahlin
11. 
 
 
 
 class Dog { age = 0;
 children = [];
 
 talk(times: number) {
 const bark = 'Ruff! ';
 return bark.repeat(times);
 }
 }
 
 let Ziggi = new Dog();
 console.log(Ziggi.talk(3)); TypeScript + tooling
12. interface Animal {
 age: number,
 children: Array<Animal>,
 talk(times: number): string
 } class Dog implements Animal { age = 0;
 children = [];
 
 talk(times: number) {
 const bark = 'Ruff! ';
 return bark.repeat(times);
 }
 }
 
 let Ziggi = new Dog();
 console.log(Ziggi.talk(3)); TypeScript + tooling
13. http://www.typescriptlang.org
14. Setting up the environment http://www.disneyclips.com/
15. https://cli.angular.io option #1 Learn Clingon - Mike Brocchi
16. https://github.com/angular/angular2-seed option #2
17. App Architecture
18. E-Store search 4
19. E-Store search 4
20. E-Store search 4
21. 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> appRoot my-store header search-bar products-list nav-bar product product product product x
22. appRoot my-store header search-bar products-list nav-bar product product product product x Component Tree
23. Component Template </> Controller { } Style {CSS}
24. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} Hi Angular 2! <h1> Hi {{ name }}!
 </h1> name = 'Angular 2'; h1 { color: red }
25. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} <h1> Hi {{ name }}!
 </h1> name = 'Angular 2'; h1 { color: red } Pipe { | } | uppercase
 Hi ANGULAR 2!
26. appRoot my-store header search-bar products-list nav-bar product product product product x Inputs & Outputs <sj-product [product]="productToDisplay" (addToCart)="addProductToCart($event)"> </sj-product> ( output ) [ input ] <button (click)="..."> Add to Cart
 </button> <img [style.opacity]="...">
27. Built-in Directives
28. ng-if *ngIf <h1>{{ product.title }}
 <span *ngIf="product.starred"> - Love it! </span>
 </h1>
29. ng-show / ng-hide [hidden] <h1>{{ product.title }}
 <span [hidden]="!product.starred"> - Love it! </span>
 </h1>
30. <product *ngFor="let productToDisplay of products"
 [product]="productToDisplay">
 </product> ng-repeat *ngFor
31. ng-model [(ngModel)] <h1>{{ product.title }}</h1> <input [(ngModel)]="product.title">
32. More built-in directives ng-class [ngClass] ng-style [ngStyle] ng-switch *ngSwitch ng-switch-when *ngSwitchWhen ng-switch-default *ngSwitchDefault form form (QTOUCTGCYJQNG PQVJGTUWDLGEV
33. <input #titleInput (keydown.enter)="submit(titleInput.value)"> <button (click)="submit(titleInput.value)"> Submit </button> Template reference variables
34. appRoot my-store header search-bar products-list nav-bar product product product product x Change Detection product name changed <QPGLU
35. appRoot my-store header search-bar products-list nav-bar product product product product x Change Detection product name changed using OnPush change detection strategy product list changed using immutable Objects
36. appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide Services
37. appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide provide Services
38. appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide Services product service
39. appRoot my-store header search-bar products-list nav-bar product product product product x Routing
40. E-Store search 4 https://mystore.com/products
41. E-Store search 4 https://mystore.com/product/8
42. appRoot my-store header search-bar products-list nav-bar product product product product x Routing Router <router-outlet></router-outlet>
43. ngModule Angular Module Components Directives Pipes Services ngModules
44. Live Coding!
45. Shmuela Jacobs shmuela@500tech.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ