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

In the world of web development, Angular has seen significant evolution, starting with AngularJS (1.x) and progressing to what we now know as Angular (2.x and beyond). For a Java developer, Angular’s component-based architecture can feel familiar, especially if you’ve worked with frameworks like Spring or Java EE.

Let’s break this down step-by-step by comparing AngularJS and Angular, and where possible, we’ll draw parallels with Java concepts.

Key Difference Between AngularJS and Angular

Why Angular Moved from AngularJS to Angular

1. TypeScript vs JavaScript

In AngularJS, we primarily used JavaScript. However, Angular adopted TypeScript for several reasons:

• TypeScript is a superset of JavaScript, meaning it extends JavaScript by adding features like static types, which are more aligned with Java’s strong typing system. This makes code more predictable and easier to debug.

Java Comparison: In Java, we define types explicitly like int, String, etc. Similarly, in TypeScript, we define types like number, string, etc.

Example:

// TypeScript
let studentName: string = 'John';

// Java
String studentName = "John";

TypeScript ensures that you declare the correct data type, similar to how Java works. In JavaScript (AngularJS), this wasn’t enforced, making it easier to encounter bugs.

2. MVC vs Component-Based Architecture

• AngularJS was based on the MVC (Model-View-Controller) pattern, which is similar to how Spring MVC works in Java. You would typically split your code into Controllers (handling logic), Views (displaying data), and Models (handling data).
• Angular switched to a Component-based architecture, which is more modular. Each component is like a mini-MVC, containing its template (View), logic (Controller), and sometimes data (Model).

Java Comparison: Think of Angular components like Java classes. Each class handles its functionality and can interact with other classes, much like how Angular components communicate with each other.

Angular Example:

@Component({
  selector: 'app-student',
  template: `<h2>{{student.name}}</h2>`
})
export class StudentComponent {
  student = { name: 'John' };
}

Java Comparison:

public class Student {
    private String name = "John";

    public String getName() {
        return name;
    }
}

Here, the Angular component defines the student object and uses a template to display its name, similar to how a Java class handles its attributes.

3. Directives in AngularJS vs Angular

AngularJS heavily relied on directives like ng-repeat, ng-click, ng-show, etc., which are now either replaced or enhanced in Angular:

• ng-repeat (AngularJS) → ngFor (Angular)
• ng-click (AngularJS) → (click) (Angular)
• ng-show/ng-hide (AngularJS) → [hidden] (Angular)

Example:

• AngularJS (ng-repeat):

<tr ng-repeat="student in studentsArray">
  <td>{{student.name}}</td>
</tr>

• Angular (ngFor):

<tr *ngFor="let student of studentsArray">
  <td>{{student.name}}</td>
</tr>

Java Comparison: If you think of ngFor in Angular, it’s like a for loop in Java, but it’s done directly in the HTML.

// Java loop
for (Student student : studentsArray) {
    System.out.println(student.getName());
}

4. Event Binding: ng-click vs (click)

• In AngularJS, we used ng-click to handle button clicks. In Angular, we use (click) for event binding.
• AngularJS Example:

<button ng-click="vm.toggleImage()">Toggle Image</button>

• Angular Example:

<button (click)="vm.toggleImage()">Toggle Image</button>

In Angular, the syntax feels more natural and readable. It’s like invoking a method directly, similar to how we’d call methods in Java.

Timeline of Angular Versions

The Angular framework evolved significantly after AngularJS:

1. October 20, 2010 – AngularJS (v1.x): The original version based on JavaScript.
2. September 22, 2014 – Angular 2: Major rewrite, introduced TypeScript and a component-based architecture.
3. Angular 3: Skipped due to internal versioning issues.
4. December 13, 2016 – Angular 4: More performance improvements.
5. November 1, 2017 – Angular 5: Focus on making Angular faster.
6. May 3, 2018 – Angular 6: Introduced Angular CLI for easier project setup.
7. October 2018 – Angular 7: Updates for better performance on mobile.
8. May 2019 – Angular 8: Improved lazy loading and support for modern browsers.
9. October/November 2019: Angular 9 (Ivy renderer, differential loading, TypeScript 3.8 support)
10. February 2020: Angular 10 (Strict mode by default, improved performance, new features in the router)
11. June 2020: Angular 11 (Lazy loading of routes, improved performance, new features in the forms module)
12. November 2020: Angular 12 (Improved build performance, new features in the router, new features in the animations module)
13. May 2021: Angular 13 (Improved build performance, new features in the forms module, new features in the router)
14. November 2021: Angular 14 (Standalone components, improved build performance, new features in the router)
15. May 2022: Angular 15 (Improvements to the router, new features in the forms module, new features in the animations module)
16. November 2022: Angular 16 (Improvements to the router, new features in the forms module, new features in the animations module)
17. May 2023: Angular 17 (Improvements to the router, new features in the forms module, new features in the animations module)
18. November 2023: Angular 18 (Improvements to the router, new features in the forms module, new features in the animations module)

Github Project Link – https://github.com/kuldeep101990/angular-bonus

// Complete Angular Program for Understanding Angular Concepts for Java Developers
Note - Versions setup
1- node -v = v18.20.5
2- npm -v = 10.8.2
3- ng v = Angular CLI: 19.1.2

// Step 1: Create an Angular Project (Using CLI)
// Run this command in your terminal to set up the project
// ng new angular-bonus --no-standalone
//✔ Which stylesheet format would you like to use? CSS
//✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No

// cd angular-bonus


// Step 2: Create a Component (StudentComponent)
// Command: ng generate component student

// File: src/app/student/student.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-student',
  standalone: false,
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent {
  // Similar to a Java class property
  student = { name: 'John', age: 21 };

  // Event handler similar to a Java method
  toggleAge() {
    alert(`The student's age is ${this.student.age}`);
  }
}

// File: src/app/student/student.component.html
<div>
  <h2>{{ student.name }}</h2>
  <button (click)="toggleAge()">Show Age</button>
</div>

// File: src/app/student/student.component.css
h2 {
  color: blue;
}
button {
  margin-top: 10px;
}

// Step 3: Use ngFor to Display a List of Students
// File: src/app/student/student.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent {
  students = [
    { name: 'John', age: 21 },
    { name: 'Jane', age: 22 },
    { name: 'Doe', age: 23 }
  ];
}

// File: src/app/student/student.component.html
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr *ngFor="let student of students">
    <td>{{ student.name }}</td>
    <td>{{ student.age }}</td>
  </tr>
</table>

// Step 4: Add StudentComponent to App Module
// File: src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { StudentComponent } from './student/student.component';

@NgModule({
  declarations: [
    AppComponent,
    StudentComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// Step 5: Use Student Component in App Component
// File: src/app/app.component.html
<h1>Angular Java Developer Guide</h1>
<app-student></app-student>

// Step 6: Run the Application
// Command: ng serve --open
//Note - --open will open browser automatically
// You will see the list of students displayed with a button to show age. This program demonstrates key Angular concepts in a Java developer-friendly way.

Conclusion

If you are coming from Java, you’ll find Angular’s transition from AngularJS to be more structured and type-safe, thanks to TypeScript. It aligns more closely with the type safety you’re accustomed to in Java. The component-based approach is modular and encourages better code reusability, similar to how we structure Java classes.

By learning Angular, you’ll be extending your full-stack development skills, giving you a strong foundation in modern web development while leveraging the powerful features of JavaScript and TypeScript.

Recent posts: