16. Whatās TypeScript?
ā¢ An open-source language developed by Microsoft
ā¢ Designed by Anders Hejlsberg, the creator of C#, Delphi,
and Turbo Pascal
ā¢ A superset of JavaScript
ā¢ Well supported by IDEs
17. Beneļ¬ts of Writing in TypeScript
ā¢ Increases your productivity in producing JavaScript
ā¢ Supports types, classes, interfaces, generics, annotations
ā¢ Compiles into a human-readable JavaScript
ā¢ Easy to learn by Java developers
ā¢ Supports most of the ES6 and some ES7 syntax
26. TypeScript Compiler: tsc
ā¢ Install the typescript compiler with npm (comes with Node.js):āØ
āØ
npm install -g typescript
ā¢ Compile main.ts into main.js specifying target language syntax:āØ
āØ
tsc āt ES5 main.ts
ā¢ Usually the compilerās options are set in tsconļ¬g.json ļ¬le
ā¢ The watch mode allows to auto-compile as ļ¬les change:āØ
āØ
tsc -w *.ts
27. import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
@Component({
selector: 'hello-world',
template: '<h1>Hello {{ name }}!</h1>'
})
class HelloWorldComponent {
name: string;
constructor() {
this.name = āWorld!';
}
}
bootstrap(HelloWorldComponent);
HelloWorldComponent in Angular
In HTML:āØ
āØ
<hello-world></hello-world>
28. SystemJS: a Universal Module Loader
ā¢ ES6 deļ¬nes modules, but not the loader
ā¢ ES7 should include the System object for loading
modules
ā¢ SystemJS is a polyļ¬ll that loads modules
30. Starting a new project with npm
1. Generate package.json for your project:āØ
npm init -y
2. Add Angular dependencies to package.json
3. Download dependencies into the dir node_modules: āØ
npm install
4. Install live-serverāØ
npm install live-server -g
33. Templates
ā¢ A place to write HTML
ā¢ Rendering is separated from the core framework
ā¢ Angular team works with Telerik on rendering for iOS and Android using NativeScript
@Component({āØ
selector: 'auction-home-page',āØ
ā¦āØ
styleUrls: ['app/components/home/home.css'],āØ
template: `āØ
<div class="row carousel-holder">āØ
<div class="col-md-12">āØ
<auction-carousel></auction-carousel>āØ
</div>āØ
</div>āØ
<div class="row">āØ
<div class="col-md-12">āØ
<div class="form-group">āØ
<input placeholder="Filter products by titleā type="text">āØ
</div>āØ
</div>āØ
</div>āØ
`āØ
})
34. Unidirectional Binding
From code to template:
<h1>Hello {{ name }}!</h1>
<span [hidden]=āisZipcodeValidā>Zip code is not valid</span>
From template to code:
<button (click)="placeBid()">Place Bid</button>
<input placeholder= "Product name" (input)="onInputEvent()">
35. Two-way Binding
Synchronizing Model and View:
<input [value]="myComponentProperty" āØ
(input)=āonInputEvent($event)>
<input [(ngModel)] = "myComponentProperty">
36. Dependency Injection
ā¢ Angular can create services; no need to use the new
operator
ā¢ Angular injects objects into components via constructors only
ā¢ Each component has an injector
ā¢ Providers specify how to inject
ā¢ If a component has no provider deļ¬ned, Angular checks its
parent
37. product-service.ts
export class Product {āØ
constructor(āØ
public id: number,āØ
public title: string,āØ
public price: number,āØ
public description: string) {āØ
}āØ
}āØ
āØ
export class ProductService {āØ
getProduct(): Product {āØ
return new Product( 0, "iPhone 7", 249.99,
"The latest iPhone, 7-inch screen");āØ
}āØ
}
38. Injecting ProductService
import {Component, bind} from 'angular2/core';āØ
import {ProductService, Product} from "../services/product-service";āØ
āØ
@Component({āØ
selector: 'di-product-page',āØ
template: `<div>āØ
<h1>Product Details</h1>āØ
<h2>Title: {{product.title}}</h2>āØ
<h2>Description: {{product.description}}</h2>āØ
<h2>Price: ${{product.price}}</h2>āØ
</div>`,āØ
providers:[ProductService]āØ
})āØ
āØ
export default class ProductComponent {āØ
product: Product;āØ
āØ
constructor( productService: ProductService) {āØ
āØ
this.product = productService.getProduct();āØ
}āØ
}āØ
A provider can be a
class, factory, or a value
Injection
40. Injecting Dependencies of Dependencies
import {Http} from 'angular2/http';
@Injectable
export class ProductService {
constructor(private http:Http){
let products = http.get('products.json');
}
ā¦
}
41. Routing Bulding Blocks
ā¢ RouterOutlet (<router-outlet>) - where the router should render the component
ā¢ @RouteConļ¬g - map URLs to components to be rendered inside the <router-outlet>
ā¢ RouterLink ([routerLink]) - a link to a named route.
ā¢ RouteParams - a map of key-value pairs to pass parameters to the route
ā¢ RouteData - a map of key-value pairs used to pass additional data from
@RouteConļ¬g to a route
44. @Component({āØ
selector: āproduct',
āØ
template: `<h1 class="product">Product Detail for Product: āØ
{{productID}}</h1>`,
āØ
styles: ['product {background: cyan}']āØ
})
āØ
export class ProductDetailComponent {āØ
productID: string;
constructor(params: RouteParams){āØ
āØ
this.productID = params.get('id');āØ
}āØ
}
Receiving Data in a Route
1
2
3
45. Reactive Programming
ā¢ Angular comes with RxJS library of reactive extensionsāØ
ā¢ A observable stream emits the data over time to the
subscriber.
ā¢ Supports multiple operators to transform the streamās dataāØ
ā¢ Stream samples: āØ
- UI eventsāØ
- HTTP responsesāØ
- Data arriving over websockets
46. Observable Streams
ā¢ Emit the next element
ā¢ Throw an error
ā¢ Send a signal that the streaming is over
An observable stream can:
47. Observers
ā¢ A function to handle streaming object
ā¢ Error handling
ā¢ End-of-stream handling
An observer provides:
51. Http and Observables
āØ
class AppComponent {āØ
āØ
products: Array<string> = [];āØ
āØ
constructor(private http: Http) {āØ
āØ
this.http.get(āhttp://localhost:8080/products')āØ
.map(res => res.json())āØ
.subscribe(āØ
data => {āØ
āØ
this.products=data;āØ
},āØ
āØ
err =>āØ
console.log("Can't get products. Error code: %s, URL: %s ",āØ
err.status, err.url),āØ
āØ
() => console.log('Product(s) are retrieved')āØ
);āØ
}āØ
}
DI
O
b
s
e
r
v
e
r
52. Deployment
ā¢ We use Webpack bundler for packaging
ā¢ npm scripts for running the build scripts
The app
index.html
Frameworks
53. Preparing deployment with Webpack
ā¢ Input: the entry point(s) of your app
ā¢ Output: transpiled bundle (a .js ļ¬le)
ā¢ Resources (css, images, html) can be inlined in the bundle
ā¢ Usually, the app will have at least two bundles:āØ
āØ
- your code (e.g. bundle.js)āØ
āØ
- frameworks and libraries (e.g. vendor.bundle.js)
54. Webpack Loaders & Plugins
ā¢ Loaders operate on a single ļ¬le (e.g. transpile TS into JS)
ā¢ Plugins can operate on multiple ļ¬les and be invoked at
different stages of the Webpack lifecycle