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