Tweet
Tweet

Slide 1

Slide 1 text

ngGirls

Slide 2

Slide 2 text

ngGirls @AngularGirls

Slide 3

Slide 3 text

ngGirls ng-girls.org

Slide 4

Slide 4 text

ngGirls

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ngGirls

Slide 7

Slide 7 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 8

Slide 8 text

ANGULAR https://angular.io https://github.com/angular/angular Values Apps users love to use Apps developers love to build A community where everyone 
 feels welcome

Slide 9

Slide 9 text

Component-based Architecture

Slide 10

Slide 10 text

E-Store search 4

Slide 11

Slide 11 text

E-Store search 4

Slide 12

Slide 12 text

E-Store search 4

Slide 13

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

Slide 14 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 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Component Template > Controller { } Style {CSS}

Slide 18

Slide 18 text

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

Hi {{ name }}!


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

Slide 19

Slide 19 text

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

Hi {{ name }}!


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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 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 24

Slide 24 text

• ES6 classes • @decorators • dependency injection

Slide 25

Slide 25 text

http://www.typescriptlang.org

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

ngGirls Good Luck & Enjoy!