Refactoring Angular and Java Application code

-

 In This topic we will refactor our code for better readability.

Refactor JAVA Code :

Let's start with JAVA Code so you can see in previous few topic we have added cross origin annotation in each controller to call API from Angular application. what will happen if you have lots of Controller then there will a chance we miss adding it.

So what we will do ? For now we will add a bean in RestWebserviceApplication.class which will handle cross origin. We are going to use WebMvcConfigurer and will override addCorsMappings as per our project needs.

WebMvcConfigurer : It is an Interface which is used to customized JAVA Configuration for spring MVC enabled project.

addCorsMappings/CorsRegistry : It is a default method provided by WebMvcConfigurer to configure global cross origin request.

Update your code as shown below and once you add this you can remove CrossOrigin annotation from Controller class. 

Check from UI if your application is working fine after this change.

Refactor Angular Code : 

As we have defined the URL in method of service which is not the correct way so we will create a JSON file "environment.json" in which we will define all URL that we are going to use. we will create one class in environment.ts" which will read JSON file and set the URL's and then we will use this in place of direct URL call.

so create a JSON file as shown below


Now add below classes in environment.ts file:



After adding these code you have to add APP_INITIALIZER in app.module.ts which is used as Dependency Injection token.
The provided functions are injected at application startup and executed during app initialization. If any of these functions returns a Promise or an Observable, initialization does not complete until the Promise is resolved or the Observable is completed.
The function that we create is executed during the application bootstrap process, and the needed data is available on startup.
APP_INITIALIZER is present in @angular/core package.

Add below code in app.module.ts 

After adding this now you are able to use EnvironmentConstant in place of direct URL change code as below in all services.



Now if you go http://localhost:4200/loginand refresh it in Inspect > Network tab you can see environment.json file gets loaded. As I earlier said that the function that we create is executed during the application bootstrap process, and the needed data is available on startup. 

Screenshot Below:

Now check your application is working fine or not.

From Now onwards we will add JAVA API URL in the bean that we created in RestWebserviceApplication.class.

In Angular we will add API URL's in Environment.json file and also update Environment.ts file.

  

Previous Topic                                                                                 Next Topic

Comments

Post a Comment

Popular posts from this blog

Logout Component and Angular Router (CanActivate)

-
Image
  In this topic we will create our logout component for our application and also remove session object if user is logged out as well we will see the use of Angular Router method CanActivate. Now Let's create logout component using command "ng generate component logout"  once you create the logout component you have to add it in routing file i.e. app-routing.module.ts and add it before ** as ** will be the last thing in routing. After adding it here you can check it by clicking on logout button in your localhost URL. Now we will remove user from session storage for that we need to add one method in authentication service and use that method in logout component by dependency Injection. Till Now we have done the login, menu, error, logout so you can check it by going through localhost. but still we have one problem i.e. if we go to http://localhost:4200/welcome/dummy or todo or any menu item without logged in it is working so what do we need to do here? we need something whi
Read more

Installing Node Js (NPM) & Visual Studio Code

-
Image
1. For Installing Node Js, Search Download Node Js or go to  Download Node Js  , Based on your operating System Download the respective files. Once You download and install it you can verify it by opening Terminal or Command Prompt and typing "npm -v" for npm version and "node -v" node version as shown below: 2. For Installing Visual Studio Code Search Download Visual Studio Code in Google or go to  Download Visual Studio Code Based on your Operating System download Respective files and install it, it will take few minutes to install. After installation open visual Studio Code it will look like below                                                                                                                                             Next Topic (Install Angular CLI)
Read more

Importing Project in Visual Studio Code

-
Image
 In Previous section  Angular Application with Angular CLI we have created project todoList now we will import it in our visual Studio Code. we can do it by drag and drop folder in visual studio or by using open folder from visual Studio code as shown below: open readme.md file you can see the project details like host, cli version and other things. Previous Topic(Create Angular Application)                                           Next Topic (Angular CLI Command)
Read more