Full stack application using angular 4 and spring boot

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

It is great to have server side as well as client side skills to be a full stack developer. As a developer we should be keen to learn both and setting on the environment is the starting point. In this article we are going to learn how to do full stack application using angular 4 and spring boot.

 

Full Stack Application Using Angular 4 and Spring Boot:

Objective:

Our mission is to do a full stack application using angular 4 and spring boot. A client side app will run on different port will consume the services provided by server side app.

We are going to build a server side app which gives a list of bikes and the client side app will consume it and show in a list.

Below article is assuming you have basic knowledge about java and angular 4. Don’t worry, you can browse through this website for the same ūüôā

Requirements:

Building Server Side App:

As mentioned above, we will use gradle build tool to create a spring boot app.

Navigate to File > New > Other > Gradle > Gradle Project and name it BikesApp.

The project structure created will be as seen in screenshot

  • build.gradle is our build file.
  • src/main.java : Here we will store java files

In this project we are going to write controllers and model classes.

 

 

Build.gradle:

Bike.java: This is our model class.

BikeController.java:

  • @RequestMapping¬†annotation maps the “/api/allBikes”¬†path to getAllBikes() method.
  • createBikes() method acts as a bike store and returns a list of bikes.

Application.java:

This does all the magic. We have configured it as spring boot application. Once we run this class, spring will start its internal tomcat server and starts processing requests. Once the server is up, you can visit http://localhost:8080/api/allBikes  and you should be able to get below results.

It has successfully returned a list of bikes. So server side is up and running. But we are building a full stack application using angular 4 and spring boot. Only spring boot part is done.

Building Client Side App: 

You can create a new bikes app.

If you do not know, learn how to do it using angular CLI.

Once your app structure is ready, write below code in respective files.

If this part is bit confusing please go through the above link carefully. It will help you understand how angular command line can be used to create angular apps, components, services and other angular modules. Given structure is created from components and services creating using command line. It’s fine even if you do not use command line.

Simply have below code in respective files.

 

app.component.html

app.module.ts

AppModule simply declares components and uses necessary imports.

bike.service.ts:

note that this is making a http get call to “/api/allBikes”,¬†It is returning whatever coming from server in the form of Bike[].

bikes.component.ts:

BikesComponent is simply calilng BikeService to get all bikes and store them in a Bike[].

bikes.component.html:

This page simply iterates through available bikes array and prints its information.

app-routing.module.ts:

This module simply defines the routes and corresponding components for the app.

So far so good, we are done with client side application. But it will not work as expected yet. We have to call real apis for full stack application using angular 4 and spring boot to work.

Integration Between Client and Server:

We will have to create a proxy to avoid CORS errors as we want to access localhost:8080 from localhost:4200.

Create a file proxy.conf.json at the same level as package.json, and copy below code in it.

By doing this, we are telling the node server to redirect all requests starting from “/api” to “http://localhost:8080” without using secure protocol.

Now, we have to tell the node server about the location of file. Open your package.json and change start script from¬†“start”: “ng serve”¬†to "start": "ng serve --proxy-config proxy.conf.json"¬†.¬†

That’s it. We are done creating a full stack application using angular 4 and spring boot. ¬†Fire up the node server using npm start,¬†you should see proxies are added in the logs.

Now just hit http://localhost:4200/bikes

and you should be able to see a list of bikes on the page as depicted to the right.

I hope this article helped create a full stack application using angular 4 and spring boot. In next article, we are going to use a complete end to end application using spring boot, spring data and angular as client side framework.

 

Share Button

9 comments for “Full stack application using angular 4 and spring boot

  1. Ravi
    July 13, 2017 at 10:47 am

    can you please give us the link for source code..

    • July 13, 2017 at 12:12 pm

      I will create a git repository and share the link soon.

      • Sanjaya
        September 13, 2017 at 10:22 am

        Hi Prasad,
        Did you get a chance to create the git repository and share the link

        • September 19, 2017 at 9:02 am

          Hi Sanjaya, I apologize for not sharing it yet. I have been extremely busy for last few weeks. Even though its not in git yet, if you copy code from article, it should work. Are you facing any problem with it?

  2. Wiruj
    August 10, 2017 at 11:09 am

    For who that using the previous angular app without create new one, if you stuck at cannot find api/allBikes issue, delete all thing that related to angular-in-memory-web-api. This is done for me.

    • August 10, 2017 at 11:19 am

      Hi Wiruj, am I missing something in the article? Could you please point out what is the problem? I will correct it as soon as possible.

  3. Rafi
    August 22, 2017 at 5:07 pm

    After starting the sever and visits mentioned url (http://localhost:8080/api/allBikes) below result came

    {“timestamp”:1503401831826,”status”:404,”error”:”Not Found”,”message”:”No message available”,”path”:”/api/allBikes”}

    i configured as you described above but getting 404.

    • August 25, 2017 at 5:48 pm

      can you please post any errors in console? Are you sure you have marked the controller as @RestController and @RequestMapping?

Leave a Reply

Your email address will not be published. Required fields are marked *