वैश्विक स्थिरांक को परिभाषित करें

258

कोणीय 1.x में आप स्थिरांक को इस तरह परिभाषित कर सकते हैं:

angular.module('mainApp.config', [])
    .constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/')

कोणीय (टाइपस्क्रिप्ट के साथ) में क्या समान होगा?

मैं बस अपनी सभी सेवाओं में एपीआई आधार यूआरएल को बार-बार दोहराना नहीं चाहता।

typescript  angular 
— AndreFeijo
स्रोत

जवाबों:

265

नीचे परिवर्तन मेरे लिए कोणीय 2 अंतिम संस्करण पर काम करता है:

export class AppSettings {
   public static API_ENDPOINT='http://127.0.0.1:6666/api/';
}

और फिर सेवा में:

import {Http} from 'angular2/http';
import {Message} from '../models/message';
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {AppSettings} from '../appSettings';
import 'rxjs/add/operator/map';

@Injectable()
export class MessageService {

    constructor(private http: Http) { }

    getMessages(): Observable<Message[]> {
        return this.http.get(AppSettings.API_ENDPOINT+'/messages')
            .map(response => response.json())
            .map((messages: Object[]) => {
                return messages.map(message => this.parseData(message));
            });
    }

    private parseData(data): Message {
        return new Message(data);
    }
}
— AndreFeijo
स्रोत
मुझे लगता है कि yout AppSettingsवर्ग अमूर्त होना चाहिए और API_ENDPOINTसदस्य होना चाहिए readonly।
— फिलिप गियोसेफी
164

स्वयं कोणीय टीम द्वारा प्रदान किए गए कॉन्फ़िगरेशन के लिए समाधान यहां पाया जा सकता है ।

यहाँ सभी संबंधित कोड है:

1) app.config.ts

import { OpaqueToken } from "@angular/core";

export let APP_CONFIG = new OpaqueToken("app.config");

export interface IAppConfig {
    apiEndpoint: string;
}

export const AppConfig: IAppConfig = {    
    apiEndpoint: "http://localhost:15422/api/"    
};

2) app.module.ts

import { APP_CONFIG, AppConfig } from './app.config';

@NgModule({
    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }
    ]
})

3) your.service.ts

import { APP_CONFIG, IAppConfig } from './app.config';

@Injectable()
export class YourService {

    constructor(@Inject(APP_CONFIG) private config: IAppConfig) {
             // You can use config.apiEndpoint now
    }   
}

अब आप स्ट्रिंग नामों का उपयोग किए बिना और स्थिर चेकों के लिए अपने इंटरफ़ेस के उपयोग के बिना हर जगह कॉन्फ़िगरेशन को इंजेक्ट कर सकते हैं।

आप निश्चित रूप से इंटरफ़ेस और निरंतर को अलग कर सकते हैं जैसे उत्पादन और विकास में विभिन्न मूल्यों की आपूर्ति करने में सक्षम होना

— इल्या चेर्नोमोर्डिक
स्रोत
3
यह केवल तभी काम करता है जब मैं सेवा के निर्माता के प्रकार को निर्दिष्ट नहीं करता हूं। तो यह तब काम करता है जब मैं कंस्ट्रक्टर (@ इंजेक्ट (APP_CONFIG) प्राइवेट कॉन्फिग) करता हूं {} यहां इसका उल्लेख है: blog.thoughtram.io/angular/2016/05/23/… लेकिन क्यों नहीं।
— मुकुस
मुझे लगता है कि आपने कुछ आयात या निर्यात कीवर्ड या ऐसा कुछ याद किया, क्योंकि मैं इसे इंटरफ़ेस के साथ उपयोग करता हूं और जैसा कि आप कहते हैं कि यह स्पष्ट रूप से सांख्यिकीय रूप से टाइप करने के लिए बहुत महत्वपूर्ण है। शायद आपको यहां सटीक अपवाद प्रदान करने की आवश्यकता है।
— इल्या चेर्नोमोर्डिक
46
इन समाधानों में से कोई भी, यहां तक ​​कि कोणीय टीम द्वारा अनुशंसित दृष्टिकोण सुरुचिपूर्ण नहीं दिखता है। कोणीय 2 में स्थिरांक को एक बोझिल प्रक्रिया बनाने की कोशिश क्यों की जा रही है? कठबोली आप देख सकते हैं कि Angular1 ने इसे कितना सहज बनाया? सब गड़बड़ क्यों?
— खोई
31
किसी और के लिए जो इस उत्तर को हिट करता है, AngaL v4 में OpaqueToken, InjectionToken के लिए "पदावनत" है - blog.thoughtram.io/angular/2016/05/23/…
— mtpultz
3
यह भावना में चरण 1 से कोड डाल करने के लिए होगा environment.tsऔर environment.prod.tsइसलिए आप प्रति वातावरण अलग स्थिरांक हो सकता है? @IlyaChernomordik ने अपने उत्तर के अंतिम पैराग्राफ में इसका उल्लेख करना शुरू कर दिया।
— रॉबर्ट बर्नस्टीन
64

