Access Java REST API from Angular application...

This page is under construction.

How to consume REST API secured by Spring Security?

In this article, I am going to demostrate how we could access the REST api secured by Spring Security to display in front-end. We are going to use Spring Tool Suite (STS).
Create a new Java Project in STS and add the files into it similar to the following structure.
│         pom.xml
├───src
│   └───main
│       ├───java
│       │   └───com
│       │       └───p1coder
│       │           │   MvcConfiguration.java
│       │           │   SecurityConfig.java
│       │           │   SpringBootWebApplication.java
│       │           ├───controller
│       │           │       ProductController.java
│       │           │       RequestHandler.java
│       │           ├───domain
│       │           │       Product.java
│       │           │       UserPreference.java
│       │           └───service
│       │                   ProductService.java
│       │                   RestApiService.java
│       └───webapp
│           └───WEB-INF
│               └───views
│                   └───product
│                           display.jsp
Fill each file with the sample code from each code section.

MvcConfiguration.java

SecurityConfig.java

SpringBootWebApplication.java

ProductController.java

RequestHandler.java

ProductController.java

RequestHandler.java

Product.java

UserPreference.java

ProductService.java

RestApiService.java

display.jsp

pom.xml

After maven update the reference packages, we can execute the sample by right click on project and choosing "Run as" -> "Spring Boot App".
       In RequestHandler.java, we have REST api routes accessible by either PathVariable or RequestParam, which read the repository layer data.
       If we directly access "http://localhost:8080/getAllProducts" api, we will get authentication dialog box as we secure the route ("/getAllProducts**") in "SecurityConfig.java" file. This route is granted only to "admin" role by extending the WebSecurityConfigurerAdapter class.
       We will see the sample listing when we access "http://localhost:8080/products" page. We implement the data retrieval logic and pass api credential to REST api.
       In RestApiService.java, BasicAuthenticationInterceptor is used to authenticate while retrieving by HTTP GET execute on RestTemplate instance.
       In ProductController.java, ObjectMapper instance is used to deserialize the generic return value from data service call instantiated by @Autowired Dependency Injection.

Output

How to create CRUD feature using AngularJS?

We need the basic features for LOB applications: Adding new Records, Reading all existing records, Updating the desired record and Removing the selected record. I put together all this into one piece using AngularJS.
In real-world app, we use WebAPI for backend service. Here, just only client side code is used for demonstration.
The beauty of MVC framework is showcased.
Bootstrap is used for styling.

Source Code

Name Age

Sr	Name	Age	Action
{{$index + 1}}	{{user.Name}}	{{user.Age}}

How to create a SVG PieChart using AngularJS?

A couple of years back, I worked in a project which require data visualization component. There are a set of performance and features requirements set by the end-users. I gained so much experience and knowledge from that project. Now, I got something which is kind of similar to what I have done and did the basic charting work. Well, small program which  do something cool. A SVG chart drawn by pure JavaScript...also it's Angular Component.

Source Code

It is how it works...

How can we create a bouncing ball without using any JavaScript?

Animating the UI is an effective way to draw the attention from users and make our apps more interesting. When I was working on a Silverlight to HTML5 project, I come across many animated user interface. Our roadmap is not to use jQuery dependent code unless we have to. From this project, I learnt many things on CSS animation and it is highly efficient and effective way of doing animation.
We do not clutter the JavaScript code.
We reduce the execution overhead and save CPU cycle.
Our code will stay current and relevant as new technologies come up.
We have no dependency on any other third party library as we use pure native features from what browsers support.
***No workaround or hacky stuff.
Here I want to share a sample code which is of a little something similar to how I did UI animation.
I make it bare minimum to make it more intuitive and easy to understand.
Just copy the sample html, save it and open it in a Chrome, Firefox, IE11 or Edge browsers.
You will see the ball bouncing inside its container - without any JavaScript required.

Source code

Code in Action