Angular 2 for Java Developers

Angular 2 for Java
Developers
Yakov Fain, Farata Systems
March 10, 2016

Angular 2
• Complete re-write of AngularJS
• Component-based
• Better performance
• No controllers, scopes
• Streamlined Dependency Injection
• Integrated RxJS
• Can write apps in TypeScript,  
Dart, or JavaScript (ES5 or ES6)

An app is a tree of components

Importing
modules
Class annotations

Project Structure
Conﬁg ﬁles
App dependencies
App code
{

Project Structure
SystemJS
transpiles
TS and
loads JS
bootstrap(ApplicationComponent)

Project Structure
bootstrap(ApplicationComponent)

import {Component} from 'angular2/core'; 
import {Product, ProductService} from 'app/services/product-service';
import CarouselComponent from '../carousel/carousel'; 
import ProductItemComponent from '../product-item/product-item'; 
import {ProductService} from '../../services/product-service'; 
 
@Component({ 
selector: 'auction-home-page', 
directives: [ 
CarouselComponent, 
ProductItemComponent 
], 
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 *ngFor="#product of products" class="col-sm-4 col-lg-4 col
<auction-product-item [product]="product"></auction-product-i
</div> 
</div> 
` 
}) 
export default class HomeComponent { 
products: Product[] = []; 
 
constructor(private productService: ProductService) { 
this.products = this.productService.getProducts(); 
} 
} 
Exporing a 
module
HomeComponent
Importing 
Modules

Dependency
Injection
HomeComponent
 
@Component({ 
directives: [ 
], 
template: ` 
</div> 
</div> 
</div> 
</div> 
` 
}) 
 
} 
}

 
@Component({ 
directives: [ 
], 
template: ` 
</div> 
</div> 
</div> 
</div> 
` 
}) 
 
} 
} 
Looping with *ngFor

Intro to TypeScript
http://www.typescriptlang.org

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

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

Transpiling TypeScript Interactively 
http://www.typescriptlang.org/Playground
TypeScript JavaScript (E5)

Classes

A Class With Constructor

Inheritance
Classical syntax Prototypal

Arrow Function Expressions (lambdas)
var getName = () => 'John Smith';
console.log(`The name is ` + getName());

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 tsconfig.json file
• The watch mode allows to auto-compile as files change: 
 
tsc -w *.ts

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>

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

Index.html Take 1
<!DOCTYPE html>
<html>
<head>
<script src="//npmcdn.com/angular2@2.0.0-beta.7/bundles/angular2-polyﬁlls.js"></script>
<script src="//npmcdn.com/typescript@1.7.5/lib/typescript.js"></script>
<script src="//npmcdn.com/systemjs@0.19.22/dist/system.src.js"></script>
<script src="//npmcdn.com/rxjs@5.0.0-beta.2/bundles/Rx.js"></script>
<script src="//npmcdn.com/angular2@2.0.0-beta.7/bundles/angular2.dev.js"></script>
 
<script>
System.conﬁg({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true}
});
System.import('main.ts');
</script>
</head>
<body>
</body>
</html>
Angular from CDN
SystemJS
HelloWorldComponent

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

package.json
{
"name": "walkthrough5",
"version": "1.0.0",
"description": “A sample package.json for the Angular app”,
"scripts": {
"start": "live-server"
},
"dependencies": {
"es6-shim": "0.33.13",
"es6-promise": "^3.0.2",
"reﬂect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.23",
"zone.js": "0.5.15",
"angular2": "2.0.0-beta.9"
},
 
"devDependencies": {
"live-server": "^0.9.0",
"typescript": "^1.7.5"
}
}

<!DOCTYPE html>
<html>
<head>
<script src="node_modules/angular2/bundles/angular2-polyﬁlls.js"></script>
<script src="node_modules/typescript/lib/typescript.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>
System.conﬁg({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true}
});
System.import('main.ts');
</script>
</head>
<body>
</body>
</html>
Index.html Take 2
Angular’s local (after npm install)

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({ 
… 
template: ` 
</div> 
</div> 
<div class="form-group"> 
<input placeholder="Filter products by title” type="text"> 
</div> 
</div> 
</div> 
` 
})

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()">

Two-way Binding
Synchronizing Model and View:
<input [value]="myComponentProperty"  
(input)=“onInputEvent($event)>
<input [(ngModel)] = "myComponentProperty">

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

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"); 
} 
}

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

Injecting Dependencies of Dependencies

Injecting Dependencies of Dependencies
import {Http} from 'angular2/http';
@Injectable
export class ProductService {
constructor(private http:Http){
let products = http.get('products.json');
}
…
}

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

@Component({ 
selector: ‘basic-routing',
 
template: `<a [routerLink]="['/Home']">Home</a> 
<a [routerLink]="['/ProductDetail']">Product Details</a> 
<router-outlet></router-outlet>`, 
directives: [ ROUTER_DIRECTIVES] 
}) 
 
@RouteConfig([ 
{path: '/', component: HomeComponent, as: 'Home'}, 
{path: '/product', component: ProductDetailComponent, as: 'ProductDetail'} 
]) 
class RootComponent{ 
} 
 
bootstrap(RootComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, 
{useClass: HashLocationStrategy})]);
Basic Routing

@Component({ 
selector: 'basic-routing', 
template: `<a [routerLink]="['/Home']">Home</a> 
<a [routerLink]="['/ProductDetail',
{id:1234}]">Product Details</a> 
<router-outlet></router-outlet>`, 
directives: [ ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
{path: '/', component: HomeComponent, as: 'Home'}, 
 
{path: '/product/:id', component: ProductDetailComponent,  
as: 'ProductDetail'} 
 
]) 
class RootComponent{} 
 
bootstrap(RootComponent, [ROUTER_PROVIDERS, 
provide(LocationStrategy, {useClass: HashLocationStrategy})]);
Passing Data to a Route

@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

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

Observable Streams
• Emit the next element
• Throw an error
• Send a signal that the streaming is over
An observable stream can:

Observers
• A function to handle streaming object
• Error handling
• End-of-stream handling
An observer provides:

Observables vs Promises
• Observable can return multiple values
• Observables can be cancelled
• Observables allow to handle end-of-stream

Observable Events@Component({ 
selector: "app", 
template: ` 
<h2>Observable events demo</h2> 
<input type="text" placeholder="Enter stock" [ngFormControl]="searchInput"> 
` 
}) 
class AppComponent { 
 
searchInput: Control; 
 
constructor(){ 
this.searchInput = new Control(''); 
 
this.searchInput.valueChanges 
.debounceTime(500) 
.subscribe(stock => this.getStockQuoteFromServer(stock)); 
} 
 
getStockQuoteFromServer(stock) { 
 
console.log(`The price of ${stock} is ${100*Math.random().toFixed(4)}`); 
} 
}
Observable

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

Deployment
• We use Webpack bundler for packaging
• npm scripts for running the build scripts
The app
index.html
Frameworks

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)

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

…
module.exports = { 
debug: false, 
devtool: 'source-map', 
entry: { 
'main' : './src/main.ts', 
'vendor': './src/vendor.ts' 
}, 
metadata: metadata, 
module: { 
loaders: [ 
{test: /.css$/, loader: 'to-string!css'}, 
{test: /.html$/, loader: 'raw'}, 
{test: /.ts$/, loader: 'ts'} 
], 
noParse: [path.join(__dirname, 'node_modules', 'angular2', 'bundles')] 
}, 
output: { 
path : './dist', 
filename: 'bundle.js' 
}, 
plugins: [ 
new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}), 
new CompressionPlugin({regExp: /.css$|.html$|.js$|.map$/, threshold: 1500}), 
new CopyWebpackPlugin([{from: './src/index.html', to: 'index.html'}]), 
new DedupePlugin(), 
new DefinePlugin({'webpack': {'ENV': JSON.stringify(metadata.ENV)}}), 
new OccurenceOrderPlugin(true), 
new UglifyJsPlugin({ 
compress : {screw_ie8 : true}, 
mangle: { 
screw_ie8 : true, 
except: ['RouterLink'] // TODO: Remove after #6678 fixed 
} 
}) 
], 
resolve: { 
extensions: ['', '.ts', '.js'] 
} 
webpack.conﬁg.js

npm scripts in package.json
"scripts": { 
 
"clean": "rimraf dist", 
 
"postinstall": "typings install", 
 
"prebuild": "npm run clean", 
"build": "webpack --config webpack.prod.config.js --progress —profile --display-cached", 
 
"start": "webpack-dev-server --inline --progress --display-cached --port 8080", 
 
"preserve:dist": "npm run build", 
"serve:dist": "static dist -z" 
}
To run a script from the command line: 
 
npm start
or
npm run build
or
npm run serve:dist

Links
• A two-day Angular 2 workshop, March 28-29, 2016, New York, 
http://bit.ly/1R0FAhN  
discount code: jugmember
• Angular consulting/training: faratasystems.com
• Blog: yakovfain.com
• Our book: http://bit.ly/1QYeqL0

Angular 2 for Java Developers

More Related Content

What's hot (20)

Similar to Angular 2 for Java Developers (20)

More from Yakov Fain (14)

Recently uploaded (20)

Angular 2 for Java Developers