angular 4 for java developers
Post on 11-Apr-2017
166 Views
Preview:
TRANSCRIPT
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”
ctwdevoxxus40% 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
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
Arrow Function Expressions
let getName = () => 'John Smith';
console.log(`The name is ` + getName());
Anonymous function
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 configures test runners
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 ProductServiceimport {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
ObservableData Source
Reactive programming in Angular
- Router - Reactive Forms - EventEmitter (a subclass of Subject) - Handling HTTP responses - WebSockets
Http and Observablesclass 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') ); }}
Observer
@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 propertiesclass 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
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
staticresources
What’s Material Design?Material design is visual language (a spec) that defines the classic principles of good design.
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
top related