Angular में सर्विस बनाना

आइए सर्विसेज का अध्ययन अपनी खुद की सर्विस बनाकर शुरू करें। इसके लिए फोल्डर test/src/app में फाइल data.service.ts बनाएं। हमारी सर्विस कुछ डेटा को स्क्रीन पर प्रदर्शित करने के लिए उत्तरदायी होगी।

आइए हमारी सर्विस के लिए एक क्लास बनाएं:

data.service.tsexport class DataService {
  
}

अब हमें Injectable डेकोरेटर की आवश्यकता है। इसका उपयोग यह संभव बनाएगा कि सर्विस क्लास को कंपोनेंट क्लास में इंजेक्ट किया जा सके। इंजेक्शन के बारे में हम अगले पाठ में बात करेंगे। अब आवश्यक डेकोरेटर को इम्पोर्ट करते हैं:

data.service.tsimport { Injectable } from '@angular/core';

export class DataService {
  
}

इसे हमारी क्लास पर अप्लाई करते हैं:

data.service.tsimport { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  
}

अब ऐसा करते हैं कि हमारी क्लास में कुछ डेटा हो। आमतौर पर Angular एप्लिकेशन में सर्वर से डेटा लोड होता है, लेकिन हम शैक्षिक उद्देश्यों के लिए एक ऐरे का उपयोग करेंगे। इसे एक प्राइवेट प्रॉपर्टी में बनाते हैं:

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];
}

अब डेटा प्राप्त करने के लिए एक मेथड लिखते हैं:

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];

  getData(): string[] {
    return this.data;
  }
}

हमारी सर्विस तैयार है। अगले पाठ में हम इसे कंपोनेंट क्लास में कनेक्ट करेंगे।

typescript[
  {
    name: 'prod1',
    cost: 100,
  },
  {
    name: 'prod2',
    cost: 200,
  },
  {
    name: 'prod3',
    cost: 300,
  },
]