Skip to main content

Angular Overview

Angular Overview.

Introduction​

Angular is a popular open-source JavaScript framework developed and maintained by Google. It is used for building dynamic web applications and is based on TypeScript, a superset of JavaScript. Angular provides a structured and efficient way to develop single-page applications (SPAs) by separating concerns and promoting reusable components.

History​

Angular was initially released as AngularJS in 2010 by Misko Hevery and Adam Abrons. It gained considerable popularity due to its declarative approach, two-way data binding, and dependency injection. However, AngularJS had some limitations, such as performance issues and a complex learning curve. To overcome these challenges, the Angular team decided to rewrite the framework from scratch, resulting in the release of Angular 2 in 2016. Since then, Angular has evolved with regular updates and has become one of the most widely used web frameworks.

Features​

1. Components and Templates​

Angular follows a component-based architecture, where applications are built using reusable components. A component consists of a TypeScript class that defines the component's behavior and an associated HTML template that defines its structure. Components encapsulate functionality and can communicate with each other through inputs and outputs.

// Example of a simple component
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `
    <h1>Hello, {{ name }}!</h1>
  `
})
export class HelloComponent {
  name = 'Angular';
}

2. Directives​

Angular provides various built-in directives to extend HTML with additional functionality. Directives allow you to manipulate the DOM, control rendering, and add behavior to elements. Two common types of directives are structural directives (e.g., ngIf and ngFor) and attribute directives (e.g., ngStyle and ngClass).

<!-- Example of using ngIf directive -->
<div *ngIf="isVisible">Visible content</div>

3. Data Binding​

Angular offers powerful data binding capabilities that allow you to effortlessly synchronize data between the component and the template. There are four types of data binding in Angular:

  • Interpolation ({{ }}) for one-way binding from component to template.
  • Property binding ([ ]) for one-way binding from component to template.
  • Event binding (( )) for one-way binding from template to component.
  • Two-way binding ([( )]) for two-way binding between component and template.
<!-- Example of using interpolation and event binding -->
<p>{{ message }}</p>
<button (click)="showAlert()">Click me</button>

4. Dependency Injection​

Angular has a built-in dependency injection (DI) system that simplifies the management of dependencies between components. DI allows you to declare dependencies in a component's constructor, and Angular will automatically instantiate and inject the required instances.

// Example of using dependency injection
import { Component, Injectable } from '@angular/core';

@Injectable()
export class DataService {
  getData(): string {
    return 'Some data';
  }
}

@Component({
  selector: 'app-example',
  template: `
    <p>{{ data }}</p>
  `,
})
export class ExampleComponent {
  constructor(private dataService: DataService) {}
  
  data: string;

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

5. Routing​

Angular provides a powerful routing module that allows you to handle navigation and create single-page applications. With Angular's router, you can define routes, associate them with components, and navigate between different views.

// Example of configuring routes
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Examples​

Example 1: Hello World​

Here's a simple example of an Angular component that displays a "Hello, World!" message:

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

@Component({
  selector: 'app-hello',
  template: `
    <h1>Hello, World!</h1>
  `
})
export class HelloComponent { }

Example 2: Todo List​

In this example, we create a simple Todo List component with the ability to add and remove items:

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

@Component({
  selector: 'app-todo-list',
  template: `
    <h2>Todo List</h2>
    <input [(ngModel)]="newItem" placeholder="New item">
    <button (click)="addItem()">Add</button>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `
})
export class TodoListComponent {
  newItem: string;
  items: string[] = [];

  addItem() {
    if (this.newItem) {
      this.items.push(this.newItem);
      this.newItem = '';
    }
  }
}

To learn more about Angular and explore its vast capabilities, visit the official Angular website.