Html5 DateTime + AngularJs + SpringBoot @JsonFormat example

In the tutorial, JavaSampleApproach will show you how to build an web application with Html5 DateTime + AngularJs + SpringBoot @JsonFormat.

Related posts:
HTML 5 – Web LocalStorage + JQuery to Cache data from SpringBoot RestAPIs
AngularJs POST-GET Nested Objects to SpringBoot server

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.8.1.RELEASE
– Html 5
– AngularJs
– Bootstrap
– Spring Boot – 1.5.7.RELEASE

II. Html5 DateTime + AngularJs + SpringBoot @JsonFormat

For working with time input, Html5 support a set of new Input Types:

  1. date
  2. datetime-local
  3. time
  4. week

– AngularJs supports filter date to binding with view:

Json don’t have Date type. So when transferring data with RestAPIs, we need convert Date javascript objects to Json String, and all thing will be done with Json.stringify().

-> Transferred data like below:

Html5 DateTime + AngularJs + SpringBoot @JsonFormat - save data request

– When recieving Json data from response, we need convert String object to Date javascript objects as below:

Html5 DateTime + AngularJs + SpringBoot @JsonFormat - get all data requests

– From SpringBoot server, for binding Json data with Date type, we need use @JsonFormat annotation, see below code:

Goal:
– Create a SpringBoot project as below:

Html5 DateTime + AngularJs + SpringBoot @JsonFormat - project structure

-> input data:
Html5 DateTime + AngularJs + SpringBoot @JsonFormat - input data
Html5 DateTime + AngularJs + SpringBoot @JsonFormat - add input data

-> post data:
Html5 DateTime + AngularJs + SpringBoot @JsonFormat - save data request

-> get data:
Html5 DateTime + AngularJs + SpringBoot @JsonFormat - get all data results

III. Practice

Step to do:
– Create Spring Boot project
– Create data model
– Create Web Controller to provide web view
– Create RestController for GET/POST request
– Create an index.html view
– Implement AngularJS GET/POST data

1. Create Spring Boot project

Use SpringToolSuite to create a SpringBoot project SpringBootHtml5DateTimeAngularJs with dependencies:

2. Create data model

– Create LogTime model with JsonFormat:

3. Create Web Controller to provide web view

4. Create RestController for GET/POST request

5. Create an index.html view

6. Implement AngularJS GET/POST data

IV. Sourcecode

SpringBootHtml5DateTimeAngularJs

By JavaSampleApproach | November 13, 2017.


Related Posts


Got Something To Say:

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

*