The Journey of an API Call: From Angular to Spring Boot

Alright, let’s dive deep into each step of the process from an Angular application making a GET API call to a Spring Boot backend, covering everything from DNS resolution to the response being displayed on the Angular UI. I'll cover the entire flow with as much detail as possible.

1. Angular Makes an API Request

-> Using the HttpClient Library:

• In Angular, you create a service (service.ts) that uses the HttpClient library to make HTTP requests. For example:

this.httpClient.get('https://indepthcoding.com/rest/getAllUsers');        

• What happens internally: The HttpClient library provides a simplified API for making HTTP requests. It abstracts the complexities of XMLHttpRequest or Fetch API under the hood. When you call get(), it prepares an HTTP GET request.

-> Creating the HTTP Request:

• Method: GET
• URL: https://indepthcoding.com/rest/getAllUsers
• Headers: Any default headers like Accept: application/json
• Body: Not required for GET requests.

2. DNS Resolution

-> Breaking Down the URL:

• The browser extracts the domain part from the full URL: https://indepthcoding.com.
• Domain: indepthcoding.com
• Path: /rest/getAllUsers
• The browser doesn’t need the entire URL for DNS resolution, only the domain is required.

-> How DNS Works:

• The browser first checks its local DNS cache to see if it already has the IP address for indepthcoding.com.
• If not found, it queries the DNS resolver configured on your system (often provided by your ISP or Google DNS).
• The DNS resolver checks: -

i. Local Cache: If it knows the IP.

ii. Root DNS Server: If needed, it asks the root server where to find .com domains.

iii. TLD Server: The .com server directs it to the authoritative DNS server for indepthcoding.com.

iv. Authoritative Server: Returns the IP address for indepthcoding.com.

• Result: DNS provides the IP address of the server hosting indepthcoding.com.

3. Establishing a Connection

-> TCP/IP Connection:

• With the IP address in hand, the browser initiates a TCP connection to the server.
• Three-Way Handshake:

i. SYN: The browser sends a SYN packet to the server.

ii. SYN-ACK: The server responds with a SYN-ACK.

iii. ACK: The browser sends an ACK, and the connection is established.

-> HTTPS Connection (TLS Handshake):

• Since the URL uses https://, the browser initiates a TLS handshake to establish a secure connection.
• Steps in TLS Handshake:

i. Client Hello: The browser sends supported encryption algorithms to the server.

ii. Server Hello: The server responds with a chosen encryption algorithm and its SSL certificate.

iii. Certificate Verification: The browser verifies the server’s certificate against trusted CAs.

iv. Key Exchange: Both the browser and server exchange keys to establish a secure session.

v. Finished: A secure encrypted connection is now established.

4. Sending the HTTP Request

-> Browser Sends the GET Request

• Over the established secure connection, the browser sends the HTTP GET request to the server’s IP address:

GET /rest/getAllUsers HTTP/1.1
Host: indepthcoding.com
Accept: application/json        

• What happens at the server: The server (where your Spring Boot application is deployed) receives this request on the port (usually 443 for HTTPS).

5. Tomcat (Servlet Container) Receives the Request

-> Tomcat’s Role:

• Tomcat is a servlet container that hosts your Spring Boot application. It listens on a specific port (typically 8080) for incoming HTTP requests.
• Connector: Tomcat’s HTTP connector receives the request. If it’s an HTTPS request, it handles SSL termination (decrypts the request).

->Mapping to the Servlet:

• Request Mapping: Tomcat has a web.xml or internal mappings to determine which servlet should handle the request. In Spring Boot, this is usually handled by the DispatcherServlet.
• DispatcherServlet: This servlet is the front controller for Spring MVC. It intercepts all incoming requests and delegates them to appropriate controllers.

6. DispatcherServlet Handles the Request

-> Finding the Controller:

• The DispatcherServlet checks the URL /rest/getAllUsers and matches it against the mappings defined by the @RequestMapping or @GetMapping annotations in your controllers.
• Controller Class: It finds the appropriate controller class that should handle this request.

-> Dependency Injection (DI):

• Spring Context: Spring Boot uses a context (ApplicationContext) that manages all the beans (objects) in your application.
• Creating Beans: When the application starts, Spring scans your classes and creates beans for components, services, repositories, etc., as needed.
• Injecting Beans: When the controller is identified, Spring injects the necessary dependencies (like a repository) into the controller using DI. The controller doesn’t create these objects; they are provided by Spring.

-> Controller Method Execution:

• Method Selection: Within the controller, the exact method that matches the HTTP method (GET) and path (/rest/getAllUsers) is executed.
• Calling the Repository: The controller method might call a repository to fetch data from the database.

7. Repository Accesses the Database

-> Database Connection Management:

• Connection Pooling: Spring Boot often uses a connection pool (like HikariCP) to manage connections to the database. When the application starts, a pool of connections is created and maintained.
• Lazy Initialization: Connections might be lazily initialized (created when first needed).

-> Executing a Query:

• The repository uses the EntityManager or JdbcTemplate to create and execute SQL queries.

List<User> findAll();        

• Query Example: If using JPA, the repository might automatically generate SQL based on method names, like:
• SQL Execution: This method translates to a SQL query like

SELECT * FROM users;        

• The database executes the query and returns the result set.

-> Mapping Results:

• ORM (Object-Relational Mapping): If using JPA, the results are automatically mapped to Java objects (entities).
• Result Handling: The repository returns these objects (e.g., a list of User objects) to the controller.

8. Returning the Response

-> Controller Returns Data:

• The controller receives the list of users from the repository.
• JSON Conversion: If the method is annotated with @ResponseBody, Spring automatically converts the list of users into a JSON format.

-> DispatcherServlet Prepares the Response:

• Response Handling: The DispatcherServlet takes the JSON response and attaches it to the HTTP response.
• Status Code: Typically, a status code 200 OK is set.

9. Tomcat Sends the Response

-> Packaging the HTTP Response:

• Tomcat receives the HTTP response from the DispatcherServlet and packages it into a format suitable for sending back to the client.
• Response Format:

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: <length>

[ { "id": 1, "name": "Pratyush Raj" }, ... ]        

-> Sending Back Over the Secure Connection:

• Tomcat sends the response over the established TCP connection back to the browser.
• If the connection is HTTPS, Tomcat re-encrypts the data before sending it.

10. Browser Receives the Response

-> Decryption and Parsing:

• The browser receives the encrypted response, decrypts it, and parses the JSON data.
• JSON Parsing: The browser parses the JSON string into a JavaScript object.

-> HttpClient Resolves the Promise:

• The Angular HttpClient receives the response and resolves the promise or observable with the JSON data.
• The data is now available in your Angular application.

11. Displaying the Data on the UI

-> Binding the Data:

• The data from the API call is often bound to a component in Angular.
• Data Binding: Angular automatically updates the UI with the new data.

-> Rendering on the Screen:

• Finally, the browser renders the updated UI, showing the list of users fetched from the Spring Boot server.

This process involves several layers, from DNS resolution and HTTP requests to the internal workings of Spring Boot, including Tomcat, DispatcherServlet, Dependency Injection, database access, and the final delivery of the response to the Angular application. Each step is crucial for the successful retrieval and display of data on the client-side.