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 and TypeScript

2,319 views

Published on

The web world has become increasingly more complex over the past few years. The demand for fast, fluid single page applications (or SPAs) has gone up, along with the seemingly endless number of frameworks used to build them. The most popular among them, Angular 1, took the SPA world by storm seven years ago. Since then, it’s been adopted by many developers and firms looking to build rich, feature-fill applications for the web, mobile, and beyond.

Angular 2 looks to continue that trend with a library that is more performant, lighter, and easier to use. In this session, we’ll learn about components, directives, services, and dependency injection, as well as the new Angular 2 syntax. We’ll also learn about TypeScript, Microsoft’s open source superset of JavaScript that enables fast, fluid, fun, and safe development. Learn about some of the features of TypeScript that enable us to rapidly develop and easily maintain Angular 2 applications with ease, including classes, decorators, and compile-time type checking.

Published in: Software
  • Be the first to comment

Getting Started with Angular 2 and TypeScript

  1. 1. Getting Started with Angular 2 and TypeScript Spencer Schneidenbach Ryvit/GadellNet @schneidenbach
  2. 2. About Me Platform Architect at Ryvit Consultant Microsoft MVP schneids.net @schneidenbach
  3. 3. Setting the stage (yes, I know React is not a framework!)
  4. 4. Why Angular 2?
  5. 5. Why TypeScript?
  6. 6. <3
  7. 7. Main reason why TypeScript is great • “TypeScript doesn’t try to NOT be JavaScript – it just tries to make JavaScript better” –Me
  8. 8. So, let’s go over some TypeScript basics!
  9. 9. Interfaces
  10. 10. Interfaces
  11. 11. Interfaces “If it walks like a duck and quacks like a duck… it’s a duck”
  12. 12. Classes
  13. 13. Using classes
  14. 14. Constructor/property shorthand
  15. 15. Decorators • Like attributes in C#/VB.NET
  16. 16. import/export • Like using statements in C#/VB.NET • import statements allow us to reference code from other TypeScript files • export simply means public
  17. 17. Enough TypeScript! Angular 2 Time!
  18. 18. History lesson • Angular 1 – started in 2009 • Hugely popular – won the initial “SPA war”
  19. 19. Enter Angular 2
  20. 20. Let’s jump right in!
  21. 21. Modules
  22. 22. Contrived example Accounting Accounts Payable Accounts Receivable Payroll IT Systems support Development Customers Sales Account management Support
  23. 23. Running your app • Import your root NgModule • Bootstrap it!
  24. 24. Components
  25. 25. Declaring a component • Create your class • Import the Component decorator • Add a template and a selector
  26. 26. Templates in your component @Component({ selector: 'my-app', template: '<h1>This is some HTML</h1>' }) export class AppComponent {}
  27. 27. Styling a component • You can add CSS directly to a component! Demo
  28. 28. Components Favor many smaller components over fewer bigger ones.
  29. 29. ngModelEvent binding Property bindingInterpolation expressions Binding component to template
  30. 30. Interpolated expressions
  31. 31. Property binding
  32. 32. Property binding • Property binding means that all sorts of previous built-in directives in Angular 1 go away Ng1 Directive Functionality Replaced with ng-disabled Disables the control – used on inputs, selects, textareas [disabled]=“expression” ng-src/ng-href Replacement for src/href properties since interpolation didn’t play well with them [src]=“expression” [href]=“expression” ng-show/ng-hidden Hides/shows an element based on the truthiness of an expression [hidden]=“expression”
  33. 33. Event binding • Bind directly to events on the DOM model using ()
  34. 34. Event binding, cont’d • Property binding means that all sorts of previous built-in directives in Angular 1 go away Ng1 directive Functionality Replaced with ng-click Binds an expression to the click event (click)=“doSomething()” ng-change Binds an expression to the input changed event (change)=“prop = $event” (ngModelChange)=“” ng-dblclick Binds an expression to the double click event (dblclick)=“onDoubleClick()” ng-mouseover …mouse over event ng-mousemove …mouse move event …you get the idea
  35. 35. ngModel • Allows two-way binding • Follows unidirectional data flow concepts • Demo
  36. 36. Child components • A child component is a component that exists within a component • I know, pretty crazy right?
  37. 37. Step 1: Declare your component
  38. 38. Step 2: Import it to your containing module import { ChildComponent } from "./child.component"; @NgModule({ declarations: [AppComponent] }) export class AppModule { }
  39. 39. Step 3: Register import { ChildComponent } from "./child.component"; @NgModule({ declarations: [AppComponent, ChildComponent] }) export class AppModule { }
  40. 40. Step 4: Add child selector to markup
  41. 41. But how do components talk?? Inputs and Outputs
  42. 42. Let’s start with inputs
  43. 43. Step 1: Add the input property
  44. 44. Step 2: Bind the parent property to that property
  45. 45. Now Outputs and EventEmitter
  46. 46. Import and implement
  47. 47. Add subscribing function
  48. 48. Emit your event
  49. 49. Don’t mutate data in child components.
  50. 50. What are Services? • Services are best used to create, read, update and delete data • Enforces separation of concerns • Think of it like this: you don’t want your database in your view!
  51. 51. Services in Angular 1 • In Angular 1, we had 5 different kinds of services: • Provider • Service • Factory • Value • Constants • In Angular 2, we have 1 kind of service: • Service • Which do you prefer?
  52. 52. Step 1 – Make class with data
  53. 53. Step 2 – Import @Injectable and decorate
  54. 54. Steps 3 and 4 – Import and register
  55. 55. Step 5 – Add as property and to constructor
  56. 56. Services Components should know who can do something for them, not how to do it.
  57. 57. Things we couldn’t cover • Pipes • Forms • Routing • Http service • RxJS • So much more!
  58. 58. Thank you! Slides at angular2.schneids.net schneids.net @schneidenbach

×