dreaife的休憩小栈

Generating files#

The Angular CLI provides quick commands to generate various files, keeping the project structure consistent. Common generation commands include:

• Generate a component:

  1
  ng generate component component-name
  2
  # or shorthand
  3
  ng g c component-name

  This will create a component containing HTML, CSS, TypeScript, and test files.

• Generate a service:

  1
  ng generate service service-name
  2
  # shorthand
  3
  ng g s service-name

  The generated service file by default includes an injector and can be easily used by components.

• Generate a module:

  1
  ng generate module module-name
  2
  # shorthand
  3
  ng g m module-name

  The generated module helps you divide code logic by feature modules, facilitating code management and lazy loading.

Build the Project#

Use the ng build command to build the project:

1
ng build

The built files are stored in the dist directory. To publish to production, you can use the following command:

1
ng build --prod

• The --prod option enables production optimizations, such as code minification, obfuscation, and removal of debugging information.

Testing#

The Angular CLI supports unit tests and end-to-end tests:

• Unit tests: Run unit tests with the ng test command, which uses Karma and Jasmine by default.

  1
  ng test

  This will open the test runner in a browser and update results in real time.

• End-to-end tests: Run end-to-end tests with the ng e2e command, which uses Protractor by default.

  1
  ng e2e

  End-to-end tests simulate user behavior to ensure the application’s overall functionality.

Generating other structures like services, pipes, directives, etc.#

Besides components and modules, the CLI also supports generating other Angular structures:

• Generate a directive：

  1
  ng generate directive directive-name
  2
  # shorthand
  3
  ng g d directive-name

• Generate a pipe：

  1
  ng generate pipe pipe-name
  2
  # shorthand
  3
  ng g p pipe-name

Configuration and Optimization#

• Environment configuration

Angular supports configuration files for different environments, by default including environment.ts (development) and environment.prod.ts (production). You can define more environment configurations in the angular.json file and choose different environments at build time:

1
ng build --configuration production

• Debugging and monitoring

When using ng serve, the Angular CLI will watch for file changes and automatically rebuild the app. You can use the --source-map option to generate debugging information for browser debugging:

1
ng serve --source-map

• Preloading and lazy-loading modules

In large applications, preloading and lazy-loading modules can improve performance. The Angular CLI natively supports lazy loading, helping you load modules on demand and reduce initial load time.

Other Useful CLI Commands#

• Update Angular project or dependencies：

  1
  ng update

  This command will check and update Angular and related dependencies.

• Analyze build bundles: Build the app with the --stats-json option to generate analysis files for inspecting and optimizing bundle contents.

  1
  ng build --prod --stats-json

• Add third-party libraries or tools： Using the ng add command, you can quickly add third-party libraries and plugins. For example, add Angular Material:

  1
  ng add @angular/material

angular.json Configuration File#

angular.json is the global configuration file for the Angular project, containing all configuration information. Here you can adjust the build output path, environment configurations, the order in which styles and scripts are included, and more.

Project Directory Structure#

When you create a new Angular project with ng new, the project structure will look like this:

1
my-angular-app/
2
├── e2e/                    # End-to-end test directory
3
├── node_modules/           # Project dependencies directory
4
├── src/                    # Application source code directory
5
│   ├── app/                # Core application directory
6
│   │   ├── app.component.ts # Root component logic file
7
│   │   ├── app.component.html # Root component template
8
│   │   ├── app.component.css # Root component styles
9
│   │   └── app.module.ts   # Root module file
10
│   ├── assets/             # Static resources directory
11
│   ├── environments/       # Environment configuration directory
12
│   ├── index.html          # Main HTML file
13
│   ├── main.ts             # App entry point
14
│   ├── polyfills.ts        # Browser compatibility code
15
│   ├── styles.css          # Global styles file
16
│   └── test.ts             # Unit test entry
17
├── angular.json            # Angular project configuration
18
├── package.json            # Project dependencies and scripts
19
├── tsconfig.json           # TypeScript configuration
20
└── README.md               # Project documentation

Directory and File Details#

1. src/ Directory

src/ is the main directory that holds the application’s source code; all core code for the Angular app resides here.

• app/ Directory: This is the primary directory of the application, containing the root module and root component. As the project grows, you will create more components, services, modules, etc.

  • app.component.ts: Defines the root component’s logic and acts as the starting point of the application.
  • app.component.html: The root component’s template file for defining the HTML structure of the root component.
  • app.component.css: The root component’s style file.
  • app.module.ts: The root module file loaded when the application starts. Each Angular app has at least one root module.

• assets/ Directory: Stores static resources (like images, fonts, etc.). They are copied to the build directory during the build and can be accessed via relative paths.

• environments/ Directory: Contains environment-specific configurations, such as development and production. By default, it includes environment.ts (development) and environment.prod.ts (production). You can load different configurations based on environment conditions.

• index.html: The app’s main HTML file. It is the entry point for the page, and Angular renders all components into this page.

• main.ts: The app’s main entry file. Angular starts execution from here. main.ts bootstraps the root module AppModule and starts the Angular application.

• polyfills.ts: Used to load compatibility code for different browsers to ensure the app runs consistently across browsers.

• styles.css: Global styles file where you can define styles that apply to the entire application.

• test.ts: Test entry file used to configure and initialize unit tests.

2. e2e/ Directory

The e2e/ directory is used to store end-to-end test code. It defaults to the Protractor framework to run those tests, simulating user behavior and testing the app’s overall functionality.

