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

21 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?

  4. Marc
    September 26, 2017 at 11:19 am

    Hello,

    I receive a strange
    /bikes/node_modules/@angular/material/material”‘ has no exported member ‘MaterialModule’

    while my app.module.ts seems to be yours.

    I had also to do these installations to start this project, after having followed the “, learn how to do it using angular CLI” link :
    npm install –save @angular/material
    npm install –save @angular/animations
    npm install –save @angular/cdk

    And I had also to rename “bikes” to “bike” many times because a command create a “bike” package and many sources search for components in a bike folder.

    Regards

  5. Gil
    October 2, 2017 at 1:56 am

    1) I believe that the Angular portion lacks the Bike class, defined within bikes.ts, as follows:

    export class Bike {
    id: number;
    model: string;
    manufacturer: string;
    }

    2) Prasad, can you please adjust your example to address the materials issue (already brought up by Marc, as apparently every new reader will address that issue; today it’s me.

    • Gil
      October 2, 2017 at 3:34 am

      Here is how I’ve addressed the lack of material things; all works fine:

      1) in app.module.ts removed all material related portions, as follows:
      /////import { MaterialModule, MdList, MdListItem } from ‘@angular/material’
      @NgModule({
      imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      ///// MaterialModule.forRoot(),
      AppRoutingModule
      ],….

      2) modified bikes.compomemt.html to use html unordered list, as follows:
      Bikes
      <!–

      {{bike.id}} {{bike.manufacturer}} {{bike.model}}

      –>

      {{bike.id}} {{bike.manufacturer}} {{bike.model}}

      Now I can see the results on the http://localhost:4200/bikes screen (copy & paste ignores the ul indicator):

      Bikes

      1 Honda CBR250R
      2 Kaswasaki Ninja250R
      3 Yamaha R1
      4 Harley Davidson FatBoy

    • October 3, 2017 at 11:36 am

      Hi Gil, thank you for your comment. I will try my best to resolve it this weekend. Hectic schedule going on these days as 🙁

  6. Thiru
    October 7, 2017 at 3:42 pm

    Hi Prasad,

    Thanks for the nice tutorial.

    I didn’t see the integration between the spring controller and angular UI. At last the angular UI only i am seeing in this url http://localhost:4200/.

    Can you please explain the BikeController data is used in angular UI or not?

    Thanks in advance

    • October 10, 2017 at 4:58 pm

      Hi Thiru, thank you for your comment.

      You can notice that we are calling http service through BikeService. This services uses BikeController. The data you are viewing on UI is from BikeController itself.

      • Thiru
        October 12, 2017 at 11:47 am

        Thanks for your reply prasad.

        I was modified the bike.service.ts file, due to material module missing. Once I done changes in the bike service and bike component files, i can able to see the data from rest controller.

        I modified little in packages.json to make the promise available in bike service components.

        Thanks for you.

        • October 12, 2017 at 3:52 pm

          So is your full stack application working now? Did it solve the problem?

  7. Thiru
    October 12, 2017 at 11:35 pm

    Yes Prasad. It is working, thank you.

  8. Dominik
    October 24, 2017 at 3:42 am

    Hello, I have a problem with fireing up the node server using npm start. Namely I have an error: Cannot find module ‘@angular/material’. Do you know maybe what can I do in this case?

    • Dominik
      October 24, 2017 at 4:01 am

      Hello again, I didn’t see your before comment, I resolve problem 🙂

Leave a Reply

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