Week 4 Day 2: Implemented Angular services and dependency injection
This commit is contained in:
32
Week-4/Day-2/Reame.md
Normal file
32
Week-4/Day-2/Reame.md
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
# Week 4 – Day 2: Angular Services & Dependency Injection
|
||||||
|
|
||||||
|
## Date
|
||||||
|
06 January 2026
|
||||||
|
|
||||||
|
## Objective
|
||||||
|
To learn how to use Angular services for shared logic and understand Dependency Injection for better application design.
|
||||||
|
|
||||||
|
## Topics Covered
|
||||||
|
- Introduction to Angular Services
|
||||||
|
- Creating Services using Angular CLI
|
||||||
|
- Dependency Injection (DI)
|
||||||
|
- Sharing Data Across Components
|
||||||
|
- Service Lifecycle
|
||||||
|
|
||||||
|
## Activities Performed
|
||||||
|
- Created custom Angular services
|
||||||
|
- Injected services into components
|
||||||
|
- Implemented reusable business logic
|
||||||
|
- Shared data between multiple components
|
||||||
|
- Understood how Angular manages dependencies internally
|
||||||
|
|
||||||
|
## Tools & Technologies Used
|
||||||
|
- Angular
|
||||||
|
- TypeScript
|
||||||
|
- Angular CLI
|
||||||
|
|
||||||
|
## Learning Outcome
|
||||||
|
Learned how to separate business logic from UI logic using services and effectively use dependency injection.
|
||||||
|
|
||||||
|
## Status
|
||||||
|
Completed
|
||||||
34
Week-4/Day-2/angular-services.md
Normal file
34
Week-4/Day-2/angular-services.md
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
## Angular Services & Dependency Injection
|
||||||
|
|
||||||
|
### What is a Service?
|
||||||
|
A service is used to store reusable business logic that can be shared across multiple components.
|
||||||
|
Examples:
|
||||||
|
- Fetching data
|
||||||
|
- Authentication logic
|
||||||
|
- Utility functions
|
||||||
|
|
||||||
|
### Why Services are Needed?
|
||||||
|
- Avoids code duplication
|
||||||
|
- Improves maintainability
|
||||||
|
- Follows separation of concerns
|
||||||
|
|
||||||
|
### Creating a Service
|
||||||
|
ng generate service data
|
||||||
|
|
||||||
|
### Dependency Injection (DI)
|
||||||
|
Angular automatically provides services to components using DI.
|
||||||
|
constructor(private dataService: DataService) {}
|
||||||
|
|
||||||
|
### Using Service Methods
|
||||||
|
getMessage() {
|
||||||
|
return "Welcome to Angular Services";
|
||||||
|
}
|
||||||
|
|
||||||
|
### Practical Work Done
|
||||||
|
- Created services
|
||||||
|
- Injected services into components
|
||||||
|
- Shared data between components
|
||||||
|
- Tested service methods
|
||||||
|
|
||||||
|
### Learning Outcome
|
||||||
|
Understood how Angular manages shared logic efficiently using services and dependency injection.
|
||||||
Reference in New Issue
Block a user