Tweet
Tweet

Slide 1

Slide 1 text

Angular 2 Shmuela Jacobs 500Tech

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

/user/AngularJSIL www.meetup.com/AngularJS-IL

Slide 5

Slide 5 text

http://www.meetup.com/Angular-AfterHours

Slide 6

Slide 6 text

ReactNext 2016 September 15 Dan Panorama, Tel Aviv http://react-next.com

Slide 7

Slide 7 text

Angular 2 https://angular.io https://github.com/angular/angular

Slide 8

Slide 8 text

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?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

JavaScript + Types TypeScript ES6 (ES-2015) JavaScript (ES5) • type checking
 string, number, boolean, any, Array • custom types - interfaces • code help - intellisense • decorators • and more... Typescript: Angular 2's Secret Weapon - Dan Wahlin

Slide 11

Slide 11 text


 
 
 
 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

Slide 12

Slide 12 text

interface Animal {
 age: number,
 children: Array,
 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

Slide 13

Slide 13 text

http://www.typescriptlang.org

Slide 14

Slide 14 text

Setting up the environment http://www.disneyclips.com/

Slide 15

Slide 15 text

https://cli.angular.io option #1 Learn Clingon - Mike Brocchi

Slide 16

Slide 16 text

https://github.com/angular/angular2-seed option #2

Slide 17

Slide 17 text

App Architecture

Slide 18

Slide 18 text

E-Store search 4

Slide 19

Slide 19 text

E-Store search 4

Slide 20

Slide 20 text

E-Store search 4

Slide 21

Slide 21 text

E-Store search 4 
 E-Store
 
 
 
 4 
 
 
 


 
 search





    

  • 
 


    Product Title

    
 
     

  • ...
    • 




 appRoot my-store header search-bar products-list nav-bar product product product product x

Slide 22

Slide 22 text

appRoot my-store header search-bar products-list nav-bar product product product product x Component Tree

Slide 23

Slide 23 text

Component Template > Controller { } Style {CSS}

Slide 24

Slide 24 text

Component Template > Controller { } Directive { } Component > + { } Service { } Style {CSS} Hi Angular 2!

Hi {{ name }}!


name = 'Angular 2'; h1 { color: red }

Slide 25

Slide 25 text

Component Template > Controller { } Directive { } Component > + { } Service { } Style {CSS}

Hi {{ name }}!


name = 'Angular 2'; h1 { color: red } Pipe { | } | uppercase
 Hi ANGULAR 2!

Slide 26

Slide 26 text

appRoot my-store header search-bar products-list nav-bar product product product product x Inputs & Outputs ( output ) [ input ] Add to Cart


Slide 27

Slide 27 text

Built-in Directives

Slide 28

Slide 28 text

ng-if *ngIf

{{ product.title }}
 - Love it! 


Slide 29

Slide 29 text

ng-show / ng-hide [hidden]

{{ product.title }}
 - Love it! 


Slide 30

Slide 30 text


 ng-repeat *ngFor

Slide 31

Slide 31 text

ng-model [(ngModel)]

{{ product.title }}

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Submit Template reference variables

Slide 34

Slide 34 text

appRoot my-store header search-bar products-list nav-bar product product product product x Change Detection product name changed

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide Services

Slide 37

Slide 37 text

appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide provide Services

Slide 38

Slide 38 text

appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide Services product service

Slide 39

Slide 39 text

appRoot my-store header search-bar products-list nav-bar product product product product x Routing

Slide 40

Slide 40 text

E-Store search 4 https://mystore.com/products

Slide 41

Slide 41 text

E-Store search 4 https://mystore.com/product/8

Slide 42

Slide 42 text

appRoot my-store header search-bar products-list nav-bar product product product product x Routing Router

Slide 43

Slide 43 text

ngModule Angular Module Components Directives Pipes Services ngModules

Slide 44

Slide 44 text

Live Coding!

Slide 45

Slide 45 text

Shmuela Jacobs shmuela@500tech.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