Aliens School
Cinematic Knowledge Experience
0%
Aliens School
Now Playing
Aliens School ยท HIEN
โŒจ๏ธ Keyboard Shortcuts
โ†’Next slide โ†Previous slide SpacePlay / Pause MNarration on/off FFullscreen ?Show/hide this
Press any key to close
Skill Topic ยท Cinematic

๐Ÿ“˜ Angular โ€” Services & Dependency Injection

Services logic ko components se alag karte hain โ€” clean, reusable, testable code! Jaise ekโ€ฆ

Overview
๐ŸŒŸ

๐Ÿ“˜ Angular โ€” Services & Dependency Injection โ€” Quick Facts

๐Ÿ“Œ

Component (Waiter): Service (Chef)

๐ŸŽฏ

UI display karo: Data fetch karo โ€” API calls

โšก

User events handle karo (click, input): Business logic โ€” calculations,โ€ฆ

๐Ÿ”‘

Template + styles: Shared state โ€” multiple componentsโ€ฆ

Topic 1
โœจ

๐Ÿ“Œ 1. Service Kya Hai? (Concept + Analogy)

๐Ÿ’ก

๐Ÿฝ๏ธ Waiter (Component) = Customerโ€ฆ

๐Ÿ”‘

๐Ÿ‘จโ€๐Ÿณ Chef (Service) = Actual khaanaโ€ฆ

โšก

๐Ÿ’ฐ Cashier (Another Service) =โ€ฆ

Topic 2
๐Ÿ’ก

๐Ÿ“Œ 2. Service Create Karo

๐Ÿ’ก CLI Command `bash Service generate karo ng generate service services/user โ†‘ Creates:โ€ฆ
Topic 3
โœจ

๐Ÿ“Œ 3. Dependency Injection (DI) โ€” Service Use Karo

๐Ÿ’ก

Tumhe nahi pata bijli kahan se aaโ€ฆ

๐Ÿ”‘

Tumhe wire layout nahi samajhna

โšก

Sirf plug lagao aur kaam karo!

Topic 4
๐Ÿ“ฅ ๐Ÿ“ฅ ๐Ÿง  ๐Ÿ”ฌ ๐Ÿ’ก ๐ŸŽฏ

๐Ÿ“Œ 4. DI System โ€” How It Works (Deep Dive)

โญ DI Flow `mermaid sequenceDiagram participant C as ๐Ÿงฉ Component participant I as ๐Ÿ’‰ Injectorโ€ฆ
Topic 5
โœจ

๐Ÿ“Œ 5. providedIn Options โ€” Detail

๐Ÿ”‘ Option 1: providedIn: 'root' (DEFAULT โ€” RECOMMENDED) `typescript @Injectable({โ€ฆ
Topic 6
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

๐Ÿ“Œ 6. Service me Service Inject Karo (DI Chain)

โœจ ๐Ÿ’ก Analogy: Chef ko bhi ingredients supplier chahiye. Chef (AuthService) khud se tomatoesโ€ฆ
Topic 7
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

๐Ÿ“Œ 7. InjectionToken โ€” Non-Class Values Inject Karo

๐ŸŒŸ Problem Kya Hai? `typescript // โŒ Problem: String, number, object ko directly inject nahiโ€ฆ
Topic 8
๐Ÿš€

๐Ÿ“Œ 8. Provider Variations โ€” useClass, useValue, useFactory, useExisting

๐Ÿ’ก

useClass: Domino's ki jagah Pizzaโ€ฆ

๐Ÿ”‘

useValue: Fixed menu โ€” hameshaโ€ฆ

โšก

useFactory: Chef decide karegaโ€ฆ

๐ŸŽฏ

useExisting: "Margherita = Classicโ€ฆ

Topic 9
โœจ

๐Ÿ“Œ 9. DI Decorators โ€” @Optional, @Self, @SkipSelf

๐Ÿ“š Kab Use Karo? `typescript import { Optional, Self, SkipSelf, Host, inject } fromโ€ฆ
Topic 10
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

๐Ÿ“Œ 10. Practical Example โ€” Shopping Cart Service (Reactive)

๐Ÿ’ก

ProductListComponent โ†’ productsโ€ฆ

๐Ÿ”‘

CartComponent โ†’ cart items dikhataโ€ฆ

โšก

HeaderComponent โ†’ cart badge (itemโ€ฆ

๐ŸŽฏ

Sab components ko SAME cart dataโ€ฆ

Topic 11
๐Ÿ”’

๐Ÿ“Œ 11. Common Mistakes โ€” Beginners Yeh Galtiyan Karte Hain

๐ŸŽฏ | # | โŒ Galti | โœ… Solution | |---|--------|------------| | 1 | new UserService() manuallyโ€ฆ
Topic 12
โœจ

โœ… Summary

โญ ๐Ÿ“Œ Yaad Rakho: - Service = Reusable logic โ€” component se alag, @Injectable class -โ€ฆ
Topic 13
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

๐Ÿงช Khud Try Karo!

๐Ÿ’ก

todos array (id, title, completed)

๐Ÿ”‘

getTodos(), addTodo(title),โ€ฆ

โšก

TodoService inject karo

๐ŸŽฏ

Input field + Add button

Diagram
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

Visual Flow

๐Ÿ“Š Diagram visualization โ€” details in narration
Diagram
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

Visual Flow

๐Ÿ“Š Diagram visualization โ€” details in narration
Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 1

๐Ÿ“˜ Angular โ€” Services & Dependency Injection ka sabse sahi definition kya hai?

Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 2

๐Ÿ“˜ Angular โ€” Services & Dependency Injection ka 'UI display karo' kya hai?

Complete! ๐ŸŽ‰
COMPLETE

๐Ÿ“˜ Angular โ€” Services & Dependency Injection Complete!

Aliens School ยท HIEN ยท Cinematic Knowledge

โœ…

๐Ÿ“˜ Angular โ€” Services & Dependency Injection Complete

1/20
0:00
REC 00:00ESC=Cancel
Aliens School
3
Recording shuru hone wali hai...
โœ…
Recording Complete
Video process ho rahi hai...
Live Class
Slide 1 / 7
Timer
00:00
๐Ÿ“ Speaker Notes
โ€”
โญ๏ธ Up Next
โ€”
โ€”
๐Ÿ—‚๏ธ All Slides