AngularJS ng-repeat Directive render list objects from RestAPI with SpringBoot

In the tutorial, JavaSampleApproach will show you how to use AngularJS ng-repeat Directive to display list objects from SpringBoot RestAPI.

Related posts:
AngularJs NgRepeat $Index to select data | SpringBoot

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 ng-repeat Directive - project structure

Step to do:
– Create Spring Boot project
– Create data models
– Create Web Controller to provide web view
– Create RestController for GET request
– Create an index.html view
– Create angularJs Application
– 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 ng-repeat Directive - dependencies

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

2. Create data models

– Create Address model:

– Create Customer model that includes Address model:

3. Create Web Controller to provide web view

4. Create RestController for GET request

5. Create an index.html view

Using ng-repeat to display a list of customers:

6. Create AngularJs Application

Get a list customers from SpringBoot server by getController controller, then save results to listCustomers model:

7. Run & Check results

Run the project with SpringBoot mode.
-> Result:

AngularJS ng-repeat Directive - results

III. Sourcecode

SpringBootAngularJsNgRepeatDirective

By grokonez | October 24, 2017.



Related Posts


Got Something To Say:

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

*