An evening with Angular 2
Download as PPTX, PDF0 likes352 views
This document summarizes a presentation about Angular 2 given by Michael Melusky. The presentation covered introductions to Angular 2, TypeScript, components, data binding, communication between components, routing, directives, pipes and filters, services, and Firebase integration. It provided examples of TypeScript code, Angular components, data binding syntax, using directives like ngIf and ngFor, and creating services to avoid duplicating code between components. The speaker's goal was to give an overview of the core aspects of building applications with Angular 2.
![TypeScriptVariable Declaration
■ foo:string = “hi there”
■ foo:number = 69
■ foo:boolean = false
■ foo:any
■ foo = 42
■ foo:string[]](https://image.slidesharecdn.com/aneveningwithangular2-170118034512/85/An-evening-with-Angular-2-14-320.jpg)
![OneWay Binding
■ Data IntoView
■ string interpolation
■ {{title}} (always resolves to a string)
■ property binding
■ <input [required]='expression'>](https://image.slidesharecdn.com/aneveningwithangular2-170118034512/85/An-evening-with-Angular-2-25-320.jpg)
![TwoWay Binding
■ <input [(ngModel)]='model/object'>
■ updates model in component class
■ updates any reference to model in view/template {{model}}](https://image.slidesharecdn.com/aneveningwithangular2-170118034512/85/An-evening-with-Angular-2-27-320.jpg)
An evening with Angular 2
- 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)
- 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)
- 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
- 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}}
- 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
- 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
- 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
- 41. ThankYou
- 42. Slide Notes ■ Code: – Github.com/mrjavascript ■ Slides: – Slideshare.com/mrjavascript ■ Thank you: – “The Net Ninja” onYouTube for topic arrangements