AngularJS initialize data from RestAPIs for the first loading page | SpringBoot

In the tutorial, JavaSampleApproach will show you the way AngularJS initialize data from RestAPIs for the first loading page with SpringBoot.

Related posts:
AngularJs Table display Data Objects from RestAPIs remote | SpringBoot & BootStrap
AngularJS Select Boxes Using ng-options to display data from SpringBoot RestAPIs

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 initialize data for the first loading page 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 initialize data for the first loading page with SpringBoot RestAPIs- add 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 Solution 1

– Create AngularJs Application:

– Create an index.html view:

3.2 Solution 2

–> Using ng-init.

– Create angularJs Application:

– Create an index.html view:

4. Run & Check results

Run the project with SpringBoot mode.
-> Result:

AngularJs initialize data for the first loading page with SpringBoot RestAPIs- result

III. Sourcecode

SpringBootAngularJsInitializeDataFromRestAPIs

By JavaSampleApproach | October 25, 2017.

Related Posts


Got Something To Say:

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

*