SlideShare a Scribd company logo
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)

More Related Content

What's hot

Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1
Ahmed Moawad
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 
Angular2
Angular2Angular2
Angular 5
Angular 5Angular 5
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
Yakov Fain
 
Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0 Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0
Sumanth Chinthagunta
 
Angular2 Development for Java developers
Angular2 Development for Java developersAngular2 Development for Java developers
Angular2 Development for Java developers
Yakov Fain
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
Troy Miles
 
Angular 2: What's New?
Angular 2: What's New?Angular 2: What's New?
Angular 2: What's New?
jbandi
 
AngularJs presentation
AngularJs presentation AngularJs presentation
AngularJs presentation
Phan Tuan
 
AngularJS2 / TypeScript / CLI
AngularJS2 / TypeScript / CLIAngularJS2 / TypeScript / CLI
AngularJS2 / TypeScript / CLI
Domenico Rutigliano
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Naveen Pete
 
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Codemotion
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2
Apptension
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular js
Andrew Alpert
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
Keith Bloomfield
 
Data Flow Patterns in Angular 2 - Sebastian Müller
Data Flow Patterns in Angular 2 -  Sebastian MüllerData Flow Patterns in Angular 2 -  Sebastian Müller
Data Flow Patterns in Angular 2 - Sebastian Müller
Sebastian Holstein
 
Angular js
Angular jsAngular js
Angular js
Behind D Walls
 
Angular 2 어디까지 왔을까
Angular 2 어디까지 왔을까Angular 2 어디까지 왔을까
Angular 2 어디까지 왔을까
장현 한
 

What's hot (20)

Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Angular2
Angular2Angular2
Angular2
 
Angular 5
Angular 5Angular 5
Angular 5
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
 
Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0 Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0
 
Angular2 Development for Java developers
Angular2 Development for Java developersAngular2 Development for Java developers
Angular2 Development for Java developers
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
 
Angular 2: What's New?
Angular 2: What's New?Angular 2: What's New?
Angular 2: What's New?
 
AngularJs presentation
AngularJs presentation AngularJs presentation
AngularJs presentation
 
AngularJS2 / TypeScript / CLI
AngularJS2 / TypeScript / CLIAngularJS2 / TypeScript / CLI
AngularJS2 / TypeScript / CLI
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular js
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
Data Flow Patterns in Angular 2 - Sebastian Müller
Data Flow Patterns in Angular 2 -  Sebastian MüllerData Flow Patterns in Angular 2 -  Sebastian Müller
Data Flow Patterns in Angular 2 - Sebastian Müller
 
Angular js
Angular jsAngular js
Angular js
 
Angular 2 어디까지 왔을까
Angular 2 어디까지 왔을까Angular 2 어디까지 왔을까
Angular 2 어디까지 왔을까
 

Similar to Angular2 for Beginners

Angular2 inter3
Angular2 inter3Angular2 inter3
Angular2 inter3
Oswald Campesato
 
TypeScript
TypeScriptTypeScript
TypeScript
Oswald Campesato
 
Swift, functional programming, and the future of Objective-C
Swift, functional programming, and the future of Objective-CSwift, functional programming, and the future of Objective-C
Swift, functional programming, and the future of Objective-C
Alexis Gallagher
 
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & MobileIVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
Amazon Web Services Japan
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
Troy Miles
 
React inter3
React inter3React inter3
React inter3
Oswald Campesato
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
Quinton Sheppard
 
Programming in java basics
Programming in java  basicsProgramming in java  basics
Programming in java basics
LovelitJose
 
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみたスマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
Taro Matsuzawa
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
Troy Miles
 
A la découverte de TypeScript
A la découverte de TypeScriptA la découverte de TypeScript
A la découverte de TypeScript
Denis Voituron
 
ReactJS for Beginners
ReactJS for BeginnersReactJS for Beginners
ReactJS for Beginners
Oswald Campesato
 
A Recovering Java Developer Learns to Go
A Recovering Java Developer Learns to GoA Recovering Java Developer Learns to Go
A Recovering Java Developer Learns to Go
Matt Stine
 
An introduction to scala
An introduction to scalaAn introduction to scala
An introduction to scala
Xing
 
Scala @ TechMeetup Edinburgh
Scala @ TechMeetup EdinburghScala @ TechMeetup Edinburgh
Scala @ TechMeetup Edinburgh
Stuart Roebuck
 
JavaScript in 2016
JavaScript in 2016JavaScript in 2016
JavaScript in 2016
Codemotion
 
JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)
Eduard Tomàs
 
JavaScript in 2015
JavaScript in 2015JavaScript in 2015
JavaScript in 2015
Igor Laborie
 
Java/Scala Lab: Анатолий Кметюк - Scala SubScript: Алгебра для реактивного пр...
Java/Scala Lab: Анатолий Кметюк - Scala SubScript: Алгебра для реактивного пр...Java/Scala Lab: Анатолий Кметюк - Scala SubScript: Алгебра для реактивного пр...
Java/Scala Lab: Анатолий Кметюк - Scala SubScript: Алгебра для реактивного пр...
GeeksLab Odessa
 
Emerging Languages: A Tour of the Horizon
Emerging Languages: A Tour of the HorizonEmerging Languages: A Tour of the Horizon
Emerging Languages: A Tour of the Horizon
Alex Payne
 

Similar to Angular2 for Beginners (20)

Angular2 inter3
Angular2 inter3Angular2 inter3
Angular2 inter3
 
TypeScript
TypeScriptTypeScript
TypeScript
 
Swift, functional programming, and the future of Objective-C
Swift, functional programming, and the future of Objective-CSwift, functional programming, and the future of Objective-C
Swift, functional programming, and the future of Objective-C
 
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & MobileIVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
React inter3
React inter3React inter3
React inter3
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
 
