angular

Component-based Architecture

Angular uses a component-based architecture where the application is divided into small, reusable components. Each component has its own HTML template, CSS styles, and TypeScript logic.

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

@Component({
  selector: 'app-root',
  template: `<h1>Hello, {{name}}!</h1>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
}

Two-way Data Binding

Two-way data binding allows for automatic synchronization of data between the model and the view. This means that any changes in the model are reflected in the view and vice versa.

<input [(ngModel)]="name">
<p>Hello, {{name}}!</p>

Dependency Injection

Dependency Injection (DI) is a design pattern used to implement IoC (Inversion of Control). It allows a class to receive its dependencies from an external source rather than creating them itself. Angular's DI system makes it easy to manage dependencies and promote reusability.

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return ['data1', 'data2', 'data3'];
  }
}

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

@Component({
  selector: 'app-data',
  template: `<ul><li *ngFor="let item of data">{{item}}</li></ul>`
})
export class DataComponent implements OnInit {
  data: string[];
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

Routing

Angular's Router enables navigation from one view to the next as users perform application tasks. It allows for defining routes and associating them with components, enabling deep linking and navigation.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

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

// In app.module.ts
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [AppRoutingModule],
  // other imports
})
export class AppModule {}