Bootiful Development with Spring Boot and Angular - Spring I/O 2017
•
1 recomendación•539 vistas
To simplify development and deployment, you want everything in the same artifact, so you put your Angular app “inside” your Spring Boot app, right? But what if you could create your Angular app as a standalone app and make cross-origin requests to your API? A client app that can point to any server makes it easy to test your current client code against other servers (e.g. test, staging, production). This workshop shows how to develop with Java 8, Spring Boot, Angular 4, and TypeScript. You’ll learn how to create REST endpoints with Spring MVC, Spring Data REST, configure Spring Boot to allow CORS, and create an Angular app to display its data. If time allows we’ll cover microservices, security/authentication, continuous integration, and deployment to Cloud Foundry. Prerequisites: Java 8, Maven 3.5.0, Node.js 6.9.5, Chrome (higher versions ok) Install Angular CLI: npm install -g @angular/cli Optional: Yarn instead of npm Tutorial used for workshop: http://developer.okta.com/blog/2017/04/26/bootiful-development-with-spring-boot-and-angular
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Similar a Bootiful Development with Spring Boot and Angular - Spring I/O 2017 (20)
Más de Matt Raible
Más de Matt Raible (20)
Último
Último (20)
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
- 1. @spring_io #springio17 Bootiful Development with Spring Boot and Angular Matt Raible @mraible
- 2. Blogger on raibledesigns.com Web Developer and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
- 6. @spring_io #springio17 Spring Boot Automatically configures Spring whenever possible Provides production-ready features such as metrics, health checks and externalized configuration Absolutely no code generation and no requirement for XML configuration Embeds Tomcat, Jetty or Undertow directly
- 7. SPRING INITIALIZR @ start.spring.io
- 9. @SpringBootApplication public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } } @Entity class Blog { @Id @GeneratedValue private Long id; private String name; // getters, setters, toString(), etc } @RepositoryRestResource interface BlogRepository extends PagingAndSortingRepository<Blog, Long> { }
- 12. @spring_io #springio17 Demo: Build a Spring Boot API
- 13. @spring_io #springio17 ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
- 16. @spring_io #springio17 TypeScript $ npm install -g typescript function greeter(person: string) { return "Hello, " + person; } var user = "Jane User"; document.body.innerHTML = greeter(user); $ tsc greeter.ts https://www.typescriptlang.org/docs/tutorial.html
- 19. “Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non- blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.” https://nodejs.org https://github.com/creationix/nvm
- 20. @spring_io #springio17 @spring_io #springio17 Leading JavaScript Frameworks in 2017 angular.io facebook.github.io/react vuejs.org
- 23. @spring_io #springio17 @spring_io #springio17 Jobs on Indeed May 2017 0 2,000 4,000 6,000 8,000 Angular Aurelia Backbone Ember Knockout React Vue
- 24. @spring_io #springio17 @spring_io #springio17 Stack Overflow Tags May 2017 0 12,500 25,000 37,500 50,000 Angular Aurelia Backbone Knockout Ember React Vue
- 25. @spring_io #springio17 @spring_io #springio17 GitHub Stars May 2017 0 17,500 35,000 52,500 70,000 Angular Aurelia Backbone Knockout Ember React Vue
- 26. @spring_io #springio17 Hello World with Angular import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'World'; } <my-app></my-app> https://angular.io/docs/ts/latest/quickstart.html
- 27. @spring_io #springio17 Hello World with Angular import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- 28. @spring_io #springio17 Hello World with Angular import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);
- 32. @spring_io #springio17 Get Started with Angular Angular QuickStart https://angular.io/docs/ts/latest/quickstart.html Angular Seed https://github.com/mgechev/angular-seed Angular Seed Advanced https://github.com/NathanWalker/angular-seed-advanced
- 33. @spring_io #springio17 Demo: Build an Angular Client export class BeerListComponent implements OnInit { beers: Array<any>; constructor(private beerService: BeerService, private giphyService: GiphyService) { } ngOnInit() { this.beerService.getAll().subscribe( data => { this.beers = data; for (let beer of this.beers) { this.giphyService.get(beer.name).subscribe(url => beer.giphyUrl = url); } }, error => console.log(error) ) } }
- 34. @spring_io #springio17 Built-in Components <div *ngIf="str == 'yes'"></div> <div [ngSwitch]="myVar"> <div *ngSwitchWhen="'A'"></div> </div> <div [ngStyle]="{color: colorinput.value}"></div> <div [ngClass]="{bordered: true}"></div> <div *ngFor="let item of items; let num = index"></div>
- 35. @spring_io #springio17 The asterisk (*) effect https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asterisk <div *ngIf="hero">{{hero}}</div> <div *ngFor="let hero of heroes">{{hero}}</div>
- 36. @spring_io #springio17 The asterisk (*) effect <!-- Examples (A) and (B) are the same --> <!-- (A) *ngIf paragraph --> <p *ngIf="condition"> Our heroes are true! </p> <!-- (B) [ngIf] with template --> <template [ngIf]="condition"> <p> Our heroes are true! </p> </template>
- 37. @spring_io #springio17 Angular Forms Template-Driven import { FormsModule } from '@angular/forms'; Reactive Forms import { ReactiveFormsModule } from '@angular/forms';
- 38. @spring_io #springio17 Template-Driven Validation <label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div>
- 39. @spring_io #springio17 Reactive Forms Validation <form [formGroup]="heroForm" *ngIf="active" (ngSubmit)="onSubmit()"> <label for="name">Name</label> <input type="text" id="name" class="form-control" formControlName="name" required> <div *ngIf="formErrors.name" class="alert alert-danger"> {{ formErrors.name }} </div> </form>
- 40. @spring_io #springio17 Data Architectures MVW / Two-way binding Flux Observables
- 41. @spring_io #springio17 Observables and RxJS Promises emit a single value whereas streams emit many values Imperative code “pulls” data whereas reactive streams “push” data RxJS is functional Streams are composable
- 42. @spring_io #springio17 Authentication with OpenID Connect http://developer.okta.com http://bit.ly/ng-okta youtube.com/watch?v=Kb56GzQ2pSk
- 44. @spring_io #springio17 ng-book 2 A comprehensive guide to developing with Angular 4 Worth all your hard earned $$$ https://www.ng-book.com/2 “Thank you for the awesome book, it's the bible for Angular.” — Vijay Ganta
- 48. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
- 49. @spring_io #springio17 Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing Lighthouse DevTools Network & CPU Throttling
- 50. @spring_io #springio17 The PRPL Pattern Push Render Pre-cache Lazy-load
- 51. @spring_io #springio17 The PRPL Pattern Push critical resources for the initial URL route Render initial route Pre-cache remaining routes Lazy-load and create remaining routes on demand
- 55. @spring_io #springio17 The JHipster Mini-Book 2.0 Release on Dec 5, 2016 jhipster-book.com 21-points.com @jhipster_book Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
- 56. @spring_io #springio17 Action! Try Spring Boot Try Angular Explore PWAs Enjoy the bootiful experience!