AngularJS Select Boxes Using ng-options to display data from SpringBoot RestAPIs

In this tutorial, JavaSampleApproach will show you how to implement a web application which uses AngularJS Select Boxes Using ng-options to display data from SpringBoot RestAPIs.

Related posts:
AngularJS initialize data from RestAPIs for the first loading page | SpringBoot
AngularJs Http Delete Data from RestAPIs remote | SpringBoot & Bootstrap

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– AngularJS
– Bootstrap
– Spring Boot – 1.5.7.RELEASE

II. Practice

In the tutorial, we build a SpringBoot project as below:

AngularJS Select Boxes Using ng-options with SpringBoot RestAPIs - project structure

Step to do:
– Create Spring Boot project
– SpringBoot RestAPIs development
– AngularJS and Frontent development
– Run & Check results

1. Create Spring Boot project

Using Spring Tool Suite to create a Spring Starter Project. Add project info, then press Next for needed dependencies:

AngularJS Select Boxes Using ng-options with SpringBoot RestAPIs - dependencies

After creating project successfully, open pom.xml file and check needed dependencies:

2. SpringBoot RestAPIs development
2.1 Create data models

– Create Address model:

– Create Customer model that includes Address model:

2.2 Create Web Controller to provide web view

2.3 Create RestController for GET request

3. AngularJS and Frontent development
3.1 Create AngularJs Application

3.2 Create an AngularJS Select Boxes Using ng-options

4. Run & Check results

Run the project with SpringBoot mode.
-> Result:

AngularJS Select Boxes Using ng-options with SpringBoot RestAPIs

AngularJS Select Boxes Using ng-options with SpringBoot RestAPIs - return arrays

III. Sourcecode

SpringBootAngularJsSelectBoxes

By grokonez | November 1, 2017.



Related Posts


2 thoughts on “AngularJS Select Boxes Using ng-options to display data from SpringBoot RestAPIs”

  1. Hi,

    I want to know how can i publish my spring boot rest api application and my Angular 4 application in my private network. The point is that i’m creating two applications, one for front-end (based on Angular 4), and other the rest-api that will consume through my angular front-end app.

    1. Hi,

      1. You need build Angular4 app to production image by commandline: ng build --env=prod
      Then you got a /dist folder.

      Now you put the files of /dist on root folder of your Server.

      2. Build and run the SpringBoot server again with commands:
      – Build: mvn clean install
      – Run: mvn spring-boot:run

      3. Make sure you have enable cross-site request in SpringBoot server.
      Refer more at: Spring CORS example using @CrossOrigin – Spring Boot

      Regards,
      JSA

Got Something To Say:

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

*