Handling $scope and moving to Angular component-based architecture

In AngularJS, $scope was heavily used for data binding, event handling, and inter-component communication. However, in Angular (2+), $scope is completely removed, and a component-based architecture is used instead.

Migrating from $scope to Angular’s component-based approach requires refactoring controllers, directives, and services. This guide will help you replace $scope with modern Angular concepts like TypeScript classes, Input/Output decorators, RxJS, and Services.

---

1. Why Move Away from $scope?

Problems with $scope in AngularJS:

• Complex two-way data binding affects performance.
• $scope creates tight coupling, making unit testing harder.
• Difficult debugging due to implicit dependency injection.
• No modularity, leading to large, unmanageable controllers.

Benefits of Angular Component-Based Architecture:

• Uses TypeScript classes, making code modular and reusable.
• One-way data binding improves performance.
• RxJS Observables provide better async handling.
• Scoped encapsulation prevents global scope pollution.

---

2. Replacing $scope in Controllers with Angular Components

AngularJS Controller (Using $scope)

angular.module('myApp', [])
  .controller('MyController', function ($scope) {
    $scope.message = 'Hello from AngularJS!';
    
    $scope.updateMessage = function () {
      $scope.message = 'Updated Message!';
    };
  });

Equivalent Angular Component (Without $scope)

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <h2>{{ message }}</h2>
    <button (click)="updateMessage()">Update Message</button>
  `,
})
export class MyComponent {
  message: string = 'Hello from Angular!';

  updateMessage() {
    this.message = 'Updated Message!';
  }
}

Uses a TypeScript class with this.message instead of $scope.message.
Uses Angular’s template binding {{ message }} instead of $scope.

---

3. Replacing $scope Events with Angular Input/Output Decorators

AngularJS (Using $scope.$emit and $scope.$on)

angular.module('myApp', [])
  .controller('ParentController', function ($scope) {
    $scope.$on('messageUpdated', function (event, data) {
      $scope.receivedMessage = data;
    });
  })
  .controller('ChildController', function ($scope) {
    $scope.sendMessage = function () {
      $scope.$emit('messageUpdated', 'Hello from Child!');
    };
  });

Angular (Using @Input and @Output)

Parent Component (Receives Data)

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h2>Parent Component</h2>
    <p>Received Message: {{ receivedMessage }}</p>
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
  `,
})
export class ParentComponent {
  receivedMessage: string = '';

  receiveMessage(message: string) {
    this.receivedMessage = message;
  }
}

Child Component (Sends Data)

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h3>Child Component</h3>
    <button (click)="sendMessage()">Send Message to Parent</button>
  `,
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from Child!');
  }
}

Replaces $scope.$emit with @Output and EventEmitter.
Uses one-way data flow for better modularity.

---

4. Replacing $scope Two-Way Binding with Angular Forms

AngularJS (Two-Way Binding with ng-model)

<input type="text" ng-model="userName">
<p>Hello, {{ userName }}</p>

Angular (Two-Way Binding with ngModel)

<input type="text" [(ngModel)]="userName">
<p>Hello, {{ userName }}</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  userName: string = '';
}

Uses [(ngModel)] for two-way binding without $scope.
Requires importing FormsModule in app.module.ts.

---

5. Replacing $scope Services with Angular Dependency Injection

AngularJS Service Using $scope

angular.module('myApp').service('DataService', function () {
  this.getData = function () {
    return 'Data from Service';
  };
});

Angular Service Using Dependency Injection

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return 'Data from Service';
  }
}

Using Service in a Component

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  template: `<h3>{{ data }}</h3>`,
})
export class DataComponent {
  data: string;

  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

Replaces $scope service logic with Angular’s Dependency Injection.
Makes services reusable and modular.

---

6. Replacing $watch with RxJS Observables

AngularJS (Using $watch)

$scope.$watch('user.name', function (newValue, oldValue) {
  console.log('User name changed from', oldValue, 'to', newValue);
});

Angular (Using RxJS BehaviorSubject)

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-user',
  template: `<input type="text" (input)="updateName($event)" /><p>{{ userName$ | async }}</p>`,
})
export class UserComponent {
  private userName = new BehaviorSubject<string>('John');
  userName$ = this.userName.asObservable();

  updateName(event: any) {
    this.userName.next(event.target.value);
  }
}

Replaces $watch with RxJS Observables for better async handling.
Improves performance and avoids unnecessary digest cycles.