3. Other root-level files

• angular.json: The Angular project’s configuration file, including configurations for building and the development server. You can adjust the output path, environment configurations, the order of including styles and scripts, and more.

• package.json: Node.js project’s configuration file, including dependencies and scripts. All dependencies and CLI commands are defined and managed here.

• tsconfig.json: TypeScript configuration file, defining rules for compiling TypeScript code.

• README.md: Project documentation, where you can include the project description, installation steps, and usage.

4. node_modules/ Directory

node_modules/ holds the project dependencies installed by npm. All Angular, TypeScript, compiler, and related libraries live here.

Component#

A component is the fundamental building block of an Angular application. A component typically consists of three parts:

• Template: Defines the HTML structure of the component.
• Styles: Defines the CSS styles for the component.
• Class: Defines the component’s behavior and data.

1. Creating a component

The Angular CLI provides commands to generate components:

1
ng generate component component-name
2
# or shorthand
3
ng g c component-name

This command will create a new component directory under the app directory, containing the following files:

• component-name.component.ts — the component’s logic file, containing the component class and decorator.
• component-name.component.html — the component’s template file.
• component-name.component.css — the component’s style file.
• component-name.component.spec.ts — the component’s test file.

2. Structure of a component

In the component-name.component.ts file, the component is defined using the @Component decorator, with the structure as follows:

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

3
@Component({
4
  selector: 'app-component-name',      // component selector, used to reference the component in templates
5
  templateUrl: './component-name.component.html',  // component template file
6
  styleUrls: ['./component-name.component.css']    // component style file
7
})
8
export class ComponentNameComponent {
9
  title = 'Hello, Angular'; // component properties and methods
10
}

• selector: The component’s selector, used to reference the component in other templates. For example, <app-component-name></app-component-name>.
• templateUrl and styleUrls: Paths to the component’s template and style files, respectively.

3. Data binding in a component

Angular provides several data binding methods:

• Interpolation: Used to display the value of a component property, e.g. {{ title }}.
• Property binding: Bind a property value to an HTML element attribute using [], e.g. <img [src]="imageUrl">.
• Event binding: Bind events in the view to component methods using (), e.g. <button (click)="onClick()">Click</button>.
• Two-way data binding: Use [(ngModel)] to synchronize data between the form and the view (requires importing FormsModule).

Module#

Modules are used to organize and manage an application’s components, directives, pipes, and services. Every Angular app has at least one root module, defined in AppModule in app.module.ts.

1. Module structure

In the app.module.ts file, the module is defined with the @NgModule decorator, as follows:

1
import { NgModule } from '@angular/core';
2
import { BrowserModule } from '@angular/platform-browser';
3
import { AppComponent } from './app.component';
4
import { ComponentNameComponent } from './component-name/component-name.component';
5

6
@NgModule({
7
  declarations: [
8
    AppComponent,
9
    ComponentNameComponent   // declare components in the module
10
  ],
11
  imports: [
12
    BrowserModule   // import other modules
13
  ],
14
  providers: [],     // declare service providers
15
  bootstrap: [AppComponent]  // root component to bootstrap
16
})
17
export class AppModule { }

• declarations: The components, directives, and pipes declared in the module. Only components declared in the module can be used.
• imports: Import other modules, e.g., BrowserModule is the core module for browser apps.
• providers: Declare the services to be provided for the application.
• bootstrap: The root component to load when the application starts; typically AppComponent.

2. Feature modules

In larger applications, you can create multiple feature modules to organize code, making it easier to separate concerns and enable lazy loading.

1
ng generate module feature-module
2
# or shorthand
3
ng g m feature-module

Components and Modules Relationships#

• Modules organize components: In Angular, modules manage and organize components; a module can contain multiple components.
• Component reusability: A component can be declared and used in multiple modules but must first import the module that contains the component.
• Root module and feature modules: The root module (e.g., AppModule) is responsible for bootstrapping the application, while feature modules organize specific features.

Interpolation#

Data binding uses the {{ }} syntax to bind data, typically used to display component property values in HTML.

Example: Define a property title in the component class, then display it in the template using interpolation.

1
// In the component's TypeScript file
2
export class MyComponent {
3
  title = 'Hello, Angular!';
4
}

1
<!-- In the component's HTML template -->
2
<h1>{{ title }}</h1>

Here, {{ title }} will be replaced with Hello, Angular!. Interpolation is usually used to display text content.

Property Binding#

Property binding uses square brackets [] to bind a component property’s value to an HTML element attribute, such as src, href, disabled, etc.

Example: Suppose we have an image URL and bind it to the src attribute of an img element.

1
// In the component's TypeScript file
2
export class MyComponent {
3
  imageUrl = 'https://example.com/image.jpg';
4
}

1
<!-- In the component's HTML template -->
2
<img [src]="imageUrl" alt="Example Image">

Here, [src]="imageUrl" binds the value of imageUrl to the src attribute of the img element.

Event Binding#

Event binding uses parentheses () to bind events in the view (such as click, mouseover) to methods in the component, triggering specific logic.

Example: We can bind a click event to trigger the component’s onClick method on a button.

1
// In the component's TypeScript file
2
export class MyComponent {
3
  onClick() {
4
    console.log('Button clicked!');
5
  }
6
}

1
<!-- In the component's HTML template -->
2
<button (click)="onClick()">Click Me</button>

Here, (click)="onClick()" binds the click event, and clicking the button will execute the onClick method and log "Button clicked!".

