Angular2 for Beginners

Angular 2 for Beginners Oswald Campesato Consultant/Training: www.iquarkt.com ocampesato@yahoo.com

Features of Angular 2 (part 1) • Beta status • component-based architecture • loosely coupled components • less code more application focus • "Mobile First" approach • Angular 2 Github repository: https://github.com/angular.io

Features of Angular 2 (part 2) • Angular 2 can be 5x faster than Angular 1.x • One-way data binding (by default) • Two-way data binding (optional) • Dependency injection • Support for ES5/ES6/TypeScript • Performance comparable to React(?)

Ang1.x features removed from Ang 2 + $scope + factories + controllers + providers + $apply + $digest + many built-in directives

What are Transpilers? • They convert code from one language to another • Babel (formerly 6to5): +converts ES6 (some ES7) to ECMA5 + appears to be the de facto standard • Traceur (Google): + converts ES6 to ECMA5 + used by Angular 2 TypeScript (MicroSoft): http://www.TypeScriptlang.org

Angular 2 App (index.html) <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system. js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2- polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0- beta.0/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-

Angular 2 Support Libraries • 1) ES6 Shim: • shims for older JavaScript engines • for ECMAScript 6 emulation • 2) Angular 2 Polyfills: • code for zones, promises, and reflection • 3) SystemJS: • a module loader • • 4) RxJS: • a library for reactive programming in JS • supports Observables: emit streams of data • Angular uses Observables for asynch code (HTTP requests)

Angular 2 and TypeScript • TypeScript classes (transpiled to ES5) • @ symbol for annotations/decorators • @Component (selector, template, … ) • class MyApp{} (or some other name of your choice) • Bootstrapping the ‘root’ component: bootstrap(MyApp)

Angular 2 Example (app/main.ts) • import {bootstrap} from 'angular2/platform/browser'; • import {Component} from 'angular2/core'; • @Component({ • selector: 'my-app', • template: `<div>Hello from Angular 2</div>` • }) • class MyApp {} • bootstrap(MyApp);

Download/Install Code Samples • 1) download/unzip Github repo (or clone repo) • 2) npm install • 3) python –m SimpleHTTPServer (or equivalent) • 4) go to http://localhost:8000 • Command-line compilation (optional): tsc • Watch for changes (optional): tsc --watch

Add Some Data (app/main.ts) • import {bootstrap} from 'angular2/platform/browser'; • import {Component} from 'angular2/core'; • @Component({ • selector: 'my-app', • template: `<div>{{ city }}</div>` • }) • class MyApp { • city:string; • constructor() { • this.city = ‘New York’; • } • } • bootstrap(MyApp);

Exercise: Add More Data (main.ts) • Add a first name field • Add a last name field • Add a state field • reload the application

ng-repeat vs *ngFor • Angular 1.x "ng-repeat": <ul> <li ng-repeat="user in users"> <h2>{{user}</h2> </li> </ul> • Angular 2 "*ngFor": <ul> <li *ngFor="#user of users"> <h2>{{user}}</h2> </li> </ul>

Display List of Users (app/main.ts) • import {bootstrap} from 'angular2/platform/browser'; • import {Component} from 'angular2/core'; • @Component({ • selector: 'my-app', • template: `<div><ul> • <li *ngFor='user of users'> {{ user }} </li> • </ul></div>` • }) • class MyApp { • users:string[]; // or users:Array<string>; • constructor() { • this.users = ['Jane', 'Dave', 'Tom']; • } • } • bootstrap(MyApp);

Exercise: Display User data with ngFor • Modify the array to support literal objects • Include first name/last name/city properties • Display three properties in an unordered list • reload the application

Angular 2 and Event Objects • <button (click)="clicked($event)"></button> @Component(...) class MyApp { clicked(event) { event.preventDefault(); // do stuff here console.log("you clicked me"); } } bootstrap(MyApp);

Angular 2 Template Syntax • [attribute] syntax: <input [value]="name"> • (method) syntax: <input #myname (keyup)="vm.myCtrlMethod()"> • ^ symbol handles bubble up events: <div (^click)="handleClick()"> <div></div> </div> • [(method)] syntax for two-way binding: <input [(ng-model)]="vm.foo"> <p>Hello {{vm.foo}}</p>

Angular 2 Built-in Components • NgIf • NgSwitch • NgStyle • NgClass • NgFor • NgNonBindable

What about ES6? • Arrow functions and let keyword • Block scopes • Classes and inheritance • Default parameters • Destructured assignment • Generators, Iterators, Maps, and Sets • Promises and Rest parameters • Spread operator • Template Literals

ES6 let and Arrow Functions • let square = x => x * x; • let add = (x, y) => x + y; • let pi = () => 3.1415; • console.log(square(8)); // 64 • console.log(add(5, 9)); // 14 • console.log(pi()); // 3.1415

ES6 Class Definition (part 1) class Rectangle { constructor(height, width) { this.height = height; this.width = width; } calcArea() { return this.height * this.width; } } • var r1 = new Rectangle(5,10); • var r2 = new Rectangle(25,15);

ES6 Class Definition (part 2) • console.log("r1 area = "+r1.calcArea()); • console.log("r2 area = "+r2.calcArea()); • Test this code here: http://babeljs.io/repl/ • More Examples: https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Classes

What is TypeScript? • A superset of JavaScript (ES6): 10/01/2012 • A compiled language (tsc compiler) • strong typing and also type inferencing • Type checking during compile time • "minimal" extra compile time overhead • ".ts" files are transpiled into ".js" files (via tsc) • "lib.d.ts" contains TypeScript definitions • TypeScript type definitions (update via "nuget"): https://github.com/borisyankov/DefinitelyTyped

TypeScript Improvements over ES5 • Types • Classes • Annotations • Imports • language utilities (e.g. destructuring)

Other TypeScript Features • Interfaces • Inheritance • Generics

TypeScript Variables • var isDone: boolean = false; • var height: number = 6; • var name: string = "dave"; • var myList:number[] = [1, 2, 3]; // option #1 • var myList:Array<number> = [1, 2, 3]; // option #2 • var changeMe: any = 4; • changeMe = ”I’m a string now"; • var myList:any[] = [1, true, ”pizza"];

TypeScript Functions • void return type: function myLogger(msg?:string): void { console.log("My custom logger: “+msg); } • Generics: function identity<T>(arg: T): T { return arg; } // output has 'string' type (explicit/inferred): var output = identity<string>("Dave"); var output = identity("Dave");

TypeScript "any" Type • any return type: • function selectSomething(x): any { • if (typeof x == "object") { • return 10; • } else { • return "abc"; • } • } NB: "any" type disables type checking NB: you can disallow implicit "any" in Visual Studio

Functions vs Lambda Expressions • JavaScript Function: var doubleJS = function(x) { return 2*x; } • TypeScript Function: var doubleTS = function(x:number) {return 2*x;} • Lambda versions of the TypeScript function: var lambdaTS = (x:number) => 2*x; var lambdaTS = x => 2*x; Another Lambda function: var x = function(delay:number, () =>void) { // timer code });

TypeScript Interfaces interface User { name: string; weight?: number; // optional } function displayUser(user: User) { console.log(user.name); } • This works even without "weight" in the interface: var aUser = {name: "John Smith", weight:200}; displayUser(aUser);

TypeScript Class (part 1) class User { fname: string; lname: string; constructor(fname:string, lname:string) { this.fname = fname; this.lname = lname; } fullname():string { return this.fname+" "+this.lname; } }

TypeScript Class (part 2) • var u1:User, u2:User; • u1 = new User("Jane", "Smith"); • u2 = new User("John", "Jones"); • console.log("user1 = "+u1.fullname()); • console.log("user2 = "+u2.fullname()); • Exercise: use an interface in class User • Aside: use interfaces as arguments of public methods (whenever possible) instead of using standard JS/TS types or class instances

Convert JSON Data to TS Class (1) • Consider the following array of data: var people = [ {fname:"Jane",lname:"Smith",zip:"94043"}, {fname:"John",lname:"Jones",zip:"94539"}, {fname:"Dave",lname:"Starr",zip:"67800"} ]

Convert JSON Data to TS Class (2) class People { • public fname:string; • public lname:string; • public zip:string; • constructor(public fname:string, • public lname:string, • public zip:string) { • this.fname = fname; • this.lname = lname; • this.zip = zip; • } }

Convert JSON Data to TS Class (3) • Array of TypeScript objects: var TSPeople = [ new People("Jane","Smith","94043"), new People("John","Jones","94539"), new People("Dave","Starr","67800") ];

TypeScript and the this keyword • The this keyword is contextually bound in the same fashion as standard JS functions • The this keyword is lexically bound in Lamba functions so it’s automatically captured (emitted JS uses _this) • Typically based on how the function is called • More information about the this keyword: https://tinyurl.com/MDNthis

Migrating JS "classes" to TypeScript • Option #1: Annotate with an interface: +Interface and impl are synchronized manually +Faster initially and lower risk • Option #2: Refactor as a class: +More initial code changes +More maintainable and semantic http://www.typescriptlang.org/Handbook

What Should I Learn??? • Main features of ES6 and TypeScript 1.6+ • "basic" Angular 1.5+ and 2 (best practices) • Practice converting code from ANG 1.x to 2 • Select an IDE: +WebStorm 10: free 30-day trial ($49/year) +Visual Studio Code (free) + Atom (free) with atom-TypeScript extension • Command Line Tools: + npm, npmjs, gulp, grunt (older), broccoli, + webpack, browserify (older), jspm+systemjs https://github.com/addyosmani/es6-tools

Other Technologies to Learn • Sass/Bootstrap 4 (previous: less) • HandleBars/Nunjucks (previous: Jade/EJS) • Material Design (and MDL) • Firebase/AngularFire • D3.js for Data Visualization • Ionic (=Angular for Mobile)

Browser Status for ES6 • Modern IE: https://goo.gl/56n7IL • Mozilla: https://goo.gl/iSNDf9 • Chrome: https://www.chromestatus.com/features#ES6

Other Useful ES6 Links https://github.com/lukehoban/es6features http://kangax.github.io/compat-table/es6/ https://dev.modern.ie/platform/status/?filter=f3f0000bf&search=es6 https://developer.mozilla.org/en- US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_i n_Mozilla https://medium.com/@bojzi/overview-of-the-javascript-ecosystem- 8ec4a0b7a7be

More Useful Links • Change detection in Angular 2: https://github.com/angular/watchtower.js http://zone.js/ http://victorsavkin.com/post/110170125256/change-detection-in- angular-2 • Angular scaffolding: https://github.com/DaftMonk/generator-angular-fullstack https://github.com/yeoman/generator-angular http://lauterry.github.io/ngTailor/ • Touch animations: https://docs.google.com/document/d/16Z6Lun15DoWNrE2imk7N- 2WiRAaqc954LOfU2-2JSoI/edit#heading=h.rcjxs836qiki

Angular Tutorials • Getting started with Angular 2: https://docs.google.com/document/d/1MkpvTNfmxHwdSv9rQyQIvjR LnoGk4rvkNMkOEWTPkCw/edit#heading=h.6z1yv9f94fuv • Building Angular Apps using Flux: https://docs.google.com/document/d/16axBamHEZORS_KJZDjahLuhk hUuNVt77ZcGRoRiyjfQ/edit New features in Angular 1.4: • https://docs.google.com/document/d/1BkDxdkzB5JmQBgpLKEkGY 92pWF9Xr89cSLltPJVdHC0/edit

Future Work in Angular 2 • Server-side rendering • Web Workers • smooth and responsive UI • Native mobile UI (see Ionic for mobile) • Compile as build step

Recent/Upcoming Books and Training 1) HTML5 Canvas and CSS3 Graphics (2013) 2) jQuery, CSS3, and HTML5 for Mobile (2013) 3) HTML5 Pocket Primer (2013) 4) jQuery Pocket Primer (2013) 5) HTML5 Mobile Pocket Primer (2014) 6) D3 Pocket Primer (2015) 7) Python Pocket Primer (2015) 8) SVG Pocket Primer (2016) 9) CSS3 Pocket Primer (2016) 10) Angular Pocket Primer (2016)

Angular2 for Beginners

More Related Content

What's hot

Similar to Angular2 for Beginners

More from Oswald Campesato

Recently uploaded

Angular2 for Beginners