ngGirls slides - intro to Angular

Slides used in ngGirls workshops. Intro to ngGirls and to Angular. Component-based Architecture, Typescript.

Transcript

1. ngGirls
2. ngGirls @AngularGirls
3. ngGirls ng-girls.org
4. ngGirls
6. ngGirls
7. ANGULAR https://angular.io https://github.com/angular/angular • framework platform • web, mobile web • native mobile, desktop, 
 Arduino... • cutting edge • performance, 
 productivity, versatility
8. 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
9. Component-based Architecture
10. E-Store search 4
11. E-Store search 4
12. E-Store search 4
13. 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> app my-store header search-bar product-list nav-bar product product product product x
14. 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> app my-store header search-bar product-list nav-bar product product product product x
15. app my-store header search-bar product-list nav-bar product product product product x Component Tree
16. appModule: ngModule app my-store header search-bar product-list nav-bar product product product product x Component Tree
17. Component Template </> Controller { } Style {CSS}
18. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} Hi Angular! <h1> Hi {{ name }}!
 </h1> name = 'Angular'; h1 { color: red }
19. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} Hi Angular! <h1> Hi {{ name }}!
 </h1> name = 'Angular'; h1 { color: red } Pipe {{ | }} | uppercase
 Hi ANGULAR!
20. app my-store header search-bar product-list nav-bar product product product product x Communication Between Components ( output ) [ input ] shopping cart service inject
23. 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...
24. • ES6 classes • @decorators • dependency injection
25. http://www.typescriptlang.org
27. ngGirls Good Luck & Enjoy!