Download - An evening with Angular 2
![Page 1: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/1.jpg)
AN EVENING WITH ANGULAR 2
Michael Melusky - @mrjavascriptCentral Penn .NET User Group
January 17, 2017
![Page 2: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/2.jpg)
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 ???
![Page 3: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/3.jpg)
Topics
■ Introduction to Angular 2 ■ TypeScript■ Angular Components■ Data Binding
– One Way (View -> Component and Component -> View)– Two Way
■ Passing Data Between Components■ Routing■ Directives■ Pipes and Filters■ Services and HTTP Service■ Firebase Integration
![Page 4: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/4.jpg)
Angular 2
![Page 5: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/5.jpg)
What is Angular 2?
■ JavaScript framework for creating dynamic web applications■ Component Based (unlike MVC)
– Significantly different an Angular 1.x■ Uses TypeScript■ From Google, “Superheroic JavaScript MVW Framework!”
![Page 6: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/6.jpg)
MVW ????
![Page 7: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/7.jpg)
Pre-requisites
■ NPM (node package manager)■ HTML5/CSS3■ JavaScript / TypeScript
![Page 8: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/8.jpg)
Node.js
![Page 9: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/9.jpg)
Node.js
■ To verify Node installation:– node – v
![Page 10: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/10.jpg)
Angular CLI
■ To create an Angular 2 application:– Install the Angular 2 CLI:
■ npm install –g angular-cli■ ng new <app-name>
![Page 11: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/11.jpg)
TypeScript
![Page 12: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/12.jpg)
TypeScript Basics
■ Similar to JavaScript (strict-superset) – Open source language developed by Microsoft
■ Adds static types■ Adds class-based object-oriented programming
![Page 13: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/13.jpg)
TypeScript Basics
■ In JavaScript:– foo = “my string”– foo = 25
■ Not allowed in TypeScript:– foo = “my string”– foo = 25
![Page 14: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/14.jpg)
TypeScript Variable Declaration
■ foo:string = “hi there”
■ foo:number = 69
■ foo:boolean = false
■ foo:any
■ foo = 42
■ foo:string[]
![Page 15: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/15.jpg)
TypeScript Classes
■ class Planet {– moons:number = 50– orbit {
■ console.log(“rotating around the sun”)– }
■ }
■ pluto:Planet = new Planet()
![Page 16: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/16.jpg)
TypeScript Constructor
■ class Planet {– moons:number;– constructor(numMoons:number) {
■ this.moons = numMoons;– }
■ }
■ pluto:Planet = new Planet(1)
![Page 17: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/17.jpg)
Angular 2 Components
![Page 18: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/18.jpg)
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)
![Page 19: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/19.jpg)
Angular Components
![Page 20: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/20.jpg)
Angular Components
![Page 21: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/21.jpg)
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
![Page 22: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/22.jpg)
Data Binding
![Page 23: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/23.jpg)
Angular 2 Data Binding
■ Bind from Component to Template■ Bind from Template to Component
![Page 24: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/24.jpg)
Angular Data Binding
![Page 25: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/25.jpg)
One Way Binding
■ Data Into View
■ string interpolation■ {{title}} (always resolves to a string)
■ property binding■ <input [required]='expression'>
![Page 26: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/26.jpg)
One Way Data Binding
■ Data Out of View
■ event binding■ <button (click)='expression/function'>
■ component class can handle the event
![Page 27: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/27.jpg)
Two Way Binding
■ <input [(ngModel)]='model/object'>
■ updates model in component class■ updates any reference to model in view/template {{model}}
![Page 28: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/28.jpg)
Communication Between Components
![Page 29: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/29.jpg)
@Input Directive
■ Send data from the app to the home components (as example)■ Custom property binding
![Page 30: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/30.jpg)
@Output Directive
■ Receive Events occurring in Home Component in App Component■ Custom Event Binding
![Page 31: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/31.jpg)
Angular 2 Routing
![Page 32: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/32.jpg)
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
![Page 33: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/33.jpg)
Angular 2 Directives
![Page 34: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/34.jpg)
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)
![Page 35: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/35.jpg)
Angular 2 Pipes
![Page 36: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/36.jpg)
Angular 2 Pipes
■ - Used to be filters in Angular 1.x■ - e.g. {{name | uppercase}}■ - e.g. {{name | slice:1}}■■ - Filter pipe not in Angular 2■ Can create custom pipes however!
![Page 37: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/37.jpg)
Services
![Page 38: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/38.jpg)
Services
■ Don’t Repeat Yourself!
■ Component 1:– Does some stuff– Connects to the database
■ Component 2– Does a few things– Connects to the database’
![Page 39: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/39.jpg)
Firebase
![Page 40: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/40.jpg)
Firebase
■ Google product
![Page 41: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/41.jpg)
Thank You
![Page 42: An evening with Angular 2](https://reader035.vdocuments.us/reader035/viewer/2022070600/58ec85491a28ab810d8b46a9/html5/thumbnails/42.jpg)
Slide Notes
■ Code:– Github.com/mrjavascript
■ Slides:– Slideshare.com/mrjavascript
■ Thank you:– “The Net Ninja” on YouTube for topic arrangements