Angular for Beginners Intro

Intro to the workshop given at Angular Nights meetup: https://www.meetup.com/Angular-Nights/events/242325994/
Angular basics: components, component-based architecture, TypeScript

Transcript

1. NIGHTS ANGULAR www.meetup.com/Angular-Nights
2. Shmuela Jacobs Front-end Developer, Consultant & Trainer shmuela@ng-girls.org shmool @ShmuelaJ ng-girls.org
4. ANGULAR https://angular.io https://github.com/angular/angular • framework platform • web, mobile web • native mobile, desktop, 
 Arduino... • cutting edge • performance, 
 productivity, versatility
5. E-Store search 4
6. E-Store search 4
7. 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
8. appModule: ngModule app my-store header search-bar product-list nav-bar product product product product x Component Tree
9. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} Hi Angular! <h1> Hi {{ name }}!
 </h1> name = 'Angular'; h1 { color: red }
10. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} <h1> Hi {{ name }}!
 </h1> name = 'Angular'; h1 { color: red } Pipe {{ | }} | uppercase Hi ANGULAR!
11. app my-store header search-bar product-list nav-bar product product product product x Stateless Components ( output ) [ input ] shopping cart service inject
13. 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...
14. • ES6 classes • @decorators • dependency injection
15. http://www.typescriptlang.org
17. Shmuela Jacobs shmuela@ng-girls.org shmool @ShmuelaJ 6JCPM;QW ng-girls.org