SpringBoot and Angular 5.0 Integration - Full TODO Application

  • Published on Jan 10, 2018
  • In this video I show off the power of spring boot and angular by showing a fully functional Todo application that I built. The application includes an interface build using Angular and Angular Material, a backend api build using the spring framework and an in memory database.
    Technologies used:
    - Spring Boot
    - Spring Data Rest
    - Spring Data JPA
    - H2 in memory database
    - Angular CLI
    - Angular 5
    - Angular Material
    Find the source code on Github: github.com/steveftw/todo-app
    Angular CLI: cli.angular.io/
    Angular: angular.io/
    Angular Material: material.angular.io
    Spring: spring.io/

Comments • 20

    VILIN PATIL 4 months ago

    Can you share an example for @RestController as i tried hitting the springboot project but it is not working

  • ganesh athmagnanam
    ganesh athmagnanam 2 years ago

    i am getting error in mvn -P bundle clean package
    Unknown option: '-p'
    Unknown option: '../todo-app-api/src/main/resources/static'
    [ERROR] Command execution failed.
    org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1)
    at org.apache.commons.exec.DefaultExecutor.executeInternal(DefaultExecutor.java:404)
    at org.apache.commons.exec.DefaultExecutor.execute(DefaultExecutor.java:166)
    at org.codehaus.mojo.exec.ExecMojo.executeCommandLine(ExecMojo.java:804)
    at org.codehaus.mojo.exec.ExecMojo.executeCommandLine(ExecMojo.java:751)
    at org.codehaus.mojo.exec.ExecMojo.execute(ExecMojo.java:313)
    at org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(DefaultBuildPluginManager.java:137)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:208)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:154)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:146)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:117)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:81)
    at org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder.build(SingleThreadedBuilder.java:56)
    at org.apache.maven.lifecycle.internal.LifecycleStarter.execute(LifecycleStarter.java:128)
    at org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:305)
    at org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:192)
    at or

  • Norbert Orosz
    Norbert Orosz 2 years ago +1

    Thumbs up! Great videos!b:)

  • kozmothewonderdog
    kozmothewonderdog 3 years ago

    Excellent tutorial, thanks so much for explaining the concept of Resources/Static - I had no idea that was where Spring looks for the html/js content.

  • John Olmstead
    John Olmstead 3 years ago

    Source Code?

  • Dev Abraham
    Dev Abraham 3 years ago

    soo awesome video. you are awesome.

  • Debashis Das
    Debashis Das 3 years ago

    Great tutorial. Keep them more coming

  • Akash Sharma
    Akash Sharma 3 years ago

    Hi Steve, this in an awesome tutorial. Very Helpful!! Thank you so much.
    I am able to build my back-end(spring boot REST api) and front-end(angular 6) as a jar. The contents of front-end are copied to static folder of my api. On hitting localhost:7782. I get an error "No mapping found for HTTP request with URI [/] in DispatcherServlet with name 'dispatcherServlet'"
    index.html of my angular code has
    I tried mapping "\" in my controller and returning "index.html" but that doesnt work. Please can you guide me as to where am I going wrong

  • Alok Kumar
    Alok Kumar 3 years ago +2

    you need to show us from the start man , Idk how did you add the angular files into the spring boot files , you need to show us that from the beginning

    • luvlust
      luvlust 3 years ago

      Hey Check this out

  • Adewunmi Adeniji
    Adewunmi Adeniji 3 years ago

    This is an excellent job, Steve.

  • kevin vu
    kevin vu 3 years ago

    Hi thank you so much for this video. I have a question, recently I've upgraded my Angular project to the version 6, but "mvn -P clean package" do not build the Angular project anymore but just the SpringBoot application.

    • kevin vu
      kevin vu 3 years ago

      Hi I finally fixed the problem :
      (ANGULAR 6)
      1. cd todo-app-ui
      2. ng build
      3. cd ../todo-app-api
      4. Replace the plugins part in the pom.xml by the following code :





      5. mvn -P bundle clean package

    • Steve FTW
      Steve FTW  3 years ago

      Without knowing exactly what changed and how it was changed it would be very hard for me to pinpoint the issue.
      My advice would be to make sure everything is still configured ok in the pom file. Everything is still pointing at the right directories etc... check the pom file for any errors and Google search any errors as that may provide you a solution.
      I also haven't touched angular 6 at all yet. So I don't know what, if anything, has changed since version 5.

    • kevin vu
      kevin vu 3 years ago

      Oh sorry I meant "mvn -P bundle clean package"

    • Steve FTW
      Steve FTW  3 years ago

      Are you forgetting to add the profile name in the command? It should be something like 'mvn -p bundle clean build' where 'bundle' is the name of the profile in our maven pom file that executes the angular project build aswell

  • Роман Немчинов

    Thank you! This is cool video!

  • Faisal Adil
    Faisal Adil 3 years ago +1

    Great vid.

  • Oleksandr Mandryk
    Oleksandr Mandryk 3 years ago

    Hi Steve, great job! Thank you!
    What would be the prefered way to deploy such app to the cloud?
    For example BitBucket Pipelines + Heroku or DigitalOcean + Dokku or something else?
    It would be great if you can make a video about deployment pipelines.

    • Steve FTW
      Steve FTW  3 years ago

      +Oleksandr Mandryk For me it's all personal preference really. You might prefer BitBucket where as I might prefer Github. They both achieve the same result. Picking your cloud provider is all about the requirement you have for you project. Look at what your project needs and what the different cloud providers give you. I do plan on making some CI/CD tutorials at some point in the future so keep an eye out for those.