Download to read offline
![TypeScriptVariable Declaration
■ foo:string = “hi there”
■ foo:number = 69
■ foo:boolean = false
■ foo:any
■ foo = 42
■ foo:string[]](https://image.slidesharecdn.com/anafternoonwithangular2-170226234910/85/An-afternoon-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/anafternoonwithangular2-170226234910/85/An-afternoon-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/anafternoonwithangular2-170226234910/85/An-afternoon-with-angular-2-27-320.jpg)
![TypeScriptVariable Declaration
■ foo:string = “hi there”
■ foo:number = 69
■ foo:boolean = false
■ foo:any
■ foo = 42
■ foo:string[]](https://image.slidesharecdn.com/anafternoonwithangular2-170226234910/75/An-afternoon-with-angular-2-14-2048.jpg)
![OneWay Binding
■ Data IntoView
■ string interpolation
■ {{title}} (always resolves to a string)
■ property binding
■ <input [required]='expression'>](https://image.slidesharecdn.com/anafternoonwithangular2-170226234910/75/An-afternoon-with-angular-2-25-2048.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/anafternoonwithangular2-170226234910/75/An-afternoon-with-angular-2-27-2048.jpg)
Uploaded byMike Melusky
An afternoon with angular 2
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, services, and integrating Firebase. It provided overviews and examples of key Angular 2 concepts like components, data binding, dependency injection, and services. It also explained how to set up an Angular 2 project using the Angular CLI and TypeScript basics.
More Related Content
Similar to An afternoon with angular 2
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
An afternoon with angular 2
- 1. AN AFTERNOON WITH ANGULAR2 Michael Melusky - @mrjavascript Philly.NET Code Camp 2017.1 February 25, 2017
- 2. About Speaker ■ MichaelMelusky – 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 toAngular 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.
- 5. What is Angular2? ■ 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.
- 7. Pre-requisites ■ NPM (nodepackage manager) ■ HTML5/CSS3 ■ JavaScript /TypeScript
- 8.
- 9. Node.js ■ To verifyNode installation: – node – v
- 10. Angular CLI ■ Tocreate anAngular 2 application: – Install the Angular 2 CLI: ■ npm install –g angular-cli ■ ng new <app-name>
- 11.
- 12. TypeScript Basics ■ Similarto JavaScript (strict-superset) – Open source language developed by Microsoft ■ Adds static types ■ Adds class-based object-oriented programming
- 13. TypeScript Basics ■ InJavaScript: – 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 ■ classPlanet { – moons:number = 50 – orbit { ■ console.log(“rotating around the sun”) – } ■ } ■ pluto:Planet = new Planet()
- 16. TypeScript Constructor ■ classPlanet { – moons:number; – constructor(numMoons:number) { ■ this.moons = numMoons; – } ■ } ■ pluto:Planet = new Planet(1)
- 17.
- 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.
- 20.
- 21. ng-content Directive ■ Implementtransclusion in Angular 2 ■ Taking content from a text node or HTML ■ Injecting it into a template at an entry point
- 22.
- 23. Angular 2 DataBinding ■ Bind from Component toTemplate ■ Bind fromTemplate to Component
- 24.
- 25. OneWay Binding ■ DataIntoView ■ 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.
- 29. @Input Directive ■ Senddata from the app to the home components (as example) ■ Custom property binding
- 30. @Output Directive ■ ReceiveEvents occurring in Home Component in App Component ■ Custom Event Binding
- 31.
- 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.
- 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.
- 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.
- 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.
- 40.
- 41.
- 42. Slide Notes ■ Code: –Github.com/mrjavascript ■ Slides: – Slideshare.com/mrjavascript ■ Thank you: – “The Net Ninja” onYouTube for topic arrangements