Discover Angular's core concepts and advance to building a complete SPA. Gain hands-on experience by creating modules, components, forms, routing, and APIs in an e-commerce app.

angular_setup.tar.gz

angular

In this course, you will cover the most fundamental concepts of Angular, a popular JavaScript framework. You will learn everything about building a complete Angular app, setting up the development environment, and building your own single-page application (SPA).

You’ll start off by covering the basic building blocks of Angular such as modules, components, and directives. After that, the course will introduce you to some more advanced material that focuses on forms, routing, and dealing with APIs. 

By the end of this course, you will have gained hands-on experience by building a fully functional e-commerce application.

A Hands-on Guide to Angular

![intro-httpclient](/api/collection/5854561945255936/5664668925296640/page/5022885585354752/image/4866518000074752)

Angular provides a simplistic HTTP API for performing HTTP operations in angular applications. The front-end applications need to communicate with a server over the HTTP protocol to download data, upload data, and access other back-end services.

 ## Features of HTTP

It offers features like:

- Error handling
- Request and response interception.
- Typed response objects

 ## Working with HTTP 

To work with the HTTP protocol in Angular, we need to have the required imports from the HTTP packages.

```
import { HttpClientModule } from '@angular/common/http';
```

Add it to the imports array:

```
@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ],
```

We can then inject the HttpClient service in the application service required to fetch the data:

```
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

```
## Definition of `HttpClient`

Look at the definition of the HttpClient service here:

```
export declare class HttpClient {
    private handler;
    constructor(handler: HttpHandler);
    /**
     * Sends an `HTTPRequest` and returns a stream of `HTTPEvents`.
     *
     * @return An `Observable` of the response, with the response body as a stream of `HTTPEvents`.
     */
    request<R>(req: HttpRequest<any>): Observable<HttpEvent<R>>;
    /**
     * Constructs a request that interprets the body as an `ArrayBuffer` and returns the response in an
     * `ArrayBuffer`.
     *
     * @param method  The HTTP method.
     * @param url     The endpoint URL.
     * @param options The HTTP options to send with the request.
     *
     *
     * @return An `Observable` of the response, with the response body as an `ArrayBuffer`.
     */
    request(method: string, url: string, options: {
        body?: any;
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        observe?: 'body';
        params?: HttpParams | {
            [param: string]: string | string[];
        };
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
    }): Observable<ArrayBuffer>;
    /**
     * Constructs a request that interprets the body as a blob and returns
     * the response as a blob.
     *
     * @param method  The HTTP method.
     * @param url     The endpoint URL.
     * @param options The HTTP options to send with the request.
     *
     * @return An `Observable` of the response, with the response body of type `Blob`.
     */
    request(method: string, url: string, options: {
        body?: any;
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        observe?: 'body';
        params?: HttpParams | {
            [param: string]: string | string[];
        };
        reportProgress?: boolean;
        responseType: 'blob';
        withCredentials?: boolean;
    }): Observable<Blob>;
    /**
```

## Using HttpClient methods

We can use the provided request method from the API to perform all the different operations by providing methods like GET, POST, PUT, and DELETE.

For example,

```
  public request(requestOption): Observable<any> {
    return this._httpClient.request(
      requestOption.method,
      requestOption.url,
      {
        headers: this._getHttpHeaders(requestOption.headerConfig),
        params: requestOption.params,
        body: requestOption.body,
        observe: 'response',
        responseType: requestOption.responseType ? requestOption.responseType : 'json'
      })
      .pipe(
        map(data => this._extractData(data)),
        catchError(data => this._handleError(data))
      );
  }
```

The get method of the API accepts two parameters. The URL, and the options wherein you can specify the headers, params etc.:

```
options: {
    headers?: HttpHeaders | {[header: string]: string | string[]},
    observe?: 'body' | 'events' | 'response',
    params?: HttpParams|{[param: string]: string | string[]},
    reportProgress?: boolean,
    responseType?: 'arraybuffer'|'blob'|'json'|'text',
    withCredentials?: boolean,
  }
```