Angular2 में, आप निम्नलिखित है प्रदान परिभाषा है, जो आपको निर्भरता की स्थापना विभिन्न प्रकार के कर सकते हैं:

provide(token: any, {useClass, useValue, useExisting, useFactory, deps, multi}

कोणीय की तुलना में १

app.serviceमें Angular1, Angular2 के बराबर है useClass।

app.factoryमें Angular1, Angular2 के बराबर है useFactory।

app.constantऔर कम बाधाओं के साथ app.valueसरलीकृत किया गया है useValue। यानी configअब कोई ब्लॉक नहीं है।

app.provider - एंगुलर 2 में कोई समकक्ष नहीं है।

उदाहरण

रूट इंजेक्टर के साथ सेटअप करने के लिए:

bootstrap(AppComponent,[provide(API_ENDPOINT, { useValue='http://127.0.0.1:6666/api/' })]);

या अपने घटक इंजेक्टर के साथ सेटअप करें:

providers: [provide(API_ENDPOINT, { useValue: 'http://127.0.0.1:6666/api/'})]

provide इसके लिए छोटा हाथ है:

var injectorValue = Injector.resolveAndCreate([
  new Provider(API_ENDPOINT, { useValue: 'http://127.0.0.1:6666/api/'})
]);

इंजेक्टर के साथ, मूल्य प्राप्त करना आसान है:

var endpoint = injectorValue.get(API_ENDPOINT);
— pixelbits
स्रोत
2
मैं वास्तव में अपनी सेटिंग्स को एक बाहरी फ़ाइल में रखना चाहता हूँ जैसे: settings.ts यह फ़ाइल कैसी लगेगी?
— आंद्रेफेइजो
क्या आपने सर्वर-साइड जावास्क्रिप्ट जैसे NodeJS पर विचार किया है?
— पिक्सीबिट्स
5
क्षमा करें, मुझे समझ में नहीं आया कि मैं इसे अपनी सेवा में कैसे इंजेक्ट करूं? जैसा कि मैं एक बाहरी फ़ाइल का उपयोग कर रहा हूं, क्या मुझे इसे निर्यात करने की आवश्यकता है?
— आंद्रेफेइजो
मैं इसे आपकी बिल्ड कॉन्फ़िगरेशन प्रक्रिया का हिस्सा बनाऊंगा। यानी आपके वातावरण के आधार पर, विभिन्न फ़ाइलों को एक साथ संकलित / पैकेज करें, फिर परिनियोजित करें। यह सब आप उचित मॉड्यूल के साथ NodeJS के साथ कर सकते हैं।
— 7
1
दुर्भाग्य से NodeJS एक विकल्प नहीं है।
— आंद्रेफेइजो
59

कोणीय 4 में, आप अपने सभी ग्लोबल्स को रखने के लिए पर्यावरण वर्ग का उपयोग कर सकते हैं।

आपके पास डिफ़ॉल्ट रूप से environment.ts और environment.prod.ts हैं।

उदाहरण के लिए

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8000/api/'
};

और फिर आपकी सेवा में:

