Play Store Application link – Java to Angular in 19 Steps – App on Google Play

Github project link – https://github.com/kuldeep101990/angular-step4

In this step, we’ll explore how to create a new component in Angular and set up routing. For Java developers, Angular routing is similar to URL mapping in a Spring Boot application, where different endpoints map to different controllers.

Step 1: Create a Component

To create a new component in Angular, use the Angular CLI. This is akin to creating a new class or controller in Java.

Command to generate a new component:

ng generate component home

Here, home is the name of the new component. This is similar to creating a HomeController in Spring Boot, where the HomeComponent will handle the logic for the “home” part of your application.

The Angular CLI automatically generates several files for the component:

1. home.component.ts: The TypeScript logic, analogous to a Java class.
2. home.component.html: The HTML template, similar to a JSP or Thymeleaf view.
3. home.component.scss: The styles, equivalent to CSS files used in Java web apps.

Step 2: Set Up Routing

In Angular, routing determines which component to display based on the URL path. This is similar to how Spring Boot controllers map specific URLs to methods.

To configure routing so that the HomeComponent is displayed when the user visits the root URL (/):

1. Open the app-routing.module.ts file in the /src/app/ folder.
2. Modify the file to include the route for the HomeComponent.

Example (Angular):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';  // Import the HomeComponent
// Define routes and map them to components
const routes: Routes = [
  { path: '', component: HomeComponent },  // Route for the HomeComponent
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],  // Register the routes
  exports: [RouterModule],                 // Export the RouterModule
})
export class AppRoutingModule {}

Java Comparison:

In Spring Boot, routing is done using annotations like @RequestMapping or @GetMapping.

Example (Java Spring Boot):

@Controller
public class HomeController {
    @GetMapping("/")
    public String home() {
        return "home";  // This returns the "home.jsp" view
    }
}

In Angular, the path '' (root URL) maps to the HomeComponent, just as @GetMapping("/") maps to the home.jsp view in Spring Boot.

Step 3: Understanding Angular Routing

Angular’s routing setup is conceptually similar to Spring Boot’s controller mappings.

Comparison of Angular and Java Routing:

By configuring Angular’s routing, you specify which UI component to display for a given URL, much like defining which method or view to use in Spring Boot.

Real-World Example: Loading the Home Page by Default

With the above setup:

1. A user navigates to http://localhost:4200/.
2. The router matches the empty path ('') and loads the HomeComponent.
3. The HomeComponent displays its template (home.component.html) as the main content.

This is similar to how Spring Boot loads a default view, such as index.html or home.jsp, using controllers and mappings.

Major Version Differences

1. Angular 5:
   • Routing was manually configured in app.module.ts before AppRoutingModule became the standard practice.
   • Java Comparison: Comparable to early Java web development where XML-based configuration was used before annotation-based configurations were introduced.
2. Angular 12:
   • Updated lazy loading syntax: loadChildren now uses dynamic import functions.
   • Java Comparison: Similar to the shift in Spring Boot from explicit @ComponentScan configurations to smarter defaults and streamlined annotations.
3. Angular 15:
   • Introduced the provideRouter function for a simpler, more functional routing setup.
   • Java Comparison: Comparable to Spring Boot’s introduction of WebMvcConfigurer for a more programmatic approach to configuring MVC components.

Summary

• Creating Components: Generating a component in Angular is like creating a Java class or controller in Spring Boot.
• Routing: Angular routing mirrors URL mapping in Spring Boot, where you define which component or controller is invoked for a specific URL.
• Default Behavior: Setting a default route in Angular is conceptually similar to defining a home page in Spring Boot.

With your first component created and routing set up, your Angular app is now ready to handle navigation between components based on URL paths—just like how a Spring Boot MVC app works!