Building Components and Services
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
# Angular Architecture: Components & Services
|
||||
|
||||
### Overview
|
||||
This project demonstrates the basic concepts of **Angular Components and Services**.
|
||||
Angular applications are built using components that manage the user interface and services that handle business logic and data sharing.
|
||||
|
||||
The goal of this task is to understand how components and services work together in an Angular application.
|
||||
|
||||
---
|
||||
|
||||
## Angular Components
|
||||
|
||||
A **Component** is the fundamental building block of an Angular application.
|
||||
It controls a part of the user interface (UI) and defines how that UI behaves.
|
||||
|
||||
Each component consists of:
|
||||
|
||||
- **TypeScript Class** – Handles logic and data.
|
||||
- **HTML Template** – Defines the structure of the UI.
|
||||
- **CSS Styles** – Controls the appearance.
|
||||
|
||||
### Advantages of Components
|
||||
- Reusable UI elements
|
||||
- Better code organization
|
||||
- Easier debugging and maintenance
|
||||
- Modular application structure
|
||||
|
||||
---
|
||||
|
||||
## Angular Services
|
||||
|
||||
A **Service** is used to share data, logic, or functionality across multiple components.
|
||||
|
||||
Services help keep components simple by separating business logic from UI logic.
|
||||
|
||||
Services are commonly used for:
|
||||
- Fetching data from APIs
|
||||
- Sharing data between components
|
||||
- Implementing business logic
|
||||
- Performing calculations
|
||||
|
||||
---
|
||||
|
||||
## How Components and Services Work Together
|
||||
|
||||
1. The **Component** handles user interaction.
|
||||
2. The **Service** manages data and business logic.
|
||||
3. Angular injects the service into the component using Dependency Injection.
|
||||
4. The component displays the result in the UI.
|
||||
|
||||
---
|
||||
|
||||
### Useful Commands Used Today
|
||||
```bash
|
||||
# Generate a new component
|
||||
ng generate component components/task-list
|
||||
|
||||
# Generate a new service
|
||||
ng generate service services/task
|
||||
Reference in New Issue
Block a user