Two-way Data Binding#

Two-way data binding uses the [(ngModel)] syntax to synchronize data in both directions. It allows user input to automatically update the component property, and changes to the component property are automatically reflected in the view. Two-way binding is commonly used with form inputs and user input scenarios.

Example: Use two-way data binding in an input field, binding the name property to the value of the input element. Requires importing FormsModule.

1
// In the component's TypeScript file
2
export class MyComponent {
3
  name = '';
4
}

1
<!-- In the component's HTML template -->
2
<input [(ngModel)]="name" placeholder="Enter your name">
3
<p>Hello, {{ name }}!</p>

Here, [(ngModel)]="name" implements two-way data binding. User input in the field updates the name property, and the value of name is immediately displayed on the page.

Note: Using two-way binding requires importing FormsModule in the application module, otherwise an error will occur.

1
import { FormsModule } from '@angular/forms';
2

3
@NgModule({
4
  imports: [FormsModule,
5
  ...
6
  ]
7
})
8
export class AppModule { }

Benefits of Data Binding#

• Reduces manual DOM updates by binding data
• Real-time synchronization between data and view
• Improves maintainability by separating data from the presentation

Types of Directives#

There are three main directive types in Angular:

1. Component directives: Components are essentially a specialized form of directives with templates and styles.
2. Structural Directives: Used to add or remove DOM elements or change the layout. Common ones include ngIf and ngFor.
3. Attribute Directives: Used to change the appearance or behavior of elements without changing their structure, such as ngClass and ngStyle.

Structural Directives#

Structural directives add, remove, or replace DOM elements. They require a leading * when used.

• ngIf shows or hides a DOM element based on a condition.

  1
  <div *ngIf="isVisible">This is visible only if isVisible is true.</div>

• ngFor iterates over an array to render a collection of DOM elements.

  1
  <ul>
  2
    <li *ngFor="let item of items">{{ item }}</li>
  3
  </ul>

• ngSwitch can render different elements based on different conditions, typically for multiple-case logic.

  1
  <div [ngSwitch]="value">
  2
    <p *ngSwitchCase="'one'">Value is one</p>
  3
    <p *ngSwitchCase="'two'">Value is two</p>
  4
    <p *ngSwitchDefault>Value is unknown</p>
  5
  </div>

  ngSwitchCase matches a specific value, and ngSwitchDefault represents the default case.

Attribute Directives#

Attribute directives change the appearance or behavior of DOM elements without creating or removing elements.

• ngClass is used to dynamically set CSS classes on an element.

  1
  <div [ngClass]="{ 'active': isActive, 'highlight': isHighlighted }">Styled div</div>

  Here, the active and highlight classes are added dynamically based on isActive and isHighlighted.

• ngStyle is used to dynamically set inline styles on an element.

  1
  <div [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }">Styled div</div>

  In this example, textColor and fontSize dynamically control the element’s color and font size.

Custom Directives#

In addition to Angular’s built-in directives, you can create custom directives to implement specific behavior. Typically, custom directives are attribute directives used to extend element behavior.

• Create a custom directive

Using the Angular CLI to create a directive, the command is:

1
ng generate directive highlight
2
# or shorthand
3
ng g d highlight

This command will generate a directive file highlight.directive.ts with initial content like:

1
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
2

3
@Directive({
4
  selector: '[appHighlight]'
5
})
6
export class HighlightDirective {
7
  constructor(private el: ElementRef, private renderer: Renderer2) {}
8

9
  @HostListener('mouseenter') onMouseEnter() {
10
    this.highlight('yellow');
11
  }
12

13
  @HostListener('mouseleave') onMouseLeave() {
14
    this.highlight(null);
15
  }
16

17
  private highlight(color: string) {
18
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
19
  }
20
}

In this example, the custom HighlightDirective directive will set the background color to yellow when the mouse hovers over the element and remove the color when it leaves.

• @Directive decorator: Defines a directive; selector: '[appHighlight]' indicates it is an attribute directive, used by applying the appHighlight attribute to an element.

• ElementRef: Used to access the DOM element the directive is applied to.

• Renderer2: Used to safely manipulate DOM styles, avoiding direct DOM access.

• @HostListener: Listens to the element’s events, mouseenter for mouse enter and mouseleave for mouse leave.

• Using the custom directive

In the template, use the appHighlight directive:

1
<p appHighlight>Hover over this text to see the highlight effect.</p>

After adding the appHighlight attribute, the directive will take effect on the element. When the mouse hovers over it, the background becomes yellow; when it leaves, it returns to normal.

Services#

A service in Angular is typically a class that encapsulates logic and data that don’t belong to any particular component. For example, fetching data, handling business logic, and managing state. Services can be shared across multiple components.

1. Creating a service

The Angular CLI can quickly generate a service:

1
ng generate service my-service
2
# or shorthand
3
ng g s my-service

The generated service file my-service.service.ts is roughly as follows:

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

3
@Injectable({
4
  providedIn: 'root'  // registers the service in the root injector, globally available
5
})
6
export class MyService {
7
  constructor() { }
8

9
  getData() {
10
    return 'Hello from MyService!';
11
  }
12
}

• @Injectable decorator: Marks a class as injectable into components or other services.
• providedIn: 'root': Indicates the service is provided in the root injector, making it accessible throughout the app. This avoids manual registration in providers.

1. Using a service in a component