import { environment } from '../../environments/environment';
...
environment.apiUrl;
— नाचो
स्रोत
यदि आप constकिसी सेवा के अंदर पहुंचने का प्रयास कर रहे हैं , तो आपको अपने ऐप मॉड्यूल के प्रदाताओं के सरणी में "प्रदान" करना पड़ सकता है { provide: 'ConstName', useValue: ConstName }:। मुझे इसके बिना रनटाइम त्रुटि मिल रही थी।
— daleyjem
@daleyjem ऐसा इसलिए है क्योंकि आप इसे इंजेक्ट करने का प्रयास कर रहे थे। यह दृष्टिकोण इंजेक्टर का उपयोग नहीं करता है
— अलुआन हदद
इस तरह एक स्थिरांक बनाना सबसे सरल है। मुझे लगता है कि डीआई को खोने के काउंटर तर्क और इस तरह से परीक्षण क्षमता / मॉकवैल्यू को खोना कुछ समय के लिए अति-सम्मोहित है। विशिष्ट एप्लिकेशन में हम परीक्षण को परेशान किए बिना इतने सारे गैर-डीआई घटक (आरएक्सजेएस) का उपयोग करते हैं।
— अमितेश ६
54

कोणीय 4+ के लिए अद्यतन किया गया

अब हम बस पर्यावरण फ़ाइल का उपयोग कर सकते हैं जो कोणीय डिफ़ॉल्ट प्रदान करती है यदि आपकी परियोजना कोणीय-क्ली के माध्यम से उत्पन्न होती है।

उदाहरण के लिए

आपके वातावरण फ़ोल्डर में निम्न फ़ाइलें बनाएँ

  • environment.prod.ts
  • environment.qa.ts
  • environment.dev.ts

और प्रत्येक फ़ाइल संबंधित कोड परिवर्तन जैसे:

  • environment.prod.ts

    export const environment = {
     production: true,
     apiHost: 'https://api.somedomain.com/prod/v1/',
     CONSUMER_KEY: 'someReallyStupidTextWhichWeHumansCantRead', 
     codes: [ 'AB', 'AC', 'XYZ' ],
};

  • environment.qa.ts

    export const environment = {
     production: false,
     apiHost: 'https://api.somedomain.com/qa/v1/',
     CONSUMER_KEY : 'someReallyStupidTextWhichWeHumansCantRead', 
     codes: [ 'AB', 'AC', 'XYZ' ],
};

  • environment.dev.ts

    export const environment = {
     production: false,
     apiHost: 'https://api.somedomain.com/dev/v1/',
     CONSUMER_KEY : 'someReallyStupidTextWhichWeHumansCantRead', 
     codes: [ 'AB', 'AC', 'XYZ' ],
};

उपयोग-मामला आवेदन में

आप किसी भी फ़ाइल जैसे सेवाओं में वातावरण आयात कर सकते हैं clientUtilServices.ts

import {environment} from '../../environments/environment';

getHostURL(): string {
    return environment.apiHost;
  }

निर्माण में उपयोग मामला

अपनी कोणीय cli फ़ाइल खोलें .angular-cli.jsonऔर अंदर "apps": [{...}]निम्नलिखित कोड जोड़ें

 "apps":[{
        "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts",
            "qa": "environments/environment.qa.ts",
           }
         }
       ]

आप उत्पादन के लिए निर्माण करना चाहते हैं, तो चलाने ng build --env=prodसे विन्यास पढ़ा जाएगा environment.prod.ts, उसी तरह यह तुम्हारे लिए क्या कर सकते हैं qaयाdev

## पुराने उत्तर

मैं अपने प्रदाता में नीचे की तरह कुछ कर रहा हूं:

import {Injectable} from '@angular/core';

@Injectable()
export class ConstantService {

API_ENDPOINT :String;
CONSUMER_KEY : String;

constructor() {
    this.API_ENDPOINT = 'https://api.somedomain.com/v1/';
    this.CONSUMER_KEY = 'someReallyStupidTextWhichWeHumansCantRead'
  }
}

तब मुझे कहीं भी सभी निरंतर डेटा तक पहुंच है 

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

import {ConstantService} from  './constant-service'; //This is my Constant Service


@Injectable()
export class ImagesService {
    constructor(public http: Http, public ConstantService: ConstantService) {
    console.log('Hello ImagesService Provider');

    }

callSomeService() {

    console.log("API_ENDPOINT: ",this.ConstantService.API_ENDPOINT);
    console.log("CONSUMER_KEY: ",this.ConstantService.CONSUMER_KEY);
    var url = this.ConstantService.API_ENDPOINT;
    return this.http.get(url)
  }
 }
