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

In the previous lesson, we created a data store using the in-memory-web-api and returned that data from the store using a service. This returned data now can be used to perform the API operations.

We will use an Angular service to obtain the data and store it and share it with the components that need the data.

As we discussed in the first lesson of this section, Angular has **HttpClient** package that we use for performing AJAX calls.

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

  apiurl = 'api/users';                 // Our created Data can be accessed here at api/users
  headers = new HttpHeaders().set('Content-Type', 'application/json').set('Accept', 'application/json');
  httpOptions = {
    headers: this.headers
  };

constructor(private http: HttpClient) { }                     
//Injecting HTTP service to communicate with the data
```

We create a singletons service here that is responsible for performing HTTP operations and getting us the required data.

# Importing the module
The first step is to import the `HttpClientModule` inside the root module. And now we would be able to use HttpClient, HttpHeaders inside the service.

Inside the service, we are accessing the data through the remote API with the help of this line.

```
apiurl = 'api/users';
```

The next step is to inject the service HttpClient but before that, we need to import some files.

```
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable, throwError} from 'rxjs';
import { tap, catchError } from 'rxjs/operators';
```

# Injecting the service
```
constructor(private http: HttpClient) { }  
```

And we are all set to perform the CRUD operations now.

# CRUD 





CRUD operations involve creating, reading, updating, and deleting data on the server or wherever you fetch the data from. Any Angular application working with data must be able to perform these four basic operations to be able to read and write the data.

> C- create data R- read the data U - update the data D- Delete the data


# READ DATA
To read the data from the API, we need to use **http.get()** method inside the service that we created.

We will read the data with the help of Observables returned from the created `UserData` array.

```
  getUsers(): Observable<UserData[]> {
    return this.http.get<UserData[]>(this.apiurl).pipe(
      tap(data => console.log(data)),
      catchError(this.handleError)
    );
  }
```

We created a method in this service with the name `getUsers`. This expects data of the format of `UserData`. Inside this method, we use the get method provided by HTTP and perform it on the `apiurl` that we defined earlier. The received data is then returned from the method for use in the component.

Here, we are using `pipe` and `tap` operators to read the data from the observable and `catchError` method to handle the error if it occurs during the HTTP request.

To call the **getUsers()** method, we will now subscribe to the returned observable inside the Component.

```
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Lets CRUD';
  users: UserData[]=[];

  constructor(private dataservice: DataService){}
  getUsers(){
    this.dataservice.getUsers().subscribe(data => {
      this.users=data;
    });
  }
 
ngOnInit(){
    this.getUsers();
}
```

In this component, you subscribe to the observable returned value and store it inside a local variable that can then be used to display the data on to the view.

Since we have subscribed to the component value, it is important to unsubscribe as well. There are multiple ways we can do that.

Simply unsubscribe from the observable in the `ngOnDestroy` lifecycle hook, or use an RxJS operator like `takeWhile`, `takeUntil` to be subscribed only until certain conditions hold true.

Let us look at an example below:

```
private _isComponentAlive : boolean = false;
```

```
private _getDashboardData(studentId, token) {

    this._getDashboardDataService.getDashboardData({
      student_id: studentId
    }, token)
      .pipe(
        takeWhile(() => this._isComponentAlive)
      )
      .subscribe({ next: this._getDashboardDataSuccessHandler, error: this._getDashboardDataErrorHandler });
  }
```

```
ngOnDestroy() {
  this._isComponentAlive = false;
}
```
Here you declare a private variable holding `true` value. You do the subscription only until the `_isComponentAlive` value is true. As soon as the component is destroyed, you turn the flag as `false`, and the subscription ends right there.

If you want to display the value that we received using the component subscription `users` on the `app.component.html`, use:

```
<table class ="table">
  <tr *ngFor="let u of users">
    <td>
      {{u.id}}
    </td>
    <td>
      {{u.name}}
    </td>
    <td>
      {{u.age}}
    </td>
    <td>  
      <button class= 'btn btn-info' (click)="updateUser()"> UPDATE DATA</button>
    </td>
  </tr>
</table>
```

![intro-CRUD](/api/collection/5854561945255936/5664668925296640/page/6479897296896000/image/5915580520464384)

# Create data
To create data in an API, we need to perform HTTP POST operation and pass the data that needs to be inserted into the database. 

We will use a method called `addUser()` for that.

```
 addUser (user: User): Observable<User> { 
    user.id=null;
    return this.http.post<User>(this.apiurl, user, this.httpOptions).pipe(
    tap(data => console.log(data)),
    catchError(this.handleError)
  );
}
```

We created a method in the service to post our response data, and this would use the post method of our HTTP service.

On the component, call the `addUser()` method and subscribe to the returned observable.

Suppose you want to route to a different view after you submit some data,

```
    this.dataservice.addUser(this.userFormGroup.value).subscribe(data => {
      this.user = data;
      this._router.navigate(['/users']);
    });
```

# Update data

To update data, we take the `id` of a user and update their `age`. 

```
updateUser(user: User): Observable<User>{
  const url = `${this.apiurl}/${user.id}`;
  return this.http.put<User>(this.apiurl, user, this.httpOptions).pipe(
    map(() => user),
    catchError(this.handleError)
  );
}
```
An important thing to notice here is that, whenever we want to perform the update operation, we use `http.put()` method.

On the component.ts,

```
idtoUpdate = 1;
  updateUser() {
    this.dataservice.getUser(this.idtoUpdate).subscribe(data => {
      this.user = data;
      this.user.age = 'Updated Age';
      this.dataservice.updateUser(this.user).subscribe(data1 => {
        this.getUsers();
  });
});
```

Here we take an input from the user asking which student id to update, fetch that user, and update the value.

Next, we will see how to delete the data from the list of Users created in the database.

# Delete data

To delete a record from the database, we use the `http.delete()` method and subscribe to the returned observable in the component by creating a method `deleteUser()`.

```
deleteCar (id: number): Observable<User> {
  const url = `${this.apiurl}/${id}`;
  return this.http.delete<User>(url, this.httpOptions).pipe(
    catchError(this.handleError)
  );
}
```
On the component, we subscribe to the observable using:

```
 idtodelete=1;
  deleteUser() {
    this.dataservice.deleteCar(this.idtodelete).subscribe(data => {
       this.getUsers();
    });
  }
```

In the demo below, try out the different HTTP operations by yourselves with a real API instead of a mock API.

# Demo

Focus on how the APIs are in a separate file. We use these to perform all the HTTP operations in our `http-req.service.ts`. file. 

After receiving data from service into our app.component.ts, see how this gets assigned to `this.myPostsData` if the API succeeds. 

Here will be a small activity for you. In the code below, you can see we receive the value of myPostsData in `app.component.ts`. However, it doesn't display when you run the app.
1. Figure out what is missing,
- it could be API failure
- or it could be syntax issue.
- it could be missing imports, but that should throw compile time error,
-  it could be an issue the displaying of received data on the view 
- it could be an issue of not displaying only on the current route 

So I have given you the above hints already about what it could be, also see lines `35-43 (highlighted)` inside `app.component.ts` for understanding how the component is communicative with the angular service to perform CRUD and fetch data.

2. fix it, 
3. and then run again. 

And now you should be able to see the AJAX requests taking place :) 
I am sure it will be very simple for you by now.

The expected output will be something like this: 





CRUD operations involve creating, reading, updating, and deleting data on the server or wherever you fetch the data from. Any Angular application working with data must be able to perform these four basic operations to be able to read and write the data.

> C- create data R- read the data U - update the data D- Delete the data


# READ DATA
To read the data from the API, we need to use **http.get()** method inside the service that we created.

We will read the data with the help of Observables returned from the created `UserData` array.

```
  getUsers(): Observable<UserData[]> {
    return this.http.get<UserData[]>(this.apiurl).pipe(
      tap(data => console.log(data)),
      catchError(this.handleError)
    );
  }
```

We created a method in this service with the name `getUsers`. This expects data of the format of `UserData`. Inside this method, we use the get method provided by HTTP and perform it on the `apiurl` that we defined earlier. The received data is then returned from the method for use in the component.

Here, we are using `pipe` and `tap` operators to read the data from the observable and `catchError` method to handle the error if it occurs during the HTTP request.

To call the **getUsers()** method, we will now subscribe to the returned observable inside the Component.

```
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Lets CRUD';
  users: UserData[]=[];

  constructor(private dataservice: DataService){}
  getUsers(){
    this.dataservice.getUsers().subscribe(data => {
      this.users=data;
    });
  }
 
ngOnInit(){
    this.getUsers();
}
```

In this component, you subscribe to the observable returned value and store it inside a local variable that can then be used to display the data on to the view.

Since we have subscribed to the component value, it is important to unsubscribe as well. There are multiple ways we can do that.

Simply unsubscribe from the observable in the `ngOnDestroy` lifecycle hook, or use an RxJS operator like `takeWhile`, `takeUntil` to be subscribed only until certain conditions hold true.

Let us look at an example below:

```
private _isComponentAlive : boolean = false;
```

```
private _getDashboardData(studentId, token) {

    this._getDashboardDataService.getDashboardData({
      student_id: studentId
    }, token)
      .pipe(
        takeWhile(() => this._isComponentAlive)
      )
      .subscribe({ next: this._getDashboardDataSuccessHandler, error: this._getDashboardDataErrorHandler });
  }
```

```
ngOnDestroy() {
  this._isComponentAlive = false;
}
```
Here you declare a private variable holding `true` value. You do the subscription only until the `_isComponentAlive` value is true. As soon as the component is destroyed, you turn the flag as `false`, and the subscription ends right there.

If you want to display the value that we received using the component subscription `users` on the `app.component.html`, use:

```
<table>
  <tr *ngFor="let u of users">
    <td>
      {{u.id}}
    </td>
    <td>
      {{u.name}}
    </td>
    <td>
      {{u.age}}
    </td>
    <td>  
      <button (click)="updateUser()"> UPDATE DATA</button>
    </td>
  </tr>
</table>
```

![intro-CRUD](/api/collection/5854561945255936/5664668925296640/page/6479897296896000/image/5915580520464384)

# Create data
To create data in an API, we need to perform HTTP POST operation and pass the data that needs to be inserted into the database. 

We will use a method called `addUser()` for that.

```
 addUser (user: User): Observable<User> { 
    user.id=null;
    return this.http.post<User>(this.apiurl, user, this.httpOptions).pipe(
    tap(data => console.log(data)),
    catchError(this.handleError)
  );
}
```

We created a method in the service to post our response data, and this would use the post method of our HTTP service.

On the component, call the `addUser()` method and subscribe to the returned observable.

Suppose you want to route to a different view after you submit some data,

```
    this.dataservice.addUser(this.userFormGroup.value).subscribe(data => {
      this.user = data;
      this._router.navigate(['/users']);
    });
```

# Update data

To update data, we take the `id` of a user and update their `age`. 

```
updateUser(user: User): Observable<User>{
  const url = `＄{this.apiurl}/＄{user.id}`;
  return this.http.put<User>(this.apiurl, user, this.httpOptions).pipe(
    map(() => user),
    catchError(this.handleError)
  );
}
```
An important thing to notice here is that, whenever we want to perform the update operation, we use `http.put()` method.

On the component.ts,

```
idtoUpdate = 1;
  updateUser() {
    this.dataservice.getUser(this.idtoUpdate).subscribe(data => {
      this.user = data;
      this.user.age = 'Updated Age';
      this.dataservice.updateUser(this.user).subscribe(data1 => {
        this.getUsers();
  });
});
```

Here we take an input from the user asking which student id to update, fetch that user, and update the value.

Next, we will see how to delete the data from the list of Users created in the database.

# Delete data

To delete a record from the database, we use the `http.delete()` method and subscribe to the returned observable in the component by creating a method `deleteUser()`.

```
deleteCar (id: number): Observable<User> {
  const url = `＄{this.apiurl}/＄{id}`;
  return this.http.delete<User>(url, this.httpOptions).pipe(
    catchError(this.handleError)
  );
}
```
On the component, we subscribe to the observable using:

```
 idtodelete=1;
  deleteUser() {
    this.dataservice.deleteCar(this.idtodelete).subscribe(data => {
       this.getUsers();
    });
  }
```

In the demo below, try out the different HTTP operations by yourselves with a real API instead of a mock API.

# Demo

Focus on how the APIs are in a separate file. We use these to perform all the HTTP operations in our `http-req.service.ts`. file. 

After receiving data from service into our app.component.ts, see how this gets assigned to `this.myPostsData` if the API succeeds. 

Here will be a small activity for you. In the code below, you can see we receive the value of myPostsData in `app.component.ts`. However, it doesn't display when you run the app.
1. Figure out what is missing,
- it could be API failure
- or it could be syntax issue.
- it could be missing imports, but that should throw compile time error,
-  it could be an issue the displaying of received data on the view 
- it could be an issue of not displaying only on the current route 

So I have given you the above hints already about what it could be, also see lines `35-43 (highlighted)` inside `app.component.ts` for understanding how the component is communicative with the angular service to perform CRUD and fetch data.

2. fix it, 
3. and then run again. 

And now you should be able to see the AJAX requests taking place :) 
I am sure it will be very simple for you by now.

The expected output will be something like this: 




In this lesson, we will look at performing HTTP operations in Angular either with a mock or real API.

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

Performing CRUD Operations