http mern full stack

1. HTTP AND OBSERVABLES IN
ANGULAR
BY: ABHISHEK PRASAD
210303130027(CC)

2. INTRODUCTION TO ANGULAR
What is Angular?
• A platform and framework for building single-page client applications using HTML
and TypeScript.
• Developed and maintained by Google, Angular integrates a range of features like
routing, forms management, and client-server communication.

3. CORE FEATURES OF ANGULAR:
• Component-Based Architecture: Angular structures applications as a tree of interconnected
components, each encapsulating elements of the UI.
• TypeScript-Based: Offers improved tooling, predictable static typing, and enhanced navigation and
refactoring services1.
• Data Binding: Facilitates the synchronization between the DOM and the component’s logic2.
• Dependency Injection: Angular’s powerful DI framework provides services to components, allowing for
greater modularity and reusability2.
• Directives: Extend HTML with new attributes called directives, which are great for encapsulating UI
behaviors2.
• Routing & Navigation: The Angular Router enables navigation from one view to the next as users
perform application tasks

4. UNDERSTANDING HTTP IN ANGULAR
HTTP in Web Applications
• HTTP (Hypertext Transfer Protocol) is the foundation of data
communication for the web, used for fetching HTML pages, files, or
data.
• In Angular, HTTP communication is handled through the HttpClient
module, which provides a way to perform HTTP requests and
handle responses.

5. UNDERSTANDING HTTP IN ANGULAR
Angular’s HttpClient
• A service that allows making HTTP requests to fetch or save data.
• Returns Observables to handle asynchronous operations, providing advantages like
cancellability and retry logic.
Making HTTP Requests
• Use HttpClient.get() to fetch data from a server.
• The method sends an HTTP request and returns an Observable that emits the requested data
when the response is received

6. UNDERSTANDING HTTP IN ANGULAR
Request Configuration
• Configure requests with headers, query parameters, and options for observing the
response or reporting progress.
• Important options include observe and responseType properties, which specify how much
of the response to return and the desired format of the returned data
Handling JSON Data
• Applications often request JSON data from servers.
• Angular’s HttpClient simplifies fetching JSON data, with most get() calls not requiring
additional options since JSON is the default data format

7. OBSERVABLES IN ANGULAR
What are Observables?
• A method for managing asynchronous data streams and events in Angular.
• They are part of the RxJS library and are used extensively within Angular
applications.
Key Features of Observables:
• Asynchronous Operations: Handle HTTP requests, user inputs, and events.
• Multiple Values Over Time: Emit zero or more values and handle them as a stream.
• Cancellation: Subscriptions to observables can be canceled, unlike promises.
• Operators: Apply functions to each item emitted by an observable.

8. OBSERVABLES IN ANGULAR
Usage in Angular
• HTTP Client: Angular’s HttpClient uses observables for handling AJAX requests and
responses.
• EventEmitter: Components communicate with each other using EventEmitter, which is an
observable that emits events.
• Async Pipe: Automatically subscribes to observables and updates the view with the latest
emitted values.
Advantages Over Promises
• More powerful and flexible, especially for complex data flows and multiple values.
• Better error handling and the ability to retry operations.

9. HTTP AND OBSERVABLES IN ANGULAR
Synergy of HTTP and Observables:
• Angular’s HttpClient uses Observables to handle HTTP requests, providing a robust framework for managing
asynchronous data.
Making HTTP Requests with Observables:
• Use HttpClient methods like get, post, put, and delete to interact with a server.
• These methods return Observables, allowing you to subscribe and handle the emitted data when the request is
completed.
Benefits of This Approach:
• Streamlined Error Handling: Use operators like catchError to manage errors gracefully.
• Cancellation: Cancel HTTP requests easily if they are no longer needed.
• Retry Logic: Implement retry strategies for failed HTTP requests using the retry operator.

10. FETCHING DATA WITH HTTP AND OBSERVABLES
Objective:
• Demonstrate how to fetch and display data from a server using Angular’s HttpClient and Observables.
Service Creation:
• Define a service that uses HttpClient to make a GET request.
• The service returns an Observable that emits the data when the response is received.
Component Subscription:
• In the component, subscribe to the Observable returned by the service.
• Assign the emitted data to a variable for display.

11. ERROR HANDLING IN HTTP REQUESTS
• Importance of Error Handling: Robust error handling is essential for a resilient Angular
application, ensuring a smooth user experience even when things go wrong.
• Using catchError Operator: The catchError operator is pivotal for handling errors in
Observable streams, particularly in HTTP requests made with Angular’s HttpClient.
• Centralizing Error Handling: Consider creating a global error-handling service that can be
used across different components and services for consistency and maintainability.
• Providing Meaningful Error Messages: When an error occurs, provide clear and actionable
feedback to the user, without exposing sensitive details.
• Logging Errors: Implement a logging strategy to capture errors for debugging and
monitoring application health.

12. THANK YOU