The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Angular Architecture

Next ►
►

Understanding the architecture of Angular is crucial for building efficient and scalable applications. Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.

Key Concepts of Angular Architecture

  1. Modules

  • NgModule: Angular applications are modular. An Angular module, or NgModule, is a class marked by the @NgModule decorator. NgModules are used to organize an application into cohesive blocks of functionality.
  • Root Module: Every Angular application has at least one module, the root module, which is conventionally named AppModule.
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 { }

  1. Components

  • Component: A component controls a patch of the screen called a view. Components are the building blocks of an Angular application. Each component is a class that interacts with the view through an HTML template.
  • Decorator: The @Component decorator identifies the class immediately below it as a component class and provides the metadata that determines how the component should be processed, instantiated, and used at runtime.
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular-app';
}

  1. Templates

  • Template: A template is a form of HTML that tells Angular how to render the component. Templates can include Angular-specific elements and attributes, such as *ngIf, *ngFor, and {{ }} for data binding.
<!-- app.component.html -->
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}!</p>

  1. Services and Dependency Injection

  • Service: A service is a class with a narrow, well-defined purpose. It should do something specific and do it well. Services are typically used for data access, logging, or other utility functions.
  • Dependency Injection (DI): Angular's DI system provides a way to supply a new instance of a class with the fully-formed dependencies it requires.
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return ['Data1', 'Data2', 'Data3'];
  }
}

  1. Directives

  • Directive: Directives are classes that add additional behavior to elements in your Angular applications. There are three kinds of directives in Angular:
    • Components: Directives with a template.
    • Structural Directives: Change the DOM layout by adding and removing DOM elements (e.g., *ngIf, *ngFor).
    • Attribute Directives: Change the appearance or behavior of an element, component, or another directive (e.g., ngClass, ngStyle).

  1. Pipes

  • Pipe: Pipes are a way to transform data in your templates. They take in data as input and transform it to a desired output. Angular provides several built-in pipes, and you can also create custom pipes.
<!-- Using a built-in pipe -->
<p>{{ today | date }}</p>

  1. Routing

  • Router: The Angular Router enables navigation from one view to the next as users perform application tasks. It interprets a browser URL as an instruction to change the view.
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 { }

Summary

In this section, we covered the fundamental building blocks of Angular architecture:

  • Modules: Organize the application into cohesive blocks.
  • Components: Control views and are the main building blocks.
  • Templates: Define the view for a component.
  • Services and Dependency Injection: Provide reusable functionality and manage dependencies.
  • Directives: Add behavior to elements.
  • Pipes: Transform data in templates.
  • Routing: Manage navigation and views.

Understanding these core concepts will help you build robust and maintainable Angular applications. In the next module, we will dive into TypeScript basics, which is essential for writing Angular applications.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved