Angular Overview: Components, Services, Directives, and More

Study Notes

Overview of Angular

Components

In Angular, components are responsible for rendering views and responding to user inputs. Each component has its own template and corresponding TypeScript file. A component is created by using the @Component decorator, followed by defining the associated view and class.

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

@Component({
    selector: 'app-root',
    template: '<h1>This is a simple Angular component</h1>'
})
export class RootComponent {}

Template Syntax

Angular uses a special syntax within its templates. It combines HTML and bindings with data interpolation and property values.

Services

Services provide business logic and operation functionality. They can be injected into any Angular component or directive. Implementing a service involves creating a class with methods and providing them as dependency injection tokens.

// Example of a simple Angular service
import { Injectable } from "@angular/core";

@Injectable({
  providedIn: 'root'
})
export class MyService {}

Dependency Injection

Dependency injection is a design pattern that allows developers to swap out implementations of a class without changing the calling code. In Angular, dependencies are added to a provider's constructor via dependency injection.

Directives

Directives allow additional functionalities to be applied to elements in the DOM. There are three types of directives in Angular: structural directives, attribute directives, and class directives.

Structural Directives

Structural directives manipulate the layout of HTML elements. Examples include *ngIf, *ngFor, and ngSwitch.

Modules

Modules in Angular are essentially containers that hold related components, services, directives, and pipelines. The main module in Angular projects is usually named AppModule.

Lazy Loading

Lazy loading is a mechanism that allows code splitting between multiple chunks. This means that only necessary chunks are loaded at runtime, improving the application's startup time. In Angular, lazy loading is implemented through the loadChildren property in the RouterModule.

Setting up Lazy Loading

To enable lazy loading in a module, you set up a routing configuration with the loadChildren property that points to the module that contains the desired components.

Behaviour Subject

In Angular, BehaviorSubject is a type of Observable that behaves both as a publisher and observer. It maintains the most recent value emitted and exposes an operator that allows you to access the current value while subscribing.

Reusable Components

Reusable components are essential for reducing redundant code and enhancing maintainability. By writing modular code, developers can create snippets of functionality that can be easily imported and integrated into various applications.

Best Practices

When designing reusable components, it's important to keep common design patterns in mind, such as following the principles of separation of concerns (SOC), ensuring encapsulation, and minimizing complexity.

CSS

Cascading Style Sheets (CSS) is a widely adopted language for styling web pages. Angular provides built-in support for stylesheets, allowing developers to apply styling rules directly within their components.

Importing Stylesheets

Stylesheets can be imported into Angular projects by referencing them in the appropriate stylesheet files or by declaring them in the styles property of the @Component decorator.

Component Communication

Communication between components in Angular can occur in several ways, including:

Event emission/handling
Property binding (one-way communication)
Service communication

Description

Explore the key concepts of Angular development including components, services, directives, modules, lazy loading, behaviour subjects, and best practices for creating reusable components. Learn about component communication methods and the importance of CSS in Angular styling.