Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular 4 for Java Developers

6,251 views

Published on

These are the slides of my presentation at DevoxxUS in San Jose (March of 2017)

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Angular 4 for Java Developers

  1. 1. Angular 4 for Java Developers Yakov Fain Farata Systems
 yfain
  2. 2. By the end of this presentation you won’t become an Angular expert, but you’ll start being dangerous! The Legal Slide
  3. 3. About myself • Work for Farata Systems 
 Angular practice lead • Java Champion • Latest book:
 “Angular Development with TypeScript” ctwdevoxxus
 40% off
  4. 4. 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
  5. 5. 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
  6. 6. The landing page of an Auction app
  7. 7. An app is a tree of components
  8. 8. HTML
  9. 9. 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
  10. 10. TypeScript
 for Java Developers
  11. 11. Arrow Function Expressions let getName = () => 'John Smith'; console.log(`The name is ` + getName()); Anonymous
 function
  12. 12. A Class With Constructor TypeScript JavaScript (ES5)
  13. 13. Inheritance Classical Prototypal
  14. 14. Generics Compile time error No Errors
  15. 15. Interfaces No interfaces in JavaScript
  16. 16. Angular CLI
  17. 17. 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
  18. 18. Demo - Generating a new project
 - Dev and prod builds with Angular CLI
  19. 19. Single Page Apps
  20. 20. Router’s features - Pass data to routes - Child component can have their routes - Multiple router outlets - Guarding routes - Lazy loading of modules
  21. 21. 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
  22. 22. 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");
 }
 }
  23. 23. 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
  24. 24. 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
  25. 25. Reactive programming in Angular - Router
 - Reactive Forms
 - EventEmitter (a subclass of Subject) - Handling HTTP responses
 - WebSockets
  26. 26. 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
  27. 27. Inter-component communications
  28. 28. @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
  29. 29. @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
  30. 30. An injectable service as a mediator
  31. 31. Forms API - Template-driven forms - Reactive forms - Form validation
  32. 32. 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);
 }
 }
  33. 33. "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
  34. 34. Demo
 Angular + Spring Boot Java Angular
  35. 35. Designed in 1995 in Norway (still alive)
  36. 36. What’s Material Design? Material design is visual language (a spec) that defines the classic principles of good design.
  37. 37. Palettes
  38. 38. Angular Material 2 Need more components? Use the library PrimeNG
  39. 39. Demo
  40. 40. 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

×