getting started with angular 2
TRANSCRIPT
![Page 2: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/2.jpg)
![Page 3: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/3.jpg)
Angular 2
Is Awesome
![Page 4: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/4.jpg)
Still in Alpha
![Page 5: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/5.jpg)
might seem like too much to learn
![Page 6: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/6.jpg)
Angular 2 is Based on:
○ ES6/TypeScript○ Module Loaders○ DOM○ Web Components○ Observables○ ZoneJS○ AngularJS 1.x
![Page 7: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/7.jpg)
Hello Worldhttp://plnkr.co/edit/fHjekGdnscbZGoPhbsE8?p=preview
![Page 8: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/8.jpg)
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
![Page 9: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/9.jpg)
![Page 10: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/10.jpg)
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
![Page 11: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/11.jpg)
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
![Page 12: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/12.jpg)
ComponentsAngular 1.x: http://plnkr.co/edit/fZKUdNpN3k2joBVrXz5r?p=previewAngular 2.0: http://plnkr.co/edit/GA57df9esLI7MyPbyXjb?p=preview
![Page 13: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/13.jpg)
AngularJS 1.x Component: Best Practices
![Page 14: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/14.jpg)
Angular 1 to 2: Component
![Page 15: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/15.jpg)
Angular 1 Components Best Practices
Avoid
● $scope● $scope● $scope● The link function● $parse, $observe, $eval
Use
● Isolated Scope● ControllerAs● BindToController● ES6 classes
![Page 16: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/16.jpg)
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
![Page 17: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/17.jpg)
Observableshttp://plnkr.co/edit/eOh0fJlx1OBsYCXd7uK9?p=preview
![Page 18: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/18.jpg)
Observables● The introduction to Reactive Programming you've been missing● Sample App - angular2-rxjs-chat● Egghead videos - RxJS
![Page 19: Getting Started with Angular 2](https://reader034.vdocuments.mx/reader034/viewer/2022051709/586f8f591a28ab54768b753f/html5/thumbnails/19.jpg)
Angular AMA3:45 - 4:30pm B-SIDE ROOM
Aysegul Yonet Nick Van Weerdenburg Rob McDiarmid