Slide deck from the 01/17/2017 Central Penn .NET user group meeting.

1. AN EVENINGWITH
ANGULAR 2
Michael Melusky - @mrjavascript
Central Penn .NET User Group
January 17, 2017

2. About Speaker
■ Michael Melusky
– Software Engineer for Audacious Inquiry in Baltimore MD
– Computer Science Professor
■ Penn State University
■ Franklin and Marshall College
– Hopeful 2017 Microsoft MVP ???

3. Topics
■ Introduction to Angular 2
■ TypeScript
■ Angular Components
■ Data Binding
– OneWay (View ->Component andComponent ->View)
– TwoWay
■ Passing Data Between Components
■ Routing
■ Directives
■ Pipes and Filters
■ Services and HTTP Service
■ Firebase Integration

4. Angular 2

5. What is Angular 2?
■ JavaScript framework for creating dynamic web applications
■ Component Based (unlike MVC)
– Significantly different an Angular 1.x
■ UsesTypeScript
■ From Google, “Superheroic JavaScript MVW Framework!”

6. MVW ????

7. Pre-requisites
■ NPM (node package manager)
■ HTML5/CSS3
■ JavaScript /TypeScript

8. Node.js

9. Node.js
■ To verify Node installation:
– node – v

10. Angular CLI
■ To create anAngular 2 application:
– Install the Angular 2 CLI:
■ npm install –g angular-cli
■ ng new <app-name>

11. TypeScript

12. TypeScript Basics
■ Similar to JavaScript (strict-superset)
– Open source language developed by Microsoft
■ Adds static types
■ Adds class-based object-oriented programming

13. TypeScript Basics
■ In JavaScript:
– foo = “my string”
– foo = 25
■ Not allowed inTypeScript:
– foo = “my string”
– foo = 25

14. TypeScriptVariable Declaration
■ foo:string = “hi there”
■ foo:number = 69
■ foo:boolean = false
■ foo:any
■ foo = 42
■ foo:string[]

15. TypeScript Classes
■ class Planet {
– moons:number = 50
– orbit {
■ console.log(“rotating around the sun”)
– }
■ }
■ pluto:Planet = new Planet()

16. TypeScript Constructor
■ class Planet {
– moons:number;
– constructor(numMoons:number) {
■ this.moons = numMoons;
– }
■ }
■ pluto:Planet = new Planet(1)

17. Angular 2 Components

18. Angular 2 Components
■ The main way to build elements and specify logic on a page
■ To create a component using the Angular CLI:
– Npm generate component <component-name>
■ A component is one type of an Angular 2 Directive (directives with templates)

19. Angular Components

20. Angular Components

21. ng-content Directive
■ Implement transclusion in Angular 2
■ Taking content from a text node or HTML
■ Injecting it into a template at an entry point

22. Data Binding

23. Angular 2 Data Binding
■ Bind from Component toTemplate
■ Bind fromTemplate to Component

24. Angular Data Binding

25. OneWay Binding
■ Data IntoView
■ string interpolation
■ {{title}} (always resolves to a string)
■ property binding
■ <input [required]='expression'>

26. OneWay Data Binding
■ Data Out ofView
■ event binding
■ <button (click)='expression/function'>
■ component class can handle the event

27. TwoWay Binding
■ <input [(ngModel)]='model/object'>
■ updates model in component class
■ updates any reference to model in view/template {{model}}

28. Communication Between Components

29. @Input Directive
■ Send data from the app to the home components (as example)
■ Custom property binding

30. @Output Directive
■ Receive Events occurring in Home Component in App Component
■ Custom Event Binding

31. Angular 2 Routing

32. Routing
■ For instance:
– /home -> use home component
– /directory -> use directory component
■ To accomplish this:
– Create a route structure
– Tell Angular where to load the view when a route is requested

33. Angular 2 Directives

34. Angular 2 Directives
■ - instructions which tell Angular to do something
■ - e.g. <router-outlet></router-outlet>
■ - Attribute –
– interact with element its sitting on to change its properties (ngClass, ngStyle)
■ - Structural –
– change structure of HTML code (ngif, ngFor)

35. Angular 2 Pipes

36. Angular 2 Pipes
■ - Used to be filters inAngular 1.x
■ - e.g. {{name | uppercase}}
■ - e.g. {{name | slice:1}}
■
■ - Filter pipe not in Angular 2
■ Can create custom pipes however!

37. Services

38. Services
■ Don’t RepeatYourself!
■ Component 1:
– Does some stuff
– Connects to the database
■ Component 2
– Does a few things
– Connects to the database’

39. Firebase

40. Firebase
■ Google product

41. ThankYou

42. Slide Notes
■ Code:
– Github.com/mrjavascript
■ Slides:
– Slideshare.com/mrjavascript
■ Thank you:
– “The Net Ninja” onYouTube for topic arrangements