Rewriting AngularJS directives as Angular components

Rewriting AngularJS Directives as Angular Components

As AngularJS (version 1.x) evolves towards Angular (version 2+), one of the most significant changes in the framework is the shift from directives to components. Directives were central to AngularJS for creating reusable pieces of UI and encapsulating logic. However, Angular’s architecture is centered around components which are much more powerful and maintainable.

Migrating from AngularJS directives to Angular components may seem daunting, but with a structured approach, it can be done effectively. This article provides a detailed guide on how to rewrite AngularJS directives as Angular components, highlighting the key differences between the two and step-by-step instructions.

---

1. Key Differences Between AngularJS Directives and Angular Components

Before diving into the migration process, it’s important to understand the differences between directives in AngularJS and components in Angular:

Feature	AngularJS Directives	Angular Components
Purpose	Create reusable UI elements	Encapsulate both UI and behavior
Template	Can have templates in the directive itself	Templates are part of components
Controller	Controllers are used alongside directives	Components directly manage their logic
View and Logic	Separated (directives don’t have logic)	View and logic are combined in components
Syntax	Custom HTML element syntax	Standard HTML tag syntax (e.g., <app-root>)

---

2. Steps for Rewriting AngularJS Directives as Angular Components

Step 1: Identify the Directive’s Purpose and Structure First, review the AngularJS directive to determine its role in your application. AngularJS directives are typically used to:

• Manipulate DOM elements
• Bind data to views
• Create reusable UI components

In Angular, components take on this same role, but with a more powerful, flexible approach.

Example AngularJS Directive:

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<div>{{ message }}</div>',
        controller: function($scope) {
            $scope.message = "Hello from Directive!";
        }
    };
});

Step 2: Set Up Angular Component Scaffold In Angular, components are defined using @Component decorator. The @Component decorator takes care of the following:

• The selector defines how to use the component in the HTML.
• The template contains the HTML code.
• The styleUrls or styles define the CSS for the component.
• The class contains the logic for the component.

Here’s how the myDirective example would be rewritten in Angular:

Example Angular Component:

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

@Component({
  selector: 'app-my-directive',
  template: `<div>{{ message }}</div>`,
  styleUrls: ['./my-directive.component.css']
})
export class MyDirectiveComponent {
  message: string = "Hello from Component!";
}

Step 3: Replace $scope with Class Properties In AngularJS, $scope was used to define variables that are shared between the controller and the view. Angular components use class properties instead of $scope.

In the AngularJS example:

$scope.message = "Hello from Directive!";

In Angular:

message: string = "Hello from Component!";

Step 4: Convert Directive Bindings (if any) to @Input and @Output In AngularJS, directives can have attributes that control their behavior (e.g., ngModel, ngIf). In Angular components, these bindings are managed with @Input (for receiving data from the parent) and @Output (for emitting events).

Example Directive with Binding:

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            message: '='
        },
        template: '<div>{{ message }}</div>'
    };
});

Converted Angular Component:

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

@Component({
  selector: 'app-my-directive',
  template: `<div>{{ message }}</div>`,
  styleUrls: ['./my-directive.component.css']
})
export class MyDirectiveComponent {
  @Input() message: string = "";
}

Step 5: Replace AngularJS Events with Angular Event Binding Angular uses the Event Binding syntax ((event)="method()") to handle events, replacing AngularJS’s $scope-based event system.

Example AngularJS Directive with Event Handling:

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            onClick: '&'
        },
        template: '<button ng-click="onClick()">Click me</button>'
    };
});

Converted Angular Component:

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

@Component({
  selector: 'app-my-directive',
  template: `<button (click)="handleClick()">Click me</button>`,
  styleUrls: ['./my-directive.component.css']
})
export class MyDirectiveComponent {
  @Output() onClick: EventEmitter<void> = new EventEmitter();

  handleClick() {
    this.onClick.emit();
  }
}

Step 6: Handle Dynamic Content with ngOnChanges If the directive is dealing with dynamic content or responding to changes in inputs, in Angular, this is managed using ngOnChanges.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-my-directive',
  template: `<div>{{ message }}</div>`,
  styleUrls: ['./my-directive.component.css']
})
export class MyDirectiveComponent implements OnChanges {
  @Input() message: string = "";

  ngOnChanges(changes: SimpleChanges) {
    if (changes.message) {
      console.log("Message changed:", changes.message.currentValue);
    }
  }
}

Step 7: Test and Refactor the Component Once the component has been rewritten, it’s time to test its functionality in isolation and within the larger application. Make sure the component behaves as expected and refactor if necessary.

---

3. Advantages of Angular Components Over AngularJS Directives

• Simplicity: Angular components combine the view and logic in a single unit, making them easier to understand and maintain.
• Reusability: Components in Angular can be easily reused across the application and come with powerful tools like @Input, @Output, and lifecycle hooks.
• Better Performance: Angular’s change detection system and improved rendering with zone.js lead to better performance than AngularJS.
• Improved Testing: Angular components are easier to test due to their encapsulated nature.