Bootiful Development with Spring Boot and Angular - Oktane17

Bootiful Development with Spring Boot and Angular - Oktane17

To simplify development and deployment, you want everything in the same artifact, so you put on your Angular app "inside" and 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? This session 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.



Matt Raible

August 30, 2017


  1. Bootiful Development with Spring Boot and Angular Matt Raible |

    Developer Advocate @mraible
  2. Blogger on Web Developer and Java Champion Father, Skier,

    Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
  3. @spring_io #springio17 Okta Supports Authentication Standards

  4. What about You?

  5. Bootiful Development

  6. OAuth 2.0 Overview Today’s Agenda Why Spring Boot? Demo: Developing

    with Spring Boot Introduction to ES6 and TypeScript Why Angular? Demo: Developing with Angular Introduction to PWAs and JHipster
  7. 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

  9. @SpringBootApplication public class DemoApplication { public static void main(String[] args)

    {, args); } } @Entity class Blog { @Id @GeneratedValue private Long id; private String name; // getters, setters, toString(), etc } @RepositoryRestResource interface BlogRepository extends PagingAndSortingRepository<Blog, Long> { }
  10. @spring_io #springio17 Microservices with Spring Boot

  11. @spring_io #springio17 Secure Microservices with Spring Boot

  12. Demo: Build a Spring Boot API

  13. ES6, ES7 and TypeScript ES5: ES6: ES7:

    TS: TS ES7 ES6 ES5


  16. TypeScript $ npm install -g typescript function greeter(person: string) {

    return "Hello, " + person;
 var user = "Jane User";
 document.body.innerHTML = greeter(user); $ tsc greeter.ts
  17. @spring_io #springio17 bus.ts

  18. “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.”
  19. @spring_io #springio17 Leading JavaScript Frameworks in 2017

  20. None
  21. None
  22. @spring_io #springio17 Jobs on Indeed August 2017 0 1,750 3,500

    5,250 7,000 Angular Aurelia Backbone Ember Knockout React Vue
  23. @spring_io #springio17 Stack Overflow Tags August 2017 0 17,500 35,000

    52,500 70,000 Angular Aurelia Backbone Knockout Ember React Vue
  24. @spring_io #springio17 GitHub Stars August 2017 0 20,000 40,000 60,000

    80,000 Angular Aurelia Backbone Knockout Ember React Vue
  25. @spring_io #springio17 GitHub Star Growth

  26. 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>
  27. Hello World with Angular import { BrowserModule } from '@angular/platform-browser';

    import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
  28. 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);
  29. None
  30. Angular CLI

  31. Angular CLI

  32. Get Started with Angular Angular QuickStart Angular Seed

    Angular Seed Advanced
  33. 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.giphyUrl = url; }); } }, error => console.log(error) ) } }
  34. @spring_io #springio17 Progressive Web Apps

  35. @spring_io #springio17 JHipster

  36. None
  37. The JHipster Mini-Book 2.0 Release on Dec 5, 2016 @jhipster_book Write your own InfoQ mini-book!
  38. Action! Try Spring Boot Try Angular Explore PWAs Enjoy the

    bootiful experience!
  39. DIY: Bootiful Development

  40. it down with Okta!



  43. Questions? Keep in touch! @mraible Presentations Code