1. Getting Started with Angular 2 and TypeScript Nebraska.Code() 2016 Spencer Schneidenbach Ryvit

2. About Me Platform Architect at Ryvit Consultant Web developer AngularJS 1/2, ASP.NET, C# Twitter: @schneidenbach Github: schneidenbach Email: sas.projects@me.com Website: schneids.net

3. Who are you to tell me? Building SPAs for 4 years Started with Angular 1 and ASP.NET Web API Using Angular 2 in production today

4. Setting the stage Building SPAs (single page apps) has never been easier Lots of framework choices! (yes, I know React is not a framework!)

5. Why Angular 2? Great SPA framework curated by Google Over Angular 1? Simpler Faster Lots of lessons learned from Angular 1 Angular 2 embraces the web

6. Angular 2 + TypeScript = <3 De facto language for Angular 2 Documentation Code examples Great, but not required! In the end, choose the language you’re comfortable with

7. What is TypeScript? A superset of JavaScript created by Microsoft Transpiles into JavaScript Focuses on: Application-scale language which adds type safety Modern features ES6 – classes, arrow functions ES7 – async/await ES?

8. Why TypeScript? Lots of neat features The future of JavaScript, today

9. Why not TypeScript? Yet another layer on top of JavaScript May not be around forever

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

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

12. Variables Same as JavaScript… with a twist! Yes, it’s declared twice – and that’s totally valid Use let instead – it’s safer

13. Interfaces Classes without functionality – just like C#

14. Interfaces, cont’d Won’t let you compile with this type hint if you don’t fulfill the entire contract!

15. More interfaces Duck typing: “If it walks like a duck and quacks like a duck… it’s a duck” This is valid! And good! Respects JavaScript while adding safety

16. Classes Classes can define behaviors AND properties

17. Using classes

18. Constructor/property shorthand Adding an accessibility modifier to a parameter in the constructor automatically converts it to a property

19. Decorators Basically, attributes in C#/VB.NET Considered experimental feature – can only be turned on with compiler option

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

21. Enough TypeScript! Angular 2 Time!

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

23. Angular 1 to 2 - What’s changed? Controllers to components No more $scope ! Yay! Digest loop to unidirectional data flow Native event/property binding Way fewer custom directives Binding directly to DOM properties/events Simplified service model Easier to understand. Flatter learning curve.

24. Angular 1 to 2 – What stayed the same? Template syntax is very similar One-way data binding via interpolation {{ }} Still use directives in the same way Dependency injection is still used Directives and components… kinda

25. Directives Used to modify behavior of DOM elements Here is an attribute directive (from angular.io)

26. Components Components are directives with a template Angular 2 apps are built with components No more $scope, no more controller Functions/properties are bound directly from component

27. Components, cont’d Component scope is much easier to understand No more transclusion, isolate scope, etc. Functions/properties are bound directly from component Lots of smaller components > Fewer big components

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

29. Templates in your component Templates contain the HTML that is rendered by your component Can be placed inline inside of Component declaration OR in a separate file

30. Styling a component You can add CSS directly to a component! DemoDemo

31. Styling a component, cont’d Bind CSS classes to an element like this If message.isUrgent is truthy, then the big-and-bold CSS class will be applied to the element

32. Ways to bind component to template Interpolation expressions Property binding Event binding ngModel

33. Interpolated expressions {{ }} syntax Put your expression inside the brackets Accepts non-side-effect-JavaScript (no new, assignments, etc.) Best use case – bind pure properties to it when possible

34. Property binding Bind directly to properties on the DOM model using [] The power and convenience of this cannot be understated! Allows something like this: To become this:

35. Property binding, cont’d Property binding means that all sorts of previous built-in directives in Angular 1 go away Ng1 DirectiveFunctionalityReplaced with ng-disabledDisables the control – used on inputs, selects, textareas [disabled]=“expression” ng-src/ng-hrefReplacement for src/href properties since interpolation didn’t play well with them [src]=“expression” [href]=“expression” ng-show/ng-hiddenHides/shows an element based on the truthiness of an expression [hidden]=“expression”

36. Event binding Bind directly to events on the DOM model using () Again, the power and convenience cannot be understated Support for custom events

37. Event binding, cont’d Property binding means that all sorts of previous built-in directives in Angular 1 go away Ng1 directiveFunctionalityReplaced with ng-clickBinds an expression to the click event(click)=“doSomething()” ng-changeBinds an expression to the input changed event (change)=“prop = $event” (ngModelChange)=“” ng-dblclickBinds an expression to the double click event(dblclick)=“onDoubleClick()” ng-mouseover…mouse over event ng-mousemove…mouse move event …you get the idea

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

39. Child components A child component is a component that exists within a component I know, pretty stunning right? Steps Easy: you make a component, then… Tell the parent about the component!

40. Step 1: Declare your component

41. Step 2: Import it to your parent component

42. Step 3: Register it with your parent component New @Component property: directives You must register the component’s type with the parent component!

43. Step 4: Add child selector to markup

44. Binding parent to child via @Input properties Means of binding data from the parent to the child Requires two steps Add property to child and decorate it with @Input Bind the parent property to the child using [] syntax

45. Step 1: Add the input property

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

47. Event emitting and @Output Parents can communicate with child components easily via input properties How does the child communicate with its parent? Simple: @Output properties and EventEmitter! A little more to it than @Input properties, but very easy

48. Import and implement

49. Add subscribing function

50. Step 5 – Emit your event

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. Guess what? A service is just a class Are you surprised?

54. Step 1 – Make class with data

55. Step 2 – Import @Injectable and decorate

56. Steps 3 and 4 – Import and register

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

58. There is lots more! angular2.schneids.net All code samples and code exercises from my workshop! Twitter: @schneidenbach Github: schneidenbach Email: sas.projects@me.com Website: schneids.net