Angular 2.0 and TypeScript

Jeremy Likness

@JeremyLikness

bit.ly/coderblog

bit.ly/ivisionappdev

Agenda

Tools
TypeScript
Angular "Hello, World"
Advanced Angular

Tools

Build and debug modern web and cloud applications. Code is free and available on your favorite platform - Linux, Mac OSX, and Windows.

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

TypeScript

Types
Interfaces
Classes
Modules
Function Declarations and Lambda Expression with Management of this
Generics
Decorators
Type Libraries (TSD)

Demo: TypeScript

module TypeScriptDemo {
	
	export interface IStyle {
		style: string;
	}
	
	function GetStyle<T extends IStyle>(instance: T): string {
		return instance.style;
	}
	
	export interface IColor extends IStyle {
		red: number;
		green: number;
		blue: number;
	}
	
	let asHex = (t: number) => {
		var result: string = t.toString(16);
		return result.length < 2 ? "0" + result : result;
	}	
	export class Color implements IColor {
		public style: string;
		constructor(public red: number, public green: number, public blue: number) {
			this.style = "#" + asHex(red) + asHex(green) + asHex(blue);
		}
	}
	
	var color = new Color(255, 128, 64); 
	var span = <HTMLSpanElement>document.createElement("span");
	span.innerText = "This is your demo";
	span.style.color = GetStyle(color);
	document.body.appendChild(span);
}

Demo: Angular "Hello, World"

Set up Dependencies

npm init
tsd query node --action install

"scripts": {
    "tsc":"tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start" : "concurrent \"npm run tsc:w\" \"npm run lite\""
  }

"dependencies" : {
      "angular2" : "2.0.0-beta.0",
      "systemjs" : "0.19.6",
      "es6-promise": "^3.0.2",
      "es6-shim": "^0.33.3",
      "reflect-metadata": "0.1.2",
      "rxjs": "5.0.0-beta.0", 
      "zone.js" : "0.5.10"
  },
  "devDependencies": {
      "concurrently" : "^1.0.0",
      "lite-server" : "^1.3.2",
      "typescript" : "^1.7.5"
  }

npm install

Configure TypeScript Compiler

Add tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

Bootstrap HTML

Add index.html

        <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        <script src="node_modules/angular2/bundles/upgrade.dev.js"></script>

         <script>
            System.config({
                packages: {
                    app: {
                        format: "register",
                        defaultExtension: "js"
                    }
                }
            })
            System.import('app/app')
            .then(null, console.error.bind(console));
         </script>

Bootstrap Code and Define Component

Add app.ts

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
    selector: 'my-app',
    template: '<h1>Hello, Angular 2 World!</h1>'
})
export class AppComponent { }

bootstrap(AppComponent);

npm start

Oops!


          <my-app>Angular 2!</my-app>

Advanced Angular Concepts

Templates

Syntax		Description
{{one \| two}}		Binds to property `one` Pipes (filters) through pipe `two`
<input [value]="foo"/> <input bind-value="foo"/>		Binds `input` property `value` to expression `foo`
<input [attr.value]="foo"/>		Binds `input` attribute `value` to expression `foo`
<div [class]="foo"/>		Binds value of `div` property `class` to expression `foo`
<div [class.bar]="foo"/>		Adds or removes class `bar` to or from `div` based on truthyness of expression `foo`
<button (click)="foo($event)"> <button on-click="foo($event)">		Calls method `food` when `click` event is raised and passes the `event` object
<input [(ngModel)]="name"> <input bind-ngModel="name" on-ngModelChange="name=$event">		Sets up two-way data-binding between property `ngModel` and expression `name`
<div *ngFor="#foo of bar"> <template ngFor bind-ngForOf="bar" #foo="$implicit"><div/></template>		Creates a local template for the `ngFor` directive Sets up local variable `foo` based on iterating `bar`
<input #name>		Creates a local variable `name` that references the `input` element

Forms

Implicit

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
   <input type="text" class="form-control" required
      [(ngModel)]="model.foo"
      ngControl="fooCtrl" #fooElement #fooForm="ngForm"/>
   <br>Current: {{fooElement.className}}
   <br>Is Valid: {{fooForm.valid}}
   <button type="submit" [disabled]="!myForm.form.valid">Go!</button>
</form>

ng-touched / ng-untouched
ng-dirty / ng-pristine
ng-valid / ng-invalid

Explicit

this.fooForm = fb.group({
  bar: ['', Validators.required],
});
<form [ngFormModel]="fooForm">
   <input ngControl="bar" type="text" placeholder="Raise the bar">
</form>

Classes

@Component — re-usable component with behavior and UI
@Directive — re-usable behavior, UI may or may not exist
@Pipe — re-usable filter to transform any input to an output
@Injectable — notifies Angular to perform constructor injection of dependencies

Special Method		Description
`constructor`		Handle dependency injection
`ngOnChanges(e)`		Any change to input properties
`ngOnInit`		After constructor and initialization/changes
`ngOnDestroy`		Before instance is destroyed

Example App: Angular 2 Health App

Next Steps

Follow me on Twitter: @JeremyLikness
Read my blog: http://bit.ly/coderblog
Hire our team for training and consulting: http://bit.ly/ivisionappdev
Watch WintellectNOW videos: Use Code LIKNESS-16
Join us same place and time next week for a hands-on lab!