— अंजुम ....
स्रोत
6
यह कॉन्स्टेंट की तरह काम नहीं करता है। एक स्थिर मूल्य हमेशा एक जैसा होता है। आपके मामले में, आपका API_ENDPOINTमूल्य किसी भी समय लिखा जा सकता है। यदि this.ConstantService.API_ENDPOINT = 'blah blah'आपके तथाकथित "स्थिर" से आयात होने के बाद कभी भी कक्षा में घोषित किया जाता है constant-service, तो API_ENDPOINT का नया मूल्य होगा 'blah blah'। आपका समाधान केवल यह बताता है कि किसी सेवा का उपयोग करके चर का उपयोग कैसे किया जाए और स्थिर का उपयोग करके नहीं।
— डेवनेर
1
@Devner सिर्फ उन्हें आसानी से बनाreadonly API_ENDPOINT :String;
— Flavien Volken
@ अंजूम कैसे कोणीय फाइलों का चयन करता है। क्या मुझे ऐप शुरू करते समय env नाम पास करना चाहिए?
— 1933
@notionquest हाँ आप इसे पास कर सकते हैं, जैसेng build --env=prod
— अंजुम ....
31

जबकि ApiEndpoint काम करता है एक स्ट्रिंग स्थिरांक के साथ एक AppSettings वर्ग के साथ दृष्टिकोण, यह आदर्श नहीं है क्योंकि हम यूनिट परीक्षण के समय कुछ अन्य मूल्यों के लिए इस वास्तविक ApiEndpoint को स्वैप करने में सक्षम नहीं होंगे।

हमें इस एपीआई एंडपॉइंट्स को अपनी सेवाओं में इंजेक्ट करने में सक्षम होने की आवश्यकता है (किसी सेवा को किसी अन्य सेवा में इंजेक्ट करने के बारे में सोचें)। हमें इसके लिए एक पूरी कक्षा बनाने की भी आवश्यकता नहीं है, हम बस इतना करना चाहते हैं कि हमारी एपिऑन पॉइंट होने वाली सेवाओं में एक स्ट्रिंग इंजेक्ट करें। पिक्सेलबिट्स द्वारा उत्कृष्ट उत्तर को पूरा करने के लिए , यहां पूरा कोड दिया गया है कि यह कोणीय 2 में कैसे किया जा सकता है:

पहले हमें एंगुलर को यह बताने की आवश्यकता है कि जब हम अपने ऐप में इसके बारे में पूछते हैं तो अपने एपइंडपॉइंट का एक उदाहरण कैसे प्रदान करते हैं (यह निर्भरता दर्ज करने के रूप में सोचें): 

bootstrap(AppComponent, [
        HTTP_PROVIDERS,
        provide('ApiEndpoint', {useValue: 'http://127.0.0.1:6666/api/'})
]);


और फिर सेवा में हम इंजेक्षन सेवा निर्माता में इस ApiEndpoint और कोणीय ऊपर हमारे पंजीकरण के आधार पर हमारे लिए प्रदान करेगा:

import {Http} from 'angular2/http';
import {Message} from '../models/message';
import {Injectable, Inject} from 'angular2/core';  // * We import Inject here
import {Observable} from 'rxjs/Observable';
import {AppSettings} from '../appSettings';
import 'rxjs/add/operator/map';

@Injectable()
export class MessageService {

    constructor(private http: Http, 
                @Inject('ApiEndpoint') private apiEndpoint: string) { }

    getMessages(): Observable<Message[]> {
        return this.http.get(`${this.apiEndpoint}/messages`)
            .map(response => response.json())
            .map((messages: Object[]) => {
                return messages.map(message => this.parseData(message));
            });
    } 
    // the rest of the code...
}
— मुर्तजा मनवी
स्रोत
1
अब उनके ट्यूटोरियल में कोणीय टीम द्वारा सिफारिश करने का एक "आधिकारिक" तरीका है। मैंने नीचे एक उत्तर जोड़ा है: ( stackoverflow.com/a/40287063/1671558 )
— इल्या चेर्नोमोर्डिक
1
यह कोड अब सटीक नहीं है, इसे लागू करने से AppComponent पर ApiEndpoint नहीं मिलेगी।
— विलियमएक्स जूल
ठीक है तो मैं अकेला नहीं हूँ। क्या आप जानते हैं कि यह किस संस्करण में टूट गया? वहाँ एक वैकल्पिक तरीका है कि एक वैश्विक वस्तु पर मूल्यों को परिभाषित करने की आवश्यकता नहीं है तो उन्हें उपलब्ध कराने?
— जेन्स बोडल
29

इस परिदृश्य के साथ यह मेरा हालिया अनुभव है:

  • @ कोणीय / पंजा: 1.0.0
  • नोड: 6.10.2
  • @ कोणीय / कोर: 4.0.0

मैंने यहां आधिकारिक और अपडेट किए गए डॉक्स का अनुसरण किया है:

https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#dependency-injection-tokens

लगता है OpaqueToken अब पदावनत हो गई है और हमें InjectionToken का उपयोग करना चाहिए , इसलिए ये मेरी फाइलें एक तेज गति से चल रही हैं:

app-config.interface.ts

export interface IAppConfig {

  STORE_KEY: string;

}

app-config.constants.ts

import { InjectionToken } from "@angular/core";
import { IAppConfig } from "./app-config.interface";

export const APP_DI_CONFIG: IAppConfig = {

  STORE_KEY: 'l@_list@'

};

export let APP_CONFIG = new InjectionToken< IAppConfig >( 'app.config' );

app.module.ts

import { APP_CONFIG, APP_DI_CONFIG } from "./app-config/app-config.constants";

@NgModule( {
  declarations: [ ... ],
  imports: [ ... ],
  providers: [
    ...,
    {
      provide: APP_CONFIG,
      useValue: APP_DI_CONFIG
    }
  ],
  bootstrap: [ ... ]
} )
export class AppModule {}

my-service.service.ts

  constructor( ...,
               @Inject( APP_CONFIG ) private config: IAppConfig) {

    console.log("This is the App's Key: ", this.config.STORE_KEY);
    //> This is the App's Key:  l@_list@

  }

परिणाम साफ है और इस मुद्दे में जॉन पापा की हालिया टिप्पणी के लिए कंसोल थैंक्स पर कोई चेतावनी नहीं है:

https://github.com/angular/angular-cli/issues/2034

कुंजी एक अलग फ़ाइल में लागू किया गया था इंटरफ़ेस।

— JavierFuentes
स्रोत
यह भी देखें stackoverflow.com/a/43193574/3092596 - जो मूल रूप से एक ही है, लेकिन प्रदाताओं के बजाय इंजेक्टेबल मॉड्यूल बनाता है
— goredwards
19

सभी समाधान जटिल लगते हैं। मैं इस मामले के लिए सबसे सरल समाधान की तलाश कर रहा हूं और मैं केवल स्थिरांक का उपयोग करना चाहता हूं। स्थिरांक सरल हैं। क्या ऐसा कुछ है जो निम्नलिखित समाधान के खिलाफ बोलता है?

app.const.ts

'use strict';

export const dist = '../path/to/dist/';

app.service.ts

import * as AppConst from '../app.const'; 

@Injectable()
export class AppService {

    constructor (
    ) {
        console.log('dist path', AppConst.dist );
    }

}
— अलेक्जेंडर श्मिट
स्रोत
2
ठीक है, आप सेवा के दायरे से बाहर चर का उपयोग कर रहे हैं ताकि आप बस खिड़की के ग्लोबल्स का उपयोग कर सकें। हम जो करने की कोशिश कर रहे हैं वह Angular4 निर्भरता इंजेक्शन प्रणाली में स्थिरांक प्राप्त करता है ताकि हम गुंजाइश को साफ, स्थिर या नकली रख सकें।
— जोएल हर्नांडेज़
11

बस एक टाइपस्क्रिप्ट स्थिरांक का उपयोग करें

export var API_ENDPOINT = 'http://127.0.0.1:6666/api/';

आप इसका उपयोग करके निर्भरता इंजेक्टर में उपयोग कर सकते हैं

bootstrap(AppComponent, [provide(API_ENDPOINT, {useValue: 'http://127.0.0.1:6666/api/'}), ...]);
— SnareChops
स्रोत
1
इसे क्यों इंजेक्ट करें? इसके लिए मुझे कोई ज़रूरत नहीं है ... जैसे ही आप इसे आयात करते हैं आप इसका उपयोग कर सकते हैं। @SnareChops
— Sasxa
@ सास्का मैं सहमत हूं, हालांकि यह इकाई परीक्षण और ऐसे के लिए अच्छा हो सकता है। बस एक पूर्ण उत्तर देने की कोशिश कर रहा है।
— SnareChops
1
@Andreas आप इस्तेमाल कर सकते हैं constyest
— SnareChops
कृपया इस कार्य का स्टैकब्लिट्ज़ प्रदान करें। मैंने बूटस्ट्रैप विधि में एक सेवा प्रदान करने के बहुत सारे उदाहरण देखे हैं, लेकिन अभी तक पर्याप्त रूप से काम करने वाले उदाहरण के साथ एक नहीं मिला है। संभवतः कोणीय के अधिक हाल के संस्करण में कुछ बदल गया है।
— जेन्स बोडल
4

