Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bootiful Development with Spring Boot and Angular - Connect.Tech 2017

Matt Raible
September 20, 2017

Bootiful Development with Spring Boot and Angular - Connect.Tech 2017

Intro to Spring Boot and Angular presentation from JHipster 4 Workshop on Connect.Tech 2017.

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

September 20, 2017
Tweet

More Decks by Matt Raible

Other Decks in Programming

Transcript

  1. Matt Raible | @mraible Bootiful Development w/ Spring Boot and

    Angular September 20, 2017 Connect.Tech https://www.flickr.com/photos/rockmixer/2806330093
  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
  3. 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
  4. 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
  5. @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 JpaRepository<Blog, Long> { }
  6. 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
  7. “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
  8. @spring_io #springio17 Jobs on Indeed September 2017 0 1,750 3,500

    5,250 7,000 Angular Aurelia Backbone Ember Knockout React Vue
  9. @spring_io #springio17 Stack Overflow Tags September 2017 0 20,000 40,000

    60,000 80,000 Angular Aurelia Backbone Knockout Ember React Vue
  10. @spring_io #springio17 GitHub Stars August 2017 0 20,000 40,000 60,000

    80,000 Angular Aurelia Backbone Knockout Ember React Vue
  11. 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>
  12. 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 { }
  13. 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);
  14. 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) ) } }
  15. The JHipster Mini-Book 4.0 Release on Sep 22, 2017 jhipster-book.com

    21-points.com @jhipster_book Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
  16. @SpringBootApplication class NotesApplication fun main(args: Array<String>) { SpringApplication.run(NotesApplication::class.java, *args) }

    @Entity data class Note(@Id @GeneratedValue var id: Long? = null, var text: String? = null, @JsonIgnore var user: String? = null) @RepositoryRestResource interface NotesRepository : JpaRepository<Note, Long>