Angular AfterHours - Angular 2 Beginners Workshop

Short intro to Angular 2 architecture and main features, given at Angular AfterHours event: http://www.meetup.com/Angular-AfterHours/

Transcript

1. http://www.meetup.com/Angular-AfterHours
2. 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.
3. 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!
4. 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!
5. 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!
6. Angular 2 Angular 2.0 workshop pre requirements
7. App Architecture
8. E-Store search 4
9. E-Store search 4
10. E-Store search 4
11. 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
12. appRoot my-store header search-bar products-list nav-bar product product product product x Component tree
13. Component Template </> Controller { } Style {CSS}
14. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} Hi Angular AfterHours! <h1> Hi {{name}}! </h1> name = 'Angular AfterHours'; h1 { color: red }
15. In the next sessions...
16. appRoot my-store header search-bar products-list nav-bar product product product product x Component tree <product [product]="productToDisplay" (addToCart)="addProductToCart($event)"> </product> ( output ) [ input ]
17. appRoot my-store header search-bar products-list nav-bar product product product product x Change Detection product name changed
18. appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide product service Services
20. 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 ng-conf 2016: https://youtu.be/e3djIqAGqZo
21. Are you ready? cd workshop-angular2-seed npm i git checkout after-hours-workshop-july31 npm start Browse to: http://localhost:3000