Getting Started with Angular 2

Slides: tinyurl.com/ng2-slides

Angular 2

Is Awesome

Still in Alpha

might seem like too much to learn

Angular 2 is Based on:

○ ES6/TypeScript○ Module Loaders○ DOM○ Web Components○ Observables○ ZoneJS○ AngularJS 1.x

Hello Worldhttp://plnkr.co/edit/fHjekGdnscbZGoPhbsE8?p=preview

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

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

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

ComponentsAngular 1.x: http://plnkr.co/edit/fZKUdNpN3k2joBVrXz5r?p=previewAngular 2.0: http://plnkr.co/edit/GA57df9esLI7MyPbyXjb?p=preview

AngularJS 1.x Component: Best Practices

Angular 1 to 2: Component

Angular 1 Components Best Practices

Avoid

● $scope● $scope● $scope● The link function● $parse, $observe, $eval

Use

● Isolated Scope● ControllerAs● BindToController● ES6 classes

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

Observableshttp://plnkr.co/edit/eOh0fJlx1OBsYCXd7uK9?p=preview

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

Angular AMA3:45 - 4:30pm B-SIDE ROOM

Aysegul Yonet Nick Van Weerdenburg Rob McDiarmid

Rob McDiarmid@robianmcd