Getting Started with Angular 2
12 likes•12,731 views
The document provides an overview of Angular 2, highlighting its foundational technologies such as ES6, TypeScript, and Observables. It mentions various resources for learning Angular 2, including examples and documentation, and contrasts the practices in Angular 1.x with those in Angular 2. Key topics covered include template syntax, components, and shadow DOM strategies.
Getting Started with Angular 2
- 1. Getting Started with Angular 2 Slides: tinyurl.com/ng2-slides
- 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
- 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
- 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