Tweet
Tweet

Slide 1

Slide 1 text

NIGHTS ANGULAR www.meetup.com/Angular-Nights

Slide 2

Slide 2 text

Shmuela Jacobs Front-end Developer, Consultant & Trainer [email protected] shmool @ShmuelaJ ng-girls.org

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ANGULAR https://angular.io https://github.com/angular/angular • framework platform • web, mobile web • native mobile, desktop, 
 Arduino... • cutting edge • performance, 
 productivity, versatility

Slide 5

Slide 5 text

E-Store search 4

Slide 6

Slide 6 text

E-Store search 4

Slide 7

Slide 7 text

E-Store search 4 
 E-Store
 
 
 
 4 
 
 
 


 
 search





    

  • 
 


    Product Title

    
 
     

  • ...
    • 




 app my-store header search-bar product-list nav-bar product product product product x

Slide 8

Slide 8 text

appModule: ngModule app my-store header search-bar product-list nav-bar product product product product x Component Tree

Slide 9

Slide 9 text

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

Hi {{ name }}!


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

Slide 10

Slide 10 text

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

Hi {{ name }}!


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

Slide 11

Slide 11 text

app my-store header search-bar product-list nav-bar product product product product x Stateless Components ( output ) [ input ] shopping cart service inject

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 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...

Slide 14

Slide 14 text

• ES6 classes • @decorators • dependency injection

Slide 15

Slide 15 text

http://www.typescriptlang.org

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Shmuela Jacobs [email protected] shmool @ShmuelaJ 6JCPM;QW ng-girls.org