Services are typically used via dependency injection. You can inject the service into a component’s constructor so you can call the service’s methods.

Suppose we have created a service named MyService. Here’s how to use it in a component:

1
import { Component, OnInit } from '@angular/core';
2
import { MyService } from './my-service.service';
3

4
@Component({
5
  selector: 'app-my-component',
6
  template: `<p>{{ message }}</p>`
7
})
8
export class MyComponent implements OnInit {
9
  message: string;
10

11
  // Inject the service in the constructor
12
  constructor(private myService: MyService) {}
13

14
  ngOnInit(): void {
15
    this.message = this.myService.getData();
16
  }
17
}

• Constructor injection: Define a private myService variable in the component’s constructor to inject the service.
• Calling service methods: In the ngOnInit lifecycle hook, call getData() and assign its return value to message.

1. Service scope and provision

Angular provides several ways to provide services, and different provisioning methods affect the service’s scope and lifecycle:

• Root-level provisioning

Providing the service in the root injector with providedIn: 'root' makes the service a singleton for the entire application. This is typically used for globally shared data or logic.

1
@Injectable({
2
  providedIn: 'root'
3
})
4
export class MyService { }

• Module-level provisioning

If you want the service to be available only within a specific module, register the service in that module’s providers array. This makes the service’s lifecycle align with the module, suitable for localized shared data or logic.

1
import { NgModule } from '@angular/core';
2
import { MyService } from './my-service.service';
3

4
@NgModule({
5
  providers: [MyService]  // provide service at module level
6
})
7
export class MyModule { }

• Component-level provisioning

If you want the service instance to be available only for a single component or the component’s children, register the service in the component’s providers array. This gives each component instance its own service instance, suitable for logic used only within a single component.

1
import { Component } from '@angular/core';
2
import { MyService } from './my-service.service';
3

4
@Component({
5
  selector: 'app-my-component',
6
  template: `<p>My Component</p>`,
7
  providers: [MyService]  // provide service at the component level
8
})
9
export class MyComponent { }

Dependency Injection#

Dependency Injection (DI) is a design pattern where dependencies (such as services) are injected into components or other services, avoiding hard-coded dependencies. Angular’s DI system automatically manages the creation and provision of dependencies, simplifying the app structure.

1. How the DI system works

When Angular detects that a class requires a specific dependency (for example, MyService), it looks for an instance of that dependency in the injector. If the instance doesn’t exist, it creates one and returns it to the component or service.

1. Custom injectors

Angular supports custom injectors inside components to control how dependencies are provided. This is not commonly used in most apps, but it can be useful when you need to control the scope of a service or implement special dependencies.

Real-world use cases for services#

• Data sharing: Store shared data in a service so that multiple components can access and update it.
• HTTP requests: Use the HttpClient service to fetch data from backend APIs and encapsulate the logic in services for reuse and testing.
• Global state management: Manage app state in a service, such as user authentication information or theme settings.

Example: Creating a simple data service#

Suppose we want to create a simple data service DataService to manage a set of user data and provide CRUD operations.

• Create the service

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

3
@Injectable({
4
  providedIn: 'root'
5
})
6
export class DataService {
7
  private users = ['Alice', 'Bob', 'Charlie'];
8

9
  getUsers() {
10
    return this.users;
11
  }
12

13
  addUser(user: string) {
14
    this.users.push(user);
15
  }
16
}

• Use the service in a component

1
import { Component } from '@angular/core';
2
import { DataService } from './data.service';
3

4
@Component({
5
  selector: 'app-user-list',
6
  template: `
7
    <ul>
8
      <li *ngFor="let user of users">{{ user }}</li>
9
    </ul>
10
    <input [(ngModel)]="newUser" placeholder="Enter name">
11
    <button (click)="addUser()">Add User</button>
12
  `
13
})
14
export class UserListComponent {
15
  users: string[];
16
  newUser = '';
17

18
  constructor(private dataService: DataService) {
19
    this.users = this.dataService.getUsers();
20
  }
21

22
  addUser() {
23
    if (this.newUser) {
24
      this.dataService.addUser(this.newUser);
25
      this.newUser = '';
26
    }
27
  }
28
}

In this example, DataService provides the logic for managing user data, and the UserListComponent retrieves data from the service to display in the view, while also allowing new users to be added via the service.

What is Routing?#

In a single-page application, there is only one actual page, but users can navigate to different parts of the app via different URLs. Angular’s router lets you define mappings between URL paths and components. When clicking navigation links, the corresponding component is loaded without a full page refresh.

Setting up Angular Routing#

1. Import RouterModule

To set up routing in an Angular app, import RouterModule in the app’s root module or relevant feature modules and define the route configuration.

For example, in standalone mode, you can configure routing in main.ts:

1
import { bootstrapApplication } from '@angular/platform-browser';
2
import { AppComponent } from './app/app.component';
3
import { provideRouter } from '@angular/router';
4
import { HomeComponent } from './app/home/home.component';
5
import { AboutComponent } from './app/about/about.component';
6

7
bootstrapApplication(AppComponent, {
8
  providers: [
9
    provideRouter([
10
      { path: '', component: HomeComponent },          // default route
11
      { path: 'about', component: AboutComponent }     // /about route
12
    ])
13
  ]
14
});

In this example, we defined two routes:

• '' represents the root path (/), mapped to HomeComponent.
• 'about' represents the /about path, mapped to AboutComponent.

1. Create components

If you don’t have the related components yet, you can generate them with the following commands:

1
ng generate component home --standalone
2
ng generate component about --standalone

1. Add route links in the template

Angular provides the routerLink directive to create route links. You can add navigation links in the template of AppComponent:

1
<nav>
2
  <a routerLink="/">Home</a> |
3
  <a routerLink="/about">About</a>
4
</nav>
5
<router-outlet></router-outlet>

• routerLink: Used to specify the path of the navigation link. For example, routerLink="/" points to the root path.
• <router-outlet></router-outlet>: Router outlet, specifies where in the page the routed component should be displayed. The <router-outlet> is a placeholder for the router to render the matched component.

1. Route parameter passing

Angular routing supports passing parameters in the URL and receiving/processing them in components. For example, we can define a route to show user details:

• Define a parameterized route

In the route configuration, use :id as a placeholder to define the parameter:

1
{ path: 'user/:id', component: UserComponent }

• Add links in the template

In the template, you can pass parameters with routerLink:

1
<a [routerLink]="['/user', 1]">User 1</a>
2
<a [routerLink]="['/user', 2]">User 2</a>

• Retrieve parameters in the component

In UserComponent, you can use ActivatedRoute to access route parameters:

1
import { Component, OnInit } from '@angular/core';
2
import { ActivatedRoute } from '@angular/router';
3

4
@Component({
5
  selector: 'app-user',
6
  standalone: true,
7
  template: `<p>User ID: {{ userId }}</p>`
8
})
9
export class UserComponent implements OnInit {
10
  userId: string;
11

12
  constructor(private route: ActivatedRoute) {}
13

14
  ngOnInit(): void {
15
    this.userId = this.route.snapshot.paramMap.get('id')!;
16
  }
17
}

• ActivatedRoute: Angular’s router service for accessing route information.
• paramMap: A map of route parameters. get('id') retrieves the id parameter from the current route.

Route Guards#

Route guards protect routes, ensuring the user has permission to access them. Common route guards include:

• CanActivate: Checks before navigating to a route, deciding whether to allow access.
• CanDeactivate: Checks when leaving a route, deciding whether to allow leaving.

For example, create a simple AuthGuard to ensure a user can access a route only after logging in.

1. Generate the guard

Use the CLI to generate a guard:

1
ng generate guard auth

1. Implement the AuthGuard logic

In the generated auth.guard.ts, write the authentication logic:

1
import { Injectable } from '@angular/core';
2
import { CanActivate, Router } from '@angular/router';
3

4
@Injectable({
5
  providedIn: 'root'
6
})
7
export class AuthGuard implements CanActivate {
8
  constructor(private router: Router) {}
9

10
  canActivate(): boolean {
11
    const isAuthenticated = false; // replace with real authentication logic
12

13
    if (!isAuthenticated) {
14
      this.router.navigate(['/login']);
15
      return false;
16
    }
17
    return true;
18
  }
19
}

1. Apply the guard to routes

In the route configuration, apply the guard using the canActivate property:

1
{ path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] }

Lazy Loading#

Lazy loading loads specific modules only when needed, improving the initial load time of the app. You can easily implement lazy loading for components with loadComponent:

1
{ path: 'lazy', loadComponent: () => import('./lazy/lazy.component').then(m => m.LazyComponent) }

Template-driven Forms#

Template-driven forms define the form structure and validation logic primarily through the HTML template. They use Angular’s FormsModule to provide data binding and validation support.

• Import FormsModule

First, in the module, import FormsModule. If your project is modular, open app.module.ts or the relevant module file, and add FormsModule.

1
import { NgModule } from '@angular/core';
2
import { BrowserModule } from '@angular/platform-browser';
3
import { FormsModule } from '@angular/forms';
4
import { AppComponent } from './app.component';
5

6
@NgModule({
7
  declarations: [AppComponent],
8
  imports: [
9
    BrowserModule,
10
    FormsModule  // import FormsModule
11
  ],
12
  bootstrap: [AppComponent]
13
})
14
export class AppModule {}

• Defining a template-driven form

Create a simple form in the template, using the ngModel directive to achieve two-way data binding. Use #name="ngModel" to create a template reference variable to access the input’s validation state.

1
<form #myForm="ngForm">
2
  <label for="name">Name:</label>
3
  <input id="name" name="name" [(ngModel)]="user.name" required>
4
  <div *ngIf="!myForm.controls.name?.valid && myForm.controls.name?.touched">
5
    Name is required.
6
  </div>
7

8
  <label for="email">Email:</label>
9
  <input id="email" name="email" [(ngModel)]="user.email" required email>
10
  <div *ngIf="!myForm.controls.email?.valid && myForm.controls.email?.touched">
11
    Valid email is required.
12
  </div>
13

14
  <button [disabled]="!myForm.valid">Submit</button>
15
</form>

• [(ngModel)]: Two-way data binding used to synchronize form fields and component data.

• #myForm="ngForm": Create a template reference variable myForm to access the form state.

• required and email validations: HTML5 validations provided by Angular.

• Define the data model in the component

In app.component.ts, define the user data model, bound to the form.

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

3
@Component({
4
  selector: 'app-root',
5
  templateUrl: './app.component.html'
6
})
7
export class AppComponent {
8
  user = {
9
    name: '',
10
    email: ''
11
  };
12
}

Reactive Forms#

Reactive forms define the form structure and validation logic in the component class, offering more flexibility and suitable for complex dynamic forms. They use the ReactiveFormsModule to provide form controls and validation support.

• Import ReactiveFormsModule

In the module, import ReactiveFormsModule.

1
import { NgModule } from '@angular/core';
2
import { BrowserModule } from '@angular/platform-browser';
3
import { ReactiveFormsModule } from '@angular/forms';
4
import { AppComponent } from './app.component';
5

6
@NgModule({
7
  declarations: [AppComponent],
8
  imports: [
9
    BrowserModule,
10
    ReactiveFormsModule  // import ReactiveFormsModule
11
  ],
12
  bootstrap: [AppComponent]
13
})
14
export class AppModule {}

• Define a reactive form

In the component, use FormBuilder to define the form structure and validation rules.

1
import { Component } from '@angular/core';
2
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3

4
@Component({
5
  selector: 'app-root',
6
  templateUrl: './app.component.html'
7
})
8
export class AppComponent {
9
  userForm: FormGroup;
10

11
  constructor(private fb: FormBuilder) {
12
    this.userForm = this.fb.group({
13
      name: ['', Validators.required],
14
      email: ['', [Validators.required, Validators.email]]
15
    });
16
  }
17

18
  onSubmit() {
19
    if (this.userForm.valid) {
20
      console.log(this.userForm.value);
21
    }
22
  }
23
}

• FormBuilder: Angular-provided service to simplify form construction.

• Validators: Used to set validation rules for form fields.

• Binding a reactive form in the template

Bind the entire form to [formGroup] and each control with formControlName.

1
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
2
  <label for="name">Name:</label>
3
  <input id="name" formControlName="name">
4
  <div *ngIf="userForm.controls.name.invalid && userForm.controls.name.touched">
5
    Name is required.
6
  </div>
7

8
  <label for="email">Email:</label>
9
  <input id="email" formControlName="email">
10
  <div *ngIf="userForm.controls.email.invalid && userForm.controls.email.touched">
11
    Valid email is required.
12
  </div>
13

14
  <button [disabled]="userForm.invalid">Submit</button>
15
</form>

• [formGroup]: Binds the component’s userForm to the template form.
• formControlName: Binds each form control to the corresponding control in userForm.

Form Validation#

Angular provides a variety of built-in validators, such as Validators.required, Validators.email, and you can also create custom validators.

• Custom validators

You can define a custom validator in the component and apply it to a form control.

1
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
2

3
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
4
  return (control: AbstractControl): ValidationErrors | null => {
5
    const forbidden = nameRe.test(control.value);
6
    return forbidden ? { forbiddenName: { value: control.value } } : null;
7
  };
8
}

Then apply the custom validator when creating the form:

1
this.userForm = this.fb.group({
2
  name: ['', [Validators.required, forbiddenNameValidator(/bob/i)]],
3
  email: ['', [Validators.required, Validators.email]]
4
});

Setting up HttpClient#

To use HttpClient in an Angular app, you need to import HttpClientModule in your module.

• Import HttpClientModule

In the root or feature module, import HttpClientModule:

1
import { NgModule } from '@angular/core';
2
import { BrowserModule } from '@angular/platform-browser';
3
import { HttpClientModule } from '@angular/common/http';
4
import { AppComponent } from './app.component';
5

6
@NgModule({
7
  declarations: [AppComponent],
8
  imports: [
9
    BrowserModule,
10
    HttpClientModule  // Import HttpClientModule
11
  ],
12
  bootstrap: [AppComponent]
13
})
14
export class AppModule {}

• Use HttpClient to send requests

HttpClient provides several methods to send HTTP requests, including get, post, put, delete, and more, suitable for different types of requests.

1. Sending a GET request

Suppose we want to fetch a list of users from an API. We can use HttpClient.get to send a GET request:

1
import { HttpClient } from '@angular/common/http';
2
import { Component, OnInit } from '@angular/core';
3

4
@Component({
5
  selector: 'app-user-list',
6
  template: `
7
    <ul>
8
      <li *ngFor="let user of users">{{ user.name }}</li>
9
    </ul>
10
  `
11
})
12
export class UserListComponent implements OnInit {
13
  users: any[] = [];
14

15
  constructor(private http: HttpClient) {}
16

17
  ngOnInit(): void {
18
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/users')
19
      .subscribe(data => {
20
        this.users = data;
21
      });
22
  }
23
}

In this example:

• this.http.get sends a GET request.

• subscribe handles the response data, assigning the received data to the component’s users property.

• Sending a POST request

If we want to send data to the server, use HttpClient.post:

1
addUser(newUser: any) {
2
  this.http.post('https://jsonplaceholder.typicode.com/users', newUser)
3
    .subscribe(response => {
4
      console.log('User added:', response);
5
    });
6
}

Here, the post method sends a POST request, passing the newUser data to the API. The response in the subscribe contains the server’s response.

Error Handling#

In real applications, API requests may encounter various errors, like network timeouts or server issues. You can catch and handle errors using the catchError operator.

• Error handling example

Using the catchError operator to handle errors in requests:

1
import { HttpErrorResponse } from '@angular/common/http';
2
import { catchError } from 'rxjs/operators';
3
import { throwError } from 'rxjs';
4

5
this.http.get('https://jsonplaceholder.typicode.com/users')
6
  .pipe(
7
    catchError(this.handleError)
8
  )
9
  .subscribe(
10
    data => console.log('Data:', data),
11
    error => console.error('Error:', error)
12
  );
13

14
handleError(error: HttpErrorResponse) {
15
  let errorMessage = 'Unknown error!';
16
  if (error.error instanceof ErrorEvent) {
17
    // Client-side error
18
    errorMessage = `Error: ${error.error.message}`;
19
  } else {
20
    // Server-side error
21
    errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
22
  }
23
  return throwError(errorMessage);
24
}

Here:

• The catchError operator catches errors and calls the handleError method.
• The handleError method generates an error message based on the error type and returns it via throwError.

HTTP Interceptors#

HTTP interceptors allow you to inject logic before a request or response is processed, such as adding an authentication token or logging.

• Creating an interceptor

Use the Angular CLI to create an interceptor:

1
ng generate interceptor auth

The interceptor file might look like:

1
import { Injectable } from '@angular/core';
2
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
3

4
@Injectable()
5
export class AuthInterceptor implements HttpInterceptor {
6
  intercept(req: HttpRequest<any>, next: HttpHandler) {
7
    // Clone the request and add an authentication token
8
    const authReq = req.clone({
9
      setHeaders: {
10
        Authorization: `Bearer YOUR_TOKEN_HERE`
11
      }
12
    });
13
    return next.handle(authReq);
14
  }
15
}

• The intercept method of the HttpInterceptor interface runs before the request is sent.

• req.clone clones the request object and adds the authentication token.

• Registering the interceptor

Register the interceptor as a multi-provider for HTTP_INTERCEPTORS in a module:

1
import { HTTP_INTERCEPTORS } from '@angular/common/http';
2
import { AuthInterceptor } from './auth.interceptor';
3

4
@NgModule({
5
  providers: [
6
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
7
  ]
8
})
9
export class AppModule {}

Using RxJS for Asynchronous Handling#

HttpClient methods return an Observable, which you subscribe to. You can use RxJS operators (such as map, switchMap) to process asynchronous data streams.

• RxJS operators example

If you want to process data after making a request, you can use the map operator:

1
import { map } from 'rxjs/operators';
2

3
this.http.get<any[]>('https://api.example.com/users')
4
  .pipe(
5
    map(users => users.map(user => user.name))
6
  )
7
  .subscribe(names => console.log(names));

Observable#

• Observable is the core concept of a data stream. It represents an asynchronous data source, which can be an HTTP request, events, timers, etc.
• Use Observable.subscribe() to subscribe to the data stream; observers are notified when data arrives.

Common RxJS Operators#

RxJS provides many operators to handle data streams. Here are some common operators and their use cases:

1. map - Data transformation

map transforms each item in the Observable data stream to a new value.

Example: Map the retrieved user array to an array of usernames.

1
import { map } from 'rxjs/operators';
2

3
this.http.get<any[]>('https://api.example.com/users')
4
  .pipe(
5
    map(users => users.map(user => user.name))
6
  )
7
  .subscribe(names => console.log(names));

2. filter - Data filtering

filter is used to filter items in the data stream that do not meet a condition.

Example: Filter users with isActive set to true.

1
import { filter } from 'rxjs/operators';
2

3
this.http.get<any[]>('https://api.example.com/users')
4
  .pipe(
5
    map(users => users.filter(user => user.isActive))
6
  )
7
  .subscribe(activeUsers => console.log(activeUsers));

3. switchMap - Cancel previous subscriptions, handle latest data

switchMap cancels the previous unfinished Observable when a new data item arrives, commonly used for nested requests or sequences of events (like form input or route parameter changes).

Example: Automatically search based on user input keywords and cancel the previous request.

1
import { switchMap, debounceTime } from 'rxjs/operators';
2
import { FormControl } from '@angular/forms';
3

4
searchControl = new FormControl();
5

6
this.searchControl.valueChanges
7
  .pipe(
8
    debounceTime(300),  // debounce to avoid overly frequent requests
9
    switchMap(query => this.http.get(`https://api.example.com/search?q=${query}`))
10
  )
11
  .subscribe(results => console.log(results));

4. mergeMap - Parallel processing

mergeMap maps each data item to a new Observable and processes them in parallel.

Example: Parallel requests for multiple users’ details.

1
import { mergeMap } from 'rxjs/operators';
2
import { from } from 'rxjs';
3

4
const userIds = [1, 2, 3];
5
from(userIds)
6
  .pipe(
7
    mergeMap(id => this.http.get(`https://api.example.com/users/${id}`))
8
  )
9
  .subscribe(user => console.log(user));

5. catchError - Error handling

catchError is used to catch errors in the data stream and handle accordingly.

Example: Return a default value when a request fails.

1
import { catchError } from 'rxjs/operators';
2
import { of } from 'rxjs';
3

4
this.http.get('https://api.example.com/data')
5
  .pipe(
6
    catchError(error => {
7
      console.error('Error occurred:', error);
8
      return of([]);  // return an empty array as a default value
9
    })
10
  )
11
  .subscribe(data => console.log(data));

Flow control in RxJS#

RxJS provides some flow-control operators, such as debounceTime and distinctUntilChanged, to help manage user input and other event streams.

1. debounceTime - Debouncing

debounceTime controls the rate of data emission, emitting data only after a pause for a specified time, typically used for handling rapid input sequences.

Example: Execute a search after the user stops typing for 500ms.

1
searchControl.valueChanges
2
  .pipe(
3
    debounceTime(500)
4
  )
5
  .subscribe(value => console.log('Search:', value));

1. distinctUntilChanged - Deduplication

distinctUntilChanged ignores the same data item as the previous one to avoid duplicate processing.

Example: Do not send repeated requests when the user types the same content.

1
searchControl.valueChanges
2
  .pipe(
3
    debounceTime(500),
4
    distinctUntilChanged()
5
  )
6
  .subscribe(value => console.log('Unique search:', value));

RxJS in Angular Use Cases#

• HTTP requests: Use RxJS operators with HttpClient to process responses and handle errors.
• Route parameter changes: Listen to route parameter changes and trigger dependent requests.
• Form input handling: Process user input with debouncing, deduplication, etc.
• Inter-component communication: Use Subjects to enable event or data sharing between components.

Example: Real-time search with RxJS#

The following is a complete example showing how to use switchMap, debounceTime, and distinctUntilChanged to build a real-time search:

1
import { Component } from '@angular/core';
2
import { FormControl } from '@angular/forms';
3
import { HttpClient } from '@angular/common/http';
4
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
5

6
@Component({
7
  selector: 'app-search',
8
  template: `
9
    <input [formControl]="searchControl" placeholder="Search...">
10
    <ul>
11
      <li *ngFor="let result of results">{{ result.name }}</li>
12
    </ul>
13
  `
14
})
15
export class SearchComponent {
16
  searchControl = new FormControl();
17
  results: any[] = [];
18

19
  constructor(private http: HttpClient) {
20
    this.searchControl.valueChanges
21
      .pipe(
22
        debounceTime(300),
23
        distinctUntilChanged(),
24
        switchMap(query => this.http.get<any[]>(`https://api.example.com/search?q=${query}`))
25
      )
26
      .subscribe(data => this.results = data);
27
  }
28
}

In this example:

• debounceTime(300) debounces, waiting 300 milliseconds after the user stops typing before sending a request.
• distinctUntilChanged() prevents duplicate requests for the same search term.
• switchMap cancels the previous request whenever a new input arrives, avoiding excessive network requests.

State management approaches in Angular#

1. Using services for state sharing

Angular services are singletons within the app and can share state across components, suitable for small apps that do not require complex state logic.

Example: Create a simple UserService to manage user information.

1
import { Injectable } from '@angular/core';
2
import { BehaviorSubject } from 'rxjs';
3

4
@Injectable({
5
  providedIn: 'root'
6
})
7
export class UserService {
8
  private userSource = new BehaviorSubject<User | null>(null); // stores user information
9
  user$ = this.userSource.asObservable(); // public user information as Observable
10

11
  setUser(user: User) {
12
    this.userSource.next(user); // update user information
13
  }
14

15
  clearUser() {
16
    this.userSource.next(null); // clear user information
17
  }
18
}

In a component, you can access and update user state via UserService:

1
@Component({
2
  selector: 'app-profile',
3
  template: `<div *ngIf="user$ | async as user">{{ user.name }}</div>`
4
})
5
export class ProfileComponent {
6
  user$ = this.userService.user$;
7

8
  constructor(private userService: UserService) {}
9
}

In another component, update user information:

1
@Component({
2
  selector: 'app-login',
3
  template: `<button (click)="login()">Login</button>`
4
})
5
export class LoginComponent {
6
  constructor(private userService: UserService) {}
7

8
  login() {
9
    const user = { name: 'Alice', email: '[email protected]' };
10
    this.userService.setUser(user); // update user information
11
  }
12
}

1. Using @ngrx/store for centralized state management

For large applications, you can use the @ngrx/store library for centralized state management. @ngrx/store implements a Redux-like pattern, enabling all application state to be managed in one place and synchronized via a single data source.

• Core concepts of @ngrx/store

  • Store: Holds the global state of the application. All components can access and update data from the Store.
  • Actions: Events that trigger state changes, describing what updates to perform.
  • Reducers: Handle the logic for Actions, updating the state in the Store accordingly.
  • Selectors: Retrieve required data from the Store.

• Installing @ngrx/store

First, install @ngrx/store with the Angular CLI:

1
ng add @ngrx/store

• Creating a state management example

Suppose we want to manage a simple counter state with increment and decrement actions.

1
1. **Define Action**
2

3
    In `counter.actions.ts`, define the counter actions:

1
import { createAction } from '@ngrx/store';
2

3
export const increment = createAction('[Counter] Increment');
4
export const decrement = createAction('[Counter] Decrement');
5
export const reset = createAction('[Counter] Reset');

1
2. **Define Reducer**
2

3
    In `counter.reducer.ts`, define the counter reducer:

1
import { createReducer, on } from '@ngrx/store';
2
import { increment, decrement, reset } from './counter.actions';
3

4
export const initialState = 0;
5

6
const _counterReducer = createReducer(
7
  initialState,
8
  on(increment, state => state + 1),
9
  on(decrement, state => state - 1),
10
  on(reset, state => initialState)
11
);
12

13
export function counterReducer(state: any, action: any) {
14
  return _counterReducer(state, action);
15
}

1
3. **Register Reducer**
2

3
    In the app's `app.module.ts`, register the Reducer with the Store:

1
import { StoreModule } from '@ngrx/store';
2
import { counterReducer } from './counter.reducer';
3

4
@NgModule({
5
  imports: [
6
    StoreModule.forRoot({ count: counterReducer })
7
  ],
8
  bootstrap: [AppComponent]
9
})
10
export class AppModule {}

1
4. **Use Store in a component to manage state**
2

3
    Use the Store in a component to get and update the counter state: