Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting Started with Angular 2

12,168 views

Published on

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

Published in: Internet
  • Dating for everyone is here: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/39pMlLF ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Getting Started with Angular 2

  1. 1. Getting Started with Angular 2 Slides: tinyurl.com/ng2-slides
  2. 2. Angular 2 Is Awesome
  3. 3. Still in Alpha
  4. 4. might seem like too much to learn
  5. 5. Angular 2 is Based on: ○ ES6/TypeScript ○ Module Loaders ○ DOM ○ Web Components ○ Observables ○ ZoneJS ○ AngularJS 1.x
  6. 6. Hello World http://plnkr.co/edit/fHjekGdnscbZGoPhbsE8?p=preview
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. Components Angular 1.x: http://plnkr.co/edit/fZKUdNpN3k2joBVrXz5r?p=preview Angular 2.0: http://plnkr.co/edit/GA57df9esLI7MyPbyXjb?p=preview
  11. 11. AngularJS 1.x Component: Best Practices
  12. 12. Angular 1 to 2: Component
  13. 13. Angular 1 Components Best Practices Avoid ● $scope ● $scope ● $scope ● The link function ● $parse, $observe, $eval Use ● Isolated Scope ● ControllerAs ● BindToController ● ES6 classes
  14. 14. 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
  15. 15. Observables http://plnkr.co/edit/eOh0fJlx1OBsYCXd7uK9?p=preview
  16. 16. Observables ● The introduction to Reactive Programming you've been missing ● Sample App - angular2-rxjs-chat ● Egghead videos - RxJS
  17. 17. Angular AMA 3:45 - 4:30pm B-SIDE ROOM Aysegul Yonet Nick Van Weerdenburg Rob McDiarmid
  18. 18. Rob McDiarmid @robianmcd

×