Angular is a platform for building single-page applications using HTML and TypeScript. It uses an component-based architecture with features like routing, data binding, dependency injection and directives. HTTP requests in Angular are handled through the HttpClient module which returns Observables. Observables allow handling asynchronous data streams and events. The document discusses how Angular's HttpClient uses Observables to make HTTP requests and handle responses, providing robust asynchronous data management. It provides an example of fetching data from a server using a service that returns an Observable, which a component subscribes to in order to display the data. The importance of error handling with HTTP requests is also covered.

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