1.7 KiB
1.7 KiB
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
- The Component handles user interaction.
- The Service manages data and business logic.
- Angular injects the service into the component using Dependency Injection.
- The component displays the result in the UI.
Useful Commands
# Generate a new component
ng generate component components/task-list
# Generate a new service
ng generate service services/task