यदि आप वेबपैक का उपयोग कर रहे हैं , जो मैं सुझाता हूं, तो आप विभिन्न वातावरणों के लिए स्थिरांक स्थापित कर सकते हैं। यह विशेष रूप से मूल्यवान है जब आपके पास प्रति पर्यावरण के आधार पर विभिन्न निरंतर मूल्य होते हैं।

आपको अपनी /configनिर्देशिका के अंतर्गत कई वेबपैक फ़ाइल की संभावना होगी (उदाहरण के लिए, webpack.dev.js, webpack.prod.js, आदि)। तो आप custom-typings.d.tsउन्हें वहाँ जोड़ देंगे। यहां प्रत्येक फ़ाइल में अनुसरण करने के लिए सामान्य पैटर्न और एक घटक में एक नमूना उपयोग है।

webpack। {} env .js

const API_URL = process.env.API_URL = 'http://localhost:3000/';
const JWT_TOKEN_NAME = "id_token";
...
    plugins: [
      // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
      new DefinePlugin({
        'API_URL': JSON.stringify(API_URL),
        'JWT_TOKEN_NAME': JSON.stringify(JWT_TOKEN_NAME)
      }),

कस्टम typings.d.ts

declare var API_URL: string;
declare var JWT_TOKEN_NAME: string;
interface GlobalEnvironment {
  API_URL: string;
  JWT_TOKEN_NAME: string;
}

अंग

export class HomeComponent implements OnInit {
  api_url:string = API_URL;
  authToken: string = "Bearer " + localStorage.getItem(JWT_TOKEN_NAME)});
}
— occasl
स्रोत
3

एक बिल्ड के दौरान उत्पन्न होने वाली संपत्ति फ़ाइल का उपयोग करना सरल और आसान है। यह वह दृष्टिकोण है जो कोणीय सीएलआई उपयोग करता है। प्रत्येक वातावरण के लिए एक संपत्ति फ़ाइल को परिभाषित करें और निर्माण के दौरान एक कमांड का उपयोग करके निर्धारित करें कि कौन सी फ़ाइल आपके ऐप में कॉपी हो जाती है। तो बस उपयोग करने के लिए संपत्ति फ़ाइल आयात करें।

https://github.com/angular/angular-cli#build-targets-and-environment-files

— R.Creager
स्रोत
3

Angular4 के लिए एक दृष्टिकोण मॉड्यूल स्तर पर एक निरंतर परिभाषित कर रहा है:

const api_endpoint = 'http://127.0.0.1:6666/api/';

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    MessageService,
    {provide: 'API_ENDPOINT', useValue: api_endpoint}
  ]
})
export class AppModule {
}

फिर, आपकी सेवा में:

import {Injectable, Inject} from '@angular/core';

@Injectable()
export class MessageService {

    constructor(private http: Http, 
      @Inject('API_ENDPOINT') private api_endpoint: string) { }

    getMessages(): Observable<Message[]> {
        return this.http.get(this.api_endpoint+'/messages')
            .map(response => response.json())
            .map((messages: Object[]) => {
                return messages.map(message => this.parseData(message));
            });
    }

    private parseData(data): Message {
        return new Message(data);
    }
}
— जुआंगी जॉर्डन
स्रोत
3

मेरे पास वैश्विक स्थिरांक को परिभाषित करने का एक और तरीका है। क्योंकि अगर हम ts फ़ाइल में परिभाषित करते हैं, यदि उत्पादन मोड में निर्माण करते हैं तो मूल्य बदलने के लिए स्थिरांक ढूंढना आसान नहीं है।

export class SettingService  {

  constructor(private http: HttpClient) {

  }

  public getJSON(file): Observable<any> {
      return this.http.get("./assets/configs/" + file + ".json");
  }
  public getSetting(){
      // use setting here
  }
}

