Angular Tutorial: GET, POST, PUT, DELETE

Welcome to the Angular Tutorial! Today, we'll dive into the world of HTTP methods - GET, POST, PUT, and DELETE. These methods are fundamental in web development, allowing us to interact with servers and databases. Let's get started!

GET 🎯

The GET method is used to retrieve data from a server. Here's a simple example of making a GET request in Angular:

typescript

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

constructor(private http: HttpClient) {}

getData() {
  this.http.get('https://api.example.com/data').subscribe(data => {
    console.log(data);
  });
}

In this example, we're using the HttpClient to make a GET request to https://api.example.com/data. The subscribe method is called when the data is returned, and we log it to the console.

💡 Pro Tip: Remember, GET requests should not change data on the server. They are solely for retrieving data.

POST 🎯

The POST method is used to send data to a server. Here's an example of making a POST request in Angular:

typescript

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

constructor(private http: HttpClient) {}

postData(data) {
  this.http.post('https://api.example.com/data', data).subscribe(response => {
    console.log(response);
  });
}

In this example, we're sending the data object to https://api.example.com/data. The server will process the data and return a response, which we log to the console.

PUT 🎯

The PUT method is used to update existing data on a server. Here's an example of making a PUT request in Angular:

typescript

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

constructor(private http: HttpClient) {}

updateData(id, data) {
  this.http.put(`https://api.example.com/data/${id}`, data).subscribe(response => {
    console.log(response);
  });
}

In this example, we're updating the data with the given id on https://api.example.com/data. We send the data object to be updated.

DELETE 🎯

The DELETE method is used to delete data from a server. Here's an example of making a DELETE request in Angular:

typescript

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

constructor(private http: HttpClient) {}

deleteData(id) {
  this.http.delete(`https://api.example.com/data/${id}`).subscribe(response => {
    console.log(response);
  });
}

In this example, we're deleting the data with the given id on https://api.example.com/data.

TypeScript Types

In TypeScript, we can define types for our variables. Here's an example:

typescript

let name: string = 'John Doe';
let age: number = 30;
let isStudent: boolean = false;

In this example, name is a string, age is a number, and isStudent is a boolean.

That's all for today! In the next lesson, we'll explore more advanced topics in Angular. Stay tuned! 📝

Remember to practice the examples provided and try to implement them in your own projects. Happy coding! ✅