Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

What it's about An alternative for the big tech meetups where some people get lost. • A safe zone for everyone - 
 feel comfortable to be ‘a beginner’. • Learn by doing - contribute to real projects. • Inspire, share knowledge and experience.

Slide 3

Slide 3 text

Angular 2 Newest technology Built on top of the vast experience and success of Angular 1 Lots of (expected) users Supported by large companies Targets various platforms: web, mobile... Lots of opportunities to contribute Cool and fun!

Slide 4

Slide 4 text

How it works Learn: the experts come to teach you Practice: sit down and code Team up: work together on a project Share: ask and answer questions Contribute: submit pull requests Have fun: do what you enjoy,
 enjoy what you do!

Slide 5

Slide 5 text

Shmuela Jacobs • Nir Kaufman Front-end developers, Angular experts and international speakers. Sharing passion for technology, community and good music. We're here for you!

Slide 6

Slide 6 text

Angular 2 Angular 2.0 workshop pre requirements

Slide 7

Slide 7 text

App Architecture

Slide 8

Slide 8 text

E-Store search 4

Slide 9

Slide 9 text

E-Store search 4

Slide 10

Slide 10 text

E-Store search 4

Slide 11

Slide 11 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 12

Slide 12 text

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

Slide 13

Slide 13 text

Component Template > Controller { } Style {CSS}

Slide 14

Slide 14 text

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

Hi {{name}}!

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

Slide 15

Slide 15 text

In the next sessions...

Slide 16

Slide 16 text

appRoot my-store header search-bar products-list nav-bar product product product product x Component tree ( output ) [ input ]

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 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 ng-conf 2016: https://youtu.be/e3djIqAGqZo

Slide 21

Slide 21 text

Are you ready? cd workshop-angular2-seed npm i git checkout after-hours-workshop-july31 npm start Browse to: http://localhost:3000