FITC events. For digital creators. Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca Getting Started with Angular 2 with Rob McDiarmid OVERVIEW Angular 2 is a powerful framework that lets you create fast and scalable web apps with clean and readable code. With the lessons learned from previous web frameworks and the advantages of modern web technologies, the Angular team has created a framework that will push the limits of what SPAs are capable of. In this session we’ll go through building an Angular 2.0 app from the ground up. In the process, you will learn how it handles core concepts like components, templates, services, and routing. You’ll also see how angular takes advantage of ES6 modules, Web Components, and TypeScript. By the end of the session, you’ll have a good understanding of why you might want to use Angular 2 for your next project and how to get started. OBJECTIVE Demonstrate what Angular 2 has to offer and reduce the barrier to entry. TARGET AUDIENCE Web Developers interested in learning Angular 2. ASSUMED AUDIENCE KNOWLEDGE Intermediate experience with JavaScript. FIVE THINGS AUDIENCE MEMBERS WILL LEARN 1. Core concepts of the Angular 2 framework 2. How to use ES6 modules 3. The benefits of TypeScript annotations 4. How to setup an Angular 2 project from scratch 5. The ecosystem of tools that Angular 2 apps will be built on

1. Getting Started with
Angular 2
Slides: tinyurl.com/ng2-slides

3. Angular 2
Is Awesome

4. Still in Alpha

5. might seem like too
much to learn

6. Angular 2 is Based on:
○ ES6/TypeScript
○ Module Loaders
○ DOM
○ Web Components
○ Observables
○ ZoneJS
○ AngularJS 1.x

7. Hello World
http://plnkr.co/edit/fHjekGdnscbZGoPhbsE8?p=preview

8. Angular 2 Resources
● Example: Quickstart
● Example: Hello World - Plunker
● Example: angular-2-samples
● Example: ng2-movies
● Docs: API Reference
● Docs: Changelog
● Docs: Milestones
● Docs: Weekly Meeting Notes
● Blog: Thoughtram
● Blog: Victor Savkin

10. Template Syntax / DOM
● No more jqLite
● No more ng-click, ng-mousedown, ng-blur, etc.
● No more ng-show, ng-hide, ng-disabled, etc.
● Relies directly on the DOM

11. ES6/TypeScript - Resources
● ES6 Feature overview
● Egghead ES6 videos
● Thoughtram - dependency-injection-in-angular-2
● TypeScript Deep Dive
● Victor Savkin - writing-angular-2-in-typescript
● TypeScript Tutorial

12. Components
Angular 1.x: http://plnkr.co/edit/fZKUdNpN3k2joBVrXz5r?p=preview
Angular 2.0: http://plnkr.co/edit/GA57df9esLI7MyPbyXjb?p=preview

13. AngularJS 1.x Component: Best Practices

14. Angular 1 to 2: Component

15. Angular 1 Components Best Practices
Avoid
● $scope
● $scope
● $scope
● The link function
● $parse, $observe, $eval
Use
● Isolated Scope
● ControllerAs
● BindToController
● ES6 classes

16. Shadow DOM - Resources
● ng-conf: Creating Container Components
● Thoughtram - styling-angular-2-components
● Thoughtram - shadow-dom-strategies-in-angular2
● webcomponents.org - introduction-to-shadow-dom
● html5rocks - Shadowdom Tutorial

17. Observables
http://plnkr.co/edit/eOh0fJlx1OBsYCXd7uK9?p=preview

18. Observables
● The introduction to Reactive Programming you've been missing
● Sample App - angular2-rxjs-chat
● Egghead videos - RxJS

19. Angular AMA
3:45 - 4:30pm B-SIDE ROOM
Aysegul Yonet Nick Van Weerdenburg Rob McDiarmid

20. Rob McDiarmid
@robianmcd