Upload
mike-melusky
View
228
Download
0
Embed Size (px)
Citation preview
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