Upload
mike-melusky
View
128
Download
0
Embed Size (px)
Citation preview
AN EVENING WITH ANGULAR 2
Michael Melusky - @mrjavascriptCentral Penn .NET User Group
January 17, 2017
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 ???
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
Angular 2
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!”
MVW ????
Pre-requisites
■ NPM (node package manager)■ HTML5/CSS3■ JavaScript / TypeScript
Node.js
Node.js
■ To verify Node installation:– node – v
Angular CLI
■ To create an Angular 2 application:– Install the Angular 2 CLI:
■ npm install –g angular-cli■ ng new <app-name>
TypeScript
TypeScript Basics
■ Similar to JavaScript (strict-superset) – Open source language developed by Microsoft
■ Adds static types■ Adds class-based object-oriented programming
TypeScript Basics
■ In JavaScript:– foo = “my string”– foo = 25
■ Not allowed in TypeScript:– foo = “my string”– foo = 25
TypeScript Variable Declaration
■ foo:string = “hi there”
■ foo:number = 69
■ foo:boolean = false
■ foo:any
■ foo = 42
■ foo:string[]
TypeScript Classes
■ class Planet {– moons:number = 50– orbit {
■ console.log(“rotating around the sun”)– }
■ }
■ pluto:Planet = new Planet()
TypeScript Constructor
■ class Planet {– moons:number;– constructor(numMoons:number) {
■ this.moons = numMoons;– }
■ }
■ pluto:Planet = new Planet(1)
Angular 2 Components
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)
Angular Components
Angular Components
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
Data Binding
Angular 2 Data Binding
■ Bind from Component to Template■ Bind from Template to Component
Angular Data Binding
One Way Binding
■ Data Into View
■ string interpolation■ {{title}} (always resolves to a string)
■ property binding■ <input [required]='expression'>
One Way Data Binding
■ Data Out of View
■ event binding■ <button (click)='expression/function'>
■ component class can handle the event
Two Way Binding
■ <input [(ngModel)]='model/object'>
■ updates model in component class■ updates any reference to model in view/template {{model}}
Communication Between Components
@Input Directive
■ Send data from the app to the home components (as example)■ Custom property binding
@Output Directive
■ Receive Events occurring in Home Component in App Component■ Custom Event Binding
Angular 2 Routing
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
Angular 2 Directives
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)
Angular 2 Pipes
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!
Services
Services
■ Don’t Repeat Yourself!
■ Component 1:– Does some stuff– Connects to the database
■ Component 2– Does a few things– Connects to the database’
Firebase
Firebase
■ Google product
Thank You
Slide Notes
■ Code:– Github.com/mrjavascript
■ Slides:– Slideshare.com/mrjavascript
■ Thank you:– “The Net Ninja” on YouTube for topic arrangements