ऐप फ़ोल्डर में, मैं फ़ोल्डर कॉन्फ़िगर / सेटिंग जोड़ें। json

सेटिंग में सामग्री ।json

{
    "baseUrl": "http://localhost:52555"
}

एप्लिकेशन मॉड्यूल में APP_INITIALIZER जोड़ें

   {
      provide: APP_INITIALIZER,
      useFactory: (setting: SettingService) => function() {return setting.getSetting()},
      deps: [SettingService],
      multi: true
    }

इस तरह से, मैं आसानी से json फ़ाइल में मान बदल सकता हूँ। मैं लगातार त्रुटि / चेतावनी संदेशों के लिए भी इस तरह का उपयोग करता हूं।

— हियें गुयेन
स्रोत
0

AngularJS module.constantमानक अर्थ में एक स्थिरांक को परिभाषित नहीं करता है।

हालांकि यह एक प्रदाता पंजीकरण तंत्र के रूप में अपने दम पर खड़ा है, यह संबंधित module.value( $provide.value) फ़ंक्शन के संदर्भ में सबसे अच्छी तरह से समझा जाता है । आधिकारिक दस्तावेज उपयोग के मामले को स्पष्ट रूप से बताता है:

$ इंजेक्टर के साथ एक मूल्य सेवा पंजीकृत करें, जैसे कि एक स्ट्रिंग, एक संख्या, एक सरणी, एक वस्तु या एक फ़ंक्शन। यह एक ऐसी सेवा को पंजीकृत करने के लिए कम है जहां इसके प्रदाता की $ प्राप्त संपत्ति एक कारखाना कार्य है जो कोई तर्क नहीं लेता है और मूल्य सेवा देता है। इसका मतलब यह भी है कि अन्य सेवाओं को मूल्य सेवा में इंजेक्ट करना संभव नहीं है।

इसके लिए प्रलेखन की तुलना करें module.constant( $provide.constant) जो स्पष्ट रूप से उपयोग के मामले (जोर मेरा) को बताता है:

$ इंजेक्टर के साथ एक निरंतर सेवा पंजीकृत करें, जैसे कि एक स्ट्रिंग, एक संख्या, एक सरणी, एक वस्तु या एक फ़ंक्शन। मूल्य की तरह, अन्य सेवाओं को एक स्थिर में इंजेक्ट करना संभव नहीं है। लेकिन मूल्य के विपरीत, एक निरंतरता को एक मॉड्यूल कॉन्फ़िगरेशन फ़ंक्शन में इंजेक्ट किया जा सकता है (angular.Module देखें) और इसे AngularJS डेकोरेटर द्वारा ओवरराइड नहीं किया जा सकता है ।

इसलिए, AngularJS constantफ़ंक्शन क्षेत्र में शब्द के सामान्य अर्थ में एक निरंतरता प्रदान नहीं करता है।

उन्होंने कहा कि प्रदान की गई वस्तु पर प्रतिबंध, $ इंजेक्टर के माध्यम से अपनी पूर्व उपलब्धता के साथ, स्पष्ट रूप से पता चलता है कि नाम का उपयोग सादृश्य द्वारा किया जाता है।

यदि आप एक AngularJS एप्लिकेशन में एक वास्तविक स्थिरांक चाहते हैं, तो आप "उसी तरह से" प्रदान करेंगे जो आप किसी भी जावास्क्रिप्ट प्रोग्राम में करेंगे।

export const π = 3.14159265;

कोणीय 2 में, एक ही तकनीक लागू है।

कोणीय 2 अनुप्रयोगों में एक ही चरण में कॉन्फ़िगरेशन चरण नहीं है जैसा कि AngularJS अनुप्रयोग। इसके अलावा, कोई सेवा सज्जाकार तंत्र ( AngularJS सज्जाकार ) नहीं है, लेकिन यह विशेष रूप से आश्चर्यजनक नहीं है कि वे एक दूसरे से कितने अलग हैं।

का उदाहरण है

angular
  .module('mainApp.config', [])
  .constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/');

अस्पष्ट रूप से मनमाना और थोड़ा ऑफ-पुटिंग है क्योंकि $provide.constantइसका उपयोग किसी ऐसी वस्तु को निर्दिष्ट करने के लिए किया जा रहा है जो संयोगवश भी एक स्थिर है। आपने भी लिखा होगा

export const apiEndpoint = 'http://127.0.0.1:6666/api/';