Programming in java basics
Programming in java  basicsProgramming in java  basics
Programming in java basics
 
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみたスマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
スマートフォン勉強会@関東 #11 どう考えてもdisconなものをiPhoneに移植してみた
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
 
A la découverte de TypeScript
A la découverte de TypeScriptA la découverte de TypeScript
A la découverte de TypeScript
 
ReactJS for Beginners
ReactJS for BeginnersReactJS for Beginners
ReactJS for Beginners
 
A Recovering Java Developer Learns to Go
A Recovering Java Developer Learns to GoA Recovering Java Developer Learns to Go
A Recovering Java Developer Learns to Go
 
An introduction to scala
An introduction to scalaAn introduction to scala
An introduction to scala
 
Scala @ TechMeetup Edinburgh
Scala @ TechMeetup EdinburghScala @ TechMeetup Edinburgh
Scala @ TechMeetup Edinburgh
 
JavaScript in 2016
JavaScript in 2016JavaScript in 2016
JavaScript in 2016
 
JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)
 
JavaScript in 2015
JavaScript in 2015JavaScript in 2015
JavaScript in 2015
 
Java/Scala Lab: Анатолий Кметюк - Scala SubScript: Алгебра для реактивного пр...
Java/Scala Lab: Анатолий Кметюк - Scala SubScript: Алгебра для реактивного пр...Java/Scala Lab: Анатолий Кметюк - Scala SubScript: Алгебра для реактивного пр...
Java/Scala Lab: Анатолий Кметюк - Scala SubScript: Алгебра для реактивного пр...
 
Emerging Languages: A Tour of the Horizon
Emerging Languages: A Tour of the HorizonEmerging Languages: A Tour of the Horizon
Emerging Languages: A Tour of the Horizon
 

More from Oswald Campesato

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
Oswald Campesato
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
Oswald Campesato
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
Oswald Campesato
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
Oswald Campesato
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
Oswald Campesato
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
Oswald Campesato
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
Oswald Campesato
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
Oswald Campesato
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
Oswald Campesato
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
Oswald Campesato
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
Oswald Campesato
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
Oswald Campesato
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
Oswald Campesato
 

More from Oswald Campesato (20)

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
 

Recently uploaded

Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging  a  Tech AgencyPreparing Non - Technical Founders for Engaging  a  Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
ISH Technologies
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
safelyiotech
 
Fundamentals of Programming and Language Processors
Fundamentals of Programming and Language ProcessorsFundamentals of Programming and Language Processors
Fundamentals of Programming and Language Processors
Rakesh Kumar R
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
ToXSL Technologies
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
kalichargn70th171
 
Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !
Marcin Chrost
 
Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
Remote DBA Services
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
ICS
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
mz5nrf0n
 
YAML crash COURSE how to write yaml file for adding configuring details
YAML crash COURSE how to write yaml file for adding configuring detailsYAML crash COURSE how to write yaml file for adding configuring details
YAML crash COURSE how to write yaml file for adding configuring details
NishanthaBulumulla1
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
Green Software Development
 
SQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure MalaysiaSQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure Malaysia
GohKiangHock
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
Green Software Development
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
dakas1
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
ShulagnaSarkar2
 
Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)
Julian Hyde
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
Peter Muessig
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
gapen1
 
zOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL DifferenceszOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL Differences
YousufSait3
 

Recently uploaded (20)

Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging  a  Tech AgencyPreparing Non - Technical Founders for Engaging  a  Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
 
Fundamentals of Programming and Language Processors
Fundamentals of Programming and Language ProcessorsFundamentals of Programming and Language Processors
Fundamentals of Programming and Language Processors
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
 
Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !
 
Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
 
YAML crash COURSE how to write yaml file for adding configuring details
YAML crash COURSE how to write yaml file for adding configuring detailsYAML crash COURSE how to write yaml file for adding configuring details
YAML crash COURSE how to write yaml file for adding configuring details
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
 
SQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure MalaysiaSQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure Malaysia
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
 
Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
 
zOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL DifferenceszOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL Differences
 

Angular2 for Beginners

  • 1. Angular 2 for Beginners Oswald Campesato Consultant/Training: www.iquarkt.com ocampesato@yahoo.com
  • 2. 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
  • 3. 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(?)
  • 4. Ang1.x features removed from Ang 2 + $scope + factories + controllers + providers + $apply + $digest + many built-in directives
  • 5. 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
  • 6. 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-
  • 7. 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)
  • 8. 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)
  • 9. 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);
  • 10. 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
  • 11. 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);
  • 12. Exercise: Add More Data (main.ts) • Add a first name field • Add a last name field • Add a state field • reload the application
  • 13. 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>
  • 14. 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);
  • 15. 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
  • 16. 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);
  • 17. 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>
  • 18. Angular 2 Built-in Components • NgIf • NgSwitch • NgStyle • NgClass • NgFor • NgNonBindable
  • 19. 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
  • 20. 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
  • 21. 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);
  • 22. 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
  • 23. 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
  • 24. TypeScript Improvements over ES5 • Types • Classes • Annotations • Imports • language utilities (e.g. destructuring)
  • 25. Other TypeScript Features • Interfaces • Inheritance • Generics
  • 26. 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"];
  • 27. 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");
  • 28. 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
  • 29. 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 });
  • 30. 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);
  • 31. 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; } }
  • 32. 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
  • 33. 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"} ]
  • 34. 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; • } }
  • 35. 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") ];
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. 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)
  • 40. Browser Status for ES6 • Modern IE: https://goo.gl/56n7IL • Mozilla: https://goo.gl/iSNDf9 • Chrome: https://www.chromestatus.com/features#ES6
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. 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)