Angular 4 for Java Developers

Angular 4 for Java
Developers
Yakov Fain
Farata Systems 
yfain

By the end of this presentation you
won’t become an Angular expert,
but you’ll start being dangerous!
The Legal Slide

About myself
• Work for Farata Systems  
Angular practice lead
• Java Champion
• Latest book: 
“Angular Development with TypeScript”
ctwdevoxxus 
40% off

Agenda
• High-level overview of the Angular framework and TypeScript
• Generating and bundling a project with Angular CLI
• Start a Java REST service with Spring Boot
• Create an Angular REST client and deploy it under Spring
Boot
• Demo of a sample Angular app that uses REST and
WebSockets

Angular Framework
• Component-based (not MVC)
• Dependency Injection
• Router
• Integrated RxJS
• Can write apps in TypeScript, Dart, or JavaScript
• UI components: Angular Material 2
• The rendering engine

The landing page of an Auction app

An app is a tree of components

import {Component} from '@angular/core'; 
import {Product, ProductService} from '../services/product-service'; 
 
@Component({ 
selector: 'app-root',  
templateUrl: 'application.html', 
styleUrls: ['application.css'] 
}) 
export class AppComponent { 
products: Array<Product> = [];  
 
constructor(private productService: ProductService) {  
this.products = this.productService.getProducts();  
} 
}
HTML, CSS
TypeScript

TypeScript 
for Java Developers

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

A Class With Constructor
TypeScript JavaScript (ES5)

Inheritance
Classical Prototypal

Generics
Compile time error
No Errors

Interfaces
No interfaces
in JavaScript

What’s Angular CLI
• Scaffolding the project and creating a basic app
• Generating components, services, modules, etc.
• Serving the app to the browser
• Bundling apps for dev and prod deployments
• Generates boilerplate unit tests and conﬁgures test
runners

Demo
- Generating a new project 
- Dev and prod builds with Angular CLI

Router’s features
- Pass data to routes
- Child component can have their routes
- Multiple router outlets
- Guarding routes
- Lazy loading of modules

Dependency Injection
• Angular injects values into components via constructors
• Each component has its own injector
• You specify a provider so Angular knows what to inject

A sample injectable service
@Injectable()
export class ProductService{
 
getProducts(): Product { 
// An HTTP request can go here  
 
return new Product( 0, "iPhone 7", 249.99, "The latest iPhone, 7-inch screen"); 
} 
}

Injecting the ProductService
import {Component} from ‘@angular/core'; 
import {ProductService, Product} from “./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 class ProductComponent { 
product: Product; 
 
constructor( productService: ProductService ) { 
this.product = productService.getProduct(); 
} 
}
Injection

Reactive Programming: Push
Subscribe to messages from Observable and handle them by Observer
Observer
Subscriber
Observer
Subscriber
push
push
push
Observer
Subscriber
Observable
Data 
Source

Reactive programming in Angular
- Router 
- Reactive Forms 
- EventEmitter (a subclass of Subject)
- Handling HTTP responses 
- WebSockets

Http and Observables
 
class AppComponent implements OnInit{ 
 
products: Array = []; 
 
constructor(private http: Http) {}
ngOnInit() { 
this.http.get(‘/api/products’) 
.map(res => res.json()) // Turn JSON from HTTP response into JS obj 
.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') 
); 
} 
}
O
b
s
e
r
v
e
r

Inter-component
communications

@Input properties
@Component({ 
selector: 'order-processor', 
template: `...` 
})
class OrderComponent { 
 
@Input() quantity: number; 
 
@Input() 
set stockSymbol(value: string) { 
// process the stockSymbol change here 
} 
<order-processor [stockSymbol]="stock" quantity="100"></order-processor>
Child
Parent

@Output properties
class PriceQuoterComponent { 
 
@Output() lastPrice: EventEmitter <IPriceQuote> = new EventEmitter(); 
 
stockSymbol: string = "IBM"; 
 
constructor() { 
setInterval(() => { 
let priceQuote: IPriceQuote = { 
stockSymbol: this.stockSymbol, 
lastPrice: 100*Math.random() 
}; 
 
this.lastPrice.emit(priceQuote); 
 
}, 1000); 
} 
}
<price-quoter (lastPrice)="priceQuoteHandler($event)"></price-quoter><br>
Child
Parent

An injectable service as a mediator

Forms API
- Template-driven forms
- Reactive forms
- Form validation

A template-driven form
@Component({ 
selector: 'app-root', 
template: ` 
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)"> 
<div>Username: <input type="text" name="username" ngModel></div> 
<div>SSN: <input type="text" name="ssn" ngModel></div> 
<div>Password: <input type="password" name="password" ngModel></div> 
<div>Confirm password: <input type="password" name="pconfirm" ngModel></div> 
<button type="submit">Submit</button> 
</form> 
` 
}) 
export class AppComponent { 
onSubmit(formData) { 
console.log(formData); 
} 
}

"scripts": { 
 
"start": "ng serve --proxy-config proxy.conf.json", 
 
"build": "ng build -prod", 
 
"postbuild": "npm run deploy”,
 
"predeploy": "rimraf ../server/build/public
&& mkdirp ../server/build/public”,
 
"deploy": "copyfiles -f dist/** ../server/build/public" 
}
Automating deployments with
npm scripts
static 
resources

Demo 
Angular + Spring Boot
Java
Angular

Designed in 1995 in Norway (still alive)

What’s Material Design?
Material design is visual language (a spec) that deﬁnes
the classic principles of good design.

Angular Material 2
Need more components? Use the library PrimeNG

Thank you!
• The book code samples: 
https://github.com/Farata/angular2typescript
• Training inquiries:  
training@faratasystems.com
• My blog: 
yakovfain.com
• Twitter: @yfain 
ctwdevoxxus 
40% off

Angular 4 for Java Developers

More Related Content

What's hot

Viewers also liked

Similar to Angular 4 for Java Developers

More from Yakov Fain

Recently uploaded

Angular 4 for Java Developers