सभी के लिए या तो बदल सकते हैं।

अब निरंतरता का मज़ाक उड़ाते हुए परीक्षण करने का तर्क कम हो जाता है क्योंकि यह सचमुच नहीं बदलता है।

एक नहीं नकली π।

बेशक आपका एप्लिकेशन विशिष्ट शब्दार्थ हो सकता है कि आपका समापन बिंदु बदल सकता है, या आपके एपीआई में एक गैर-पारदर्शी विफलता तंत्र हो सकता है, इसलिए एपीआई एंडपॉइंट के लिए कुछ परिस्थितियों में बदलना उचित होगा।

लेकिन उस मामले में, यह constantकार्य करने के लिए एक एकल URL के स्ट्रिंग शाब्दिक प्रतिनिधित्व के रूप में प्रदान नहीं किया गया है।

एक बेहतर तर्क, और संभवतः एंगुलरजेएस $provide.constantफ़ंक्शन के अस्तित्व के कारण के साथ एक और गठबंधन किया गया है, जब एंगुलरजेएस को पेश किया गया था, तो जावास्क्रिप्ट में कोई मानक मॉड्यूल अवधारणा नहीं थी । उस स्थिति में, ग्लोबल्स का उपयोग मूल्यों, परस्पर या अपरिवर्तनीय को साझा करने के लिए किया जाएगा, और ग्लोबल्स का उपयोग समस्याग्रस्त है।

उस ने कहा, एक ढांचे के माध्यम से ऐसा कुछ प्रदान करने से उस ढांचे में युग्मन बढ़ जाता है। यह तर्क के साथ कोणीय विशिष्ट तर्क को भी मिलाता है जो किसी अन्य प्रणाली में काम करेगा।

यह कहने के लिए नहीं है कि यह एक गलत या हानिकारक दृष्टिकोण है, लेकिन व्यक्तिगत रूप से, अगर मुझे एक कोणीय 2 आवेदन में एक निरंतरता चाहिए, तो मैं लिखूंगा

export const π = 3.14159265;

बस के रूप में मैं होता मैं AngularJS का उपयोग कर रहे थे।

जितनी चीजें बदलती हैं ...

— अलुआन हदद
स्रोत
0

Angular 2 में एप्लिकेशन वाइड कॉन्स्टेंट बनाने का सबसे अच्छा तरीका environment.ts फाइलों का उपयोग करना है। ऐसे स्थिरांक घोषित करने का लाभ यह है कि आप उन्हें पर्यावरण के अनुसार अलग-अलग कर सकते हैं क्योंकि प्रत्येक पर्यावरण के लिए एक अलग वातावरण फ़ाइल हो सकती है।

— हसन अराफात
स्रोत
यह काम नहीं करता है यदि आप एक बार फिर अपने आवेदन को एक से अधिक परिवेशों में लागू करने का इरादा रखते हैं।
— जेन्स बोडल
-1

आप अपने वैश्विक चर के लिए एक वर्ग बना सकते हैं और फिर इस वर्ग को इस तरह निर्यात कर सकते हैं:

export class CONSTANT {
    public static message2 = [
        { "NAME_REQUIRED": "Name is required" }
    ]

    public static message = {
        "NAME_REQUIRED": "Name is required",
    }
}

अपनी CONSTANTकक्षा बनाने और निर्यात करने के बाद , आपको इस वर्ग को उस वर्ग में आयात करना चाहिए जहाँ आप इस तरह का उपयोग करना चाहते हैं:

import { Component, OnInit                       } from '@angular/core';
import { CONSTANT                                } from '../../constants/dash-constant';


@Component({
  selector   : 'team-component',
  templateUrl: `../app/modules/dashboard/dashComponents/teamComponents/team.component.html`,
})

export class TeamComponent implements OnInit {
  constructor() {
    console.log(CONSTANT.message2[0].NAME_REQUIRED);
    console.log(CONSTANT.message.NAME_REQUIRED);
  }

  ngOnInit() {
    console.log("oninit");
    console.log(CONSTANT.message2[0].NAME_REQUIRED);
    console.log(CONSTANT.message.NAME_REQUIRED);
  }
}

आप या तो में इसका उपयोग कर सकते constructorया ngOnInit(){}, या किसी भी पूर्वपरिभाषित तरीकों में।

— शुभम वर्मा
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.