AN AFTERNOON WITH ANGULAR 2

Michael Melusky - @mrjavascriptPhilly.NET Code Camp 2017.1

February 25, 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