सर्विस में Signal Stores
सिग्नल-आधारित सर्विस में ऐप की अवस्था रखें
सर्विस में Signal Stores, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
स्थिति के रूप में सिग्नल
Angular के सिग्नल प्रतिक्रियाशील मान होते हैं, जो बदलने पर उपभोक्ताओं को सूचित करते हैं। सिग्नल एक मान रखता है और उसे पढ़ने वाली किसी भी गणना या टेम्पलेट को फिर से चलाता है।
किसी @Injectable सेवा के भीतर सिग्नल रखने से कई घटक एक ही प्रतिक्रियाशील स्थिति साझा कर सकते हैं।
न्यूनतम सिग्नल स्टोर
एक सेवा बनाएँ और स्थिति को signal() में रखें। लिखे जा सकने वाले सिग्नल को निजी रखें और केवल-पठन दृश्य सार्वजनिक करें।
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
private _count = signal(0);
readonly count = this._count.asReadonly();
increment() { this._count.update(c => c + 1); }
}providedIn root क्यों
providedIn: 'root' सेवा को पूरे ऐप में एकल उदाहरण बना देता है। जो भी घटक इसे इंजेक्ट करता है, वह उसी सिग्नल उदाहरण को साझा करता है, इसलिए स्थिति समन्वित रहती है।
सिग्नल पढ़ना
उसका मान पढ़ने के लिए सिग्नल को फ़ंक्शन की तरह कॉल करें। टेम्पलेट के भीतर Angular इस पठन को ट्रैक करता है और मान बदलने पर DOM को अपने-आप अपडेट करता है।
import { Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';
@Component({
selector: 'app-counter',
template: '<button (click)="store.increment()">{{ store.count() }}</button>'
})
export class CounterComponent {
store = inject(CounterStore);
}asReadonly स्थिति की सुरक्षा करता है
asReadonly() ऐसा सिग्नल लौटाता है जिसे पढ़ा जा सकता है, लेकिन उसमें लिखा नहीं जा सकता। घटक गलती से उस पर set() या update() कॉल नहीं कर सकते, इसलिए सभी बदलाव स्टोर की विधियों के माध्यम से होते हैं।
set बनाम update
जब अगला मान सीधे उपलब्ध हो, तब set(value) का उपयोग करें। जब अगला मान वर्तमान मान पर निर्भर हो, तब update(fn) का उपयोग करें।
private _user = signal<User | null>(null);
setUser(u: User) { this._user.set(u); }
clearUser() { this._user.set(null); }
touch() { this._user.update(u => u ? { ...u, seen: true } : u); }एक स्टोर में कई सिग्नल
एक स्टोर में स्थिति के अलग-अलग हिस्सों को दर्शाने वाले कई सिग्नल हो सकते हैं। हर लिखे जा सकने वाले सिग्नल को निजी रखें और उसके केवल-पठन रूप सार्वजनिक करें।
private _items = signal<Item[]>([]);
private _loading = signal(false);
readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();विधियाँ तर्क को समाहित करती हैं
व्यावसायिक नियम घटकों में नहीं, बल्कि स्टोर की विधियों में होने चाहिए। घटक उद्देश्य स्पष्ट करने वाली विधियों, जैसे addToCart(item), को कॉल करते हैं और स्टोर तय करता है कि स्थिति कैसे बदलेगी।
addToCart(item: Item) {
this._items.update(list => [...list, item]);
}
removeFromCart(id: string) {
this._items.update(list => list.filter(i => i.id !== id));
}सब्सक्रिप्शन की आवश्यकता नहीं
RxJS-आधारित सेवाओं के विपरीत, सिग्नल स्टोर को किसी subscribe() या मैन्युअल अनसब्सक्रिप्शन की आवश्यकता नहीं होती। टेम्पलेट में सिग्नल पढ़ने से प्रतिक्रियाशीलता जुड़ जाती है और घटक नष्ट होने पर Angular इसे साफ़ कर देता है।
inject() से इंजेक्शन
inject() फ़ंक्शन कंस्ट्रक्टर, फ़ील्ड आरंभकर्ता और फ़ैक्टरी फ़ंक्शन में काम करता है। स्टोर का उदाहरण प्राप्त करने का यह आधुनिक तरीका है।
export class CartComponent {
private store = inject(CartStore);
items = this.store.items; // read-only signal
}सिग्नल स्टोर का परीक्षण
सिग्नल स्टोर साधारण क्लास होते हैं, इसलिए उनके परीक्षण सरल होते हैं: एक उदाहरण बनाएँ, कोई विधि कॉल करें और सिग्नल का मान समकालिक रूप से पढ़ें। अतुल्यकालिक व्यवस्था की आवश्यकता नहीं होती।
it('increments', () => {
const store = new CounterStore();
store.increment();
expect(store.count()).toBe(1);
});त्वरित जाँच
सिग्नल स्टोर की अपनी समझ जाँचें।
पुनरावलोकन
आपने सिग्नल-आधारित स्टोर बनाना सीखा: लिखे जा सकने वाले सिग्नल निजी रखें, asReadonly() दृश्य सार्वजनिक करें, विधियों के भीतर set/update से बदलाव करें और inject() से एकल उदाहरण इंजेक्ट करें। इसमें सब्सक्रिप्शन की आवश्यकता नहीं होती, परीक्षण आसान होता है और प्रतिक्रियाशील स्थिति साझा की जा सकती है।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 38
- पाठ
- 144
अक्सर पूछे जाने वाले प्रश्न
क्या “सर्विस में Signal Stores” पाठ निःशुल्क है?
हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “सर्विस में Signal Stores” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“सर्विस में Signal Stores” में मैं क्या सीखूँगा?
सिग्नल-आधारित सर्विस में ऐप की अवस्था रखें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“सर्विस में Signal Stores” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- सर्विस में Signal Stores
- computed से अवस्था प्राप्त करना
- अवस्था को अपरिवर्तनीय रूप से अपडेट करना
- सिग्नल और RxJS को जोड़ना