Angular vs. AngularJS: Key Differences and Syntax Changes

AngularJS, the first version of Angular, revolutionized the way web applications were built by introducing two-way data binding and a modular approach. However, as web development needs evolved, Angular (commonly referred to as Angular 2+ or simply Angular) was developed to address performance issues, provide a more modern framework, and introduce new features. This article explores the key differences and syntax changes between AngularJS and Angular, highlighting the improvements and new concepts introduced in Angular.

Directives

AngularJS: In AngularJS, directives are used to extend HTML and add behavior to elements. One of the most commonly used directives is ngIf.

<!-- AngularJS -->
<div ng-if="isVisible">This is visible</div>

Angular: In Angular, structural directives like ngIf are prefixed with an asterisk (*). This is because Angular uses a different syntax to differentiate between different types of directives.

<!-- Angular -->
<div *ngIf="isVisible">This is visible</div>

Data Binding

AngularJS: AngularJS uses double curly braces ({{ }}) for data binding, which allows you to display data in the view.

<!-- AngularJS -->
<p>{{ message }}</p>

Angular: Angular also uses double curly braces for interpolation, but it offers more types of data binding: interpolation, property binding, event binding, and two-way binding.

<!-- Angular -->
<p>{{ message }}</p>
<!-- Property Binding -->
<input [value]="username">
<!-- Event Binding -->
<button (click)="doSomething()">Click Me</button>
<!-- Two-Way Binding -->
<input [(ngModel)]="username">

Controllers vs. Components

AngularJS: Controllers in AngularJS are used to control the data of AngularJS applications. They are defined using the controller method.

// AngularJS
app.controller('MyController', function($scope) {
    $scope.message = "Hello, World!";
});

Angular: In Angular, components are the building blocks of the application. A component consists of a TypeScript class, an HTML template, and optional styles. Components are more powerful and flexible than controllers.

// Angular
import { Component } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: '<p>{{ message }}</p>',
  styles: ['p { color: blue; }']
})
export class MyComponent {
  message = "Hello, World!";
}

Services and Dependency Injection

AngularJS: Services in AngularJS are singletons that are instantiated only once during the lifetime of the application. They are typically used to share data and functions across the application.

// AngularJS
app.service('MyService', function() {
    this.getMessage = function() {
        return "Hello, World!";
    };
});

Angular: Angular uses a more robust dependency injection system. Services are provided in modules and can be injected into components, other services, and more.

// Angular
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class MyService {
  getMessage() {
    return "Hello, World!";
  }
}

Modules

AngularJS: AngularJS uses modules to organize the application. Modules are defined using the module method.

// AngularJS
var app = angular.module('myApp', []);

Angular: Angular applications are also organized into modules. The NgModule decorator is used to define a module. Modules can import other modules, declare components, and provide services.

// Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTTP Requests

AngularJS: In AngularJS, the $http service is used to make HTTP requests.

// AngularJS
app.controller('MyController', function($scope, $http) {
    $http.get('/api/data')
        .then(function(response) {
            $scope.data = response.data;
        });
});

Angular: In Angular, the HttpClient service is used to make HTTP requests. It provides a more powerful and flexible API compared to $http.

// Angular
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: '<p>{{ data }}</p>'
})
export class MyComponent implements OnInit {
  data: any;
  constructor(private http: HttpClient) { }
  ngOnInit() {
    this.http.get('/api/data')
      .subscribe(response => {
        this.data = response;
      });
  }
}

Conclusion

Angular introduces significant improvements over AngularJS, providing better performance, a more modular and component-based architecture, enhanced dependency injection, and a powerful CLI. The syntax changes, such as the introduction of asterisk-prefixed structural directives and new data binding methods, reflect these advancements. While AngularJS laid the foundation for modern web development, Angular takes it a step further, making it a more suitable choice for developing large-scale, maintainable applications.