![intro-httpclient](/api/collection/5854561945255936/5664668925296640/page/5022885585354752/image/4866518000074752)

Angular provides a simplistic HTTP API for performing HTTP operations in angular applications. The front-end applications need to communicate with a server over the HTTP protocol to download data, upload data, and access other back-end services.

 ## Features of HTTP

It offers features like:

- Error handling
- Request and response interception.
- Typed response objects

 ## Working with HTTP 

To work with the HTTP protocol in Angular, we need to have the required imports from the HTTP packages.

```
import { HttpClientModule } from '@angular/common/http';
```

Add it to the imports array:

```
@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ],
```

We can then inject the HttpClient service in the application service required to fetch the data:

```
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

```
# Definition of `HttpClient`

Look at the definition of the HttpClient service here:

```
export declare class HttpClient {
    private handler;
    constructor(handler: HttpHandler);
    /**
     * Sends an `HTTPRequest` and returns a stream of `HTTPEvents`.
     *
     * @return An `Observable` of the response, with the response body as a stream of `HTTPEvents`.
     */
    request<R>(req: HttpRequest<any>): Observable<HttpEvent<R>>;
    /**
     * Constructs a request that interprets the body as an `ArrayBuffer` and returns the response in an
     * `ArrayBuffer`.
     *
     * @param method  The HTTP method.
     * @param url     The endpoint URL.
     * @param options The HTTP options to send with the request.
     *
     *
     * @return An `Observable` of the response, with the response body as an `ArrayBuffer`.
     */
    request(method: string, url: string, options: {
        body?: any;
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        observe?: 'body';
        params?: HttpParams | {
            [param: string]: string | string[];
        };
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
    }): Observable<ArrayBuffer>;
    /**
     * Constructs a request that interprets the body as a blob and returns
     * the response as a blob.
     *
     * @param method  The HTTP method.
     * @param url     The endpoint URL.
     * @param options The HTTP options to send with the request.
     *
     * @return An `Observable` of the response, with the response body of type `Blob`.
     */
    request(method: string, url: string, options: {
        body?: any;
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        observe?: 'body';
        params?: HttpParams | {
            [param: string]: string | string[];
        };
        reportProgress?: boolean;
        responseType: 'blob';
        withCredentials?: boolean;
    }): Observable<Blob>;
    /**
```

# Using HttpClient methods

We can use the provided request method from the API to perform all the different operations by providing methods like GET, POST, PUT, and DELETE.

For example,

```
  public request(requestOption): Observable<any> {
    return this._httpClient.request(
      requestOption.method,
      requestOption.url,
      {
        headers: this._getHttpHeaders(requestOption.headerConfig),
        params: requestOption.params,
        body: requestOption.body,
        observe: 'response',
        responseType: requestOption.responseType ? requestOption.responseType : 'json'
      })
      .pipe(
        map(data => this._extractData(data)),
        catchError(data => this._handleError(data))
      );
  }
```

The get method of the API accepts two parameters. The URL, and the options wherein you can specify the headers, params etc.:

```
options: {
    headers?: HttpHeaders | {[header: string]: string | string[]},
    observe?: 'body' | 'events' | 'response',
    params?: HttpParams|{[param: string]: string | string[]},
    reportProgress?: boolean,
    responseType?: 'arraybuffer'|'blob'|'json'|'text',
    withCredentials?: boolean,
  }
```

In this lesson, we will briefly look at the use of HttpClient module in Angular to perform HTTP operations.

Course Overview

Introduction to the Framework

Building Blocks of Angular

Basic Concepts in an Angular Application

Forms in Angular

Routing in Angular

Services and Dependency Injection

Dealing with APIs

Implement the Above in a E-commerce App

Login and Authentication

Summary and Resources

HttpClient Service

Features of HTTP

Working with HTTP