59 lines
1.7 KiB
Markdown
59 lines
1.7 KiB
Markdown
# 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
|
||
```bash
|
||
# Generate a new component
|
||
ng generate component components/task-list
|
||
|
||
# Generate a new service
|
||
ng generate service services/task |