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.

1. Getting Started with Angular
2 and TypeScript
Spencer Schneidenbach
Ryvit/GadellNet
@schneidenbach

2. About Me
Platform Architect at Ryvit
Consultant
Microsoft MVP
schneids.net
@schneidenbach

4. Setting the stage
(yes, I know React is not a
framework!)

5. Why Angular 2?

6. Why TypeScript?

7. <3

8. Main reason why TypeScript is great
• “TypeScript doesn’t try to NOT be JavaScript – it just tries to make
JavaScript better”
–Me

9. So, let’s go over some TypeScript basics!

10. Interfaces

11. Interfaces

12. Interfaces
“If it walks like a duck and quacks like a duck… it’s a duck”

13. Classes

14. Using classes

15. Constructor/property shorthand

16. Decorators
• Like attributes in C#/VB.NET

17. import/export
• Like using statements in C#/VB.NET
• import statements allow us to reference code from other TypeScript
files
• export simply means public

18. Enough TypeScript! Angular 2 Time!

19. History lesson
• Angular 1 – started in 2009
• Hugely popular – won the initial “SPA war”

20. Enter Angular 2

21. Let’s jump right in!

22. Modules

23. Contrived example
Accounting
Accounts Payable
Accounts Receivable
Payroll
IT
Systems support
Development
Customers
Sales
Account management
Support

24. Running your app
• Import your root NgModule
• Bootstrap it!

25. Components

26. Declaring a component
• Create your class
• Import the Component decorator
• Add a template and a selector

27. Templates in your component
@Component({
selector: 'my-app',
template: '<h1>This is some HTML</h1>'
})
export class AppComponent {}

28. Styling a component
• You can add CSS directly to a component! Demo

29. Components
Favor many smaller components over
fewer bigger ones.

30. ngModelEvent binding
Property bindingInterpolation expressions
Binding component to template

31. Interpolated expressions

32. Property binding

33. 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”

34. Event binding
• Bind directly to events on the DOM model using ()

35. 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

36. ngModel
• Allows two-way binding
• Follows unidirectional data flow concepts
• Demo

37. Child components
• A child component is a component that exists within a component
• I know, pretty crazy right?

38. Step 1: Declare your component

39. Step 2: Import it to your containing module
import { ChildComponent } from "./child.component";
@NgModule({
declarations: [AppComponent]
})
export class AppModule {
}

40. Step 3: Register
import { ChildComponent } from "./child.component";
@NgModule({
declarations: [AppComponent, ChildComponent]
})
export class AppModule {
}

41. Step 4: Add child selector to markup

42. But how do components talk??
Inputs and Outputs

43. Let’s start with inputs

44. Step 1: Add the input property

45. Step 2: Bind the parent property to that property

46. Now Outputs and EventEmitter

47. Import and implement

48. Add subscribing function

49. Emit your event

50. Don’t mutate data in child components.

51. 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!

52. 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?

53. Step 1 – Make class with data

54. Step 2 – Import @Injectable and decorate

55. Steps 3 and 4 – Import and register

56. Step 5 – Add as property and to constructor

57. Services
Components should know who can do
something for them, not how to do it.

58. Things we couldn’t cover
• Pipes
• Forms
• Routing
• Http service
• RxJS
• So much more!

59. Thank you!
Slides at angular2.schneids.net
schneids.net
@schneidenbach