Açısal 1.x'de sabitleri şu şekilde tanımlayabilirsiniz:

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

Angular'daki (TypeScript ile) eşdeğeri ne olur?

Sadece tüm hizmetlerimde API temel URL'sini tekrar tekrar tekrarlamak istemiyorum.

Aşağıdaki değişiklikler Angular 2 son sürümünde benim için çalışıyor:

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

Ve sonra hizmette:

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);
    }
}

Açısal ekibin kendisi tarafından sağlanan konfigürasyonun çözümü burada bulunabilir .

İşte tüm ilgili kod:

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) Hizmetiniz.

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

@Injectable()
export class YourService {

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

Artık dize adlarını kullanmadan ve statik denetimler için arabiriminizi kullanarak yapılandırmayı her yere enjekte edebilirsiniz.

Üretim ve geliştirmede farklı değerler sağlayabilmek için Arayüzü ve sabiti daha da ayırabilirsiniz.

Angular2'de, farklı bağımlılık türlerini ayarlamanıza izin veren aşağıdaki sağlama tanımına sahipsiniz:

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

Açısal 1 ile karşılaştırıldığında

app.serviceAçısal1'de Açısal2'ye eşdeğerdir useClass.

app.factoryAçısal1'de Açısal2'ye eşdeğerdir useFactory.

app.constantve daha az kısıtlamayla app.valuebasitleştirilmiştir useValue. yani configartık blok yok.

app.provider - Açısal 2'de eşdeğeri yoktur.

Örnekler

Kök enjektör ile kurulum yapmak için:

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

Veya bileşeninizin enjektörüne göre kurulum yapın:

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

provide kısa el içindir:

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

Enjektör ile değeri elde etmek kolaydır:

var endpoint = injectorValue.get(API_ENDPOINT);

Açısal 4'te, tüm küresellerinizi korumak için çevre sınıfını kullanabilirsiniz.

Varsayılan olarak environment.ts ve environment.prod.ts öğelerine sahipsiniz.

Örneğin

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

Ve sonra hizmetinizde:

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

Açısal 4+ için güncellendi

Şimdi, projeniz açısal-cli ile oluşturulmuşsa, açısal varsayılan sağlayan ortamlar dosyasını kullanabiliriz.

Örneğin

Ortamlar klasörünüzde aşağıdaki dosyaları oluşturun

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

ve her dosya aşağıdaki gibi ilgili kod değişikliklerini tutabilir:

• 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' ],
  };

Uygulamada kullanım örneği

Ortamları hizmetler gibi herhangi bir dosyaya aktarabilirsiniz clientUtilServices.ts

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

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

Yapımda kullanım örneği

Açısal cli dosyanızı açın .angular-cli.jsonve içinde "apps": [{...}]aşağıdaki kodu ekleyin

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

Üretim için inşa etmek istiyorsanız, ng build --env=prodonu yapılandırmayı şu şekilde okuyacak environment.prod.tsşekilde çalıştırın :qa veyadev

## Eski cevap

Sağlayıcımda aşağıdaki gibi bir şey yapıyorum:

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'
  }
}

Sonra her yerde tüm sabit verilere erişimim var

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)
  }
 }

ApiEndpoint çalışırken dize sabiti olan bir AppSettings sınıfına sahip olma yaklaşımı, bu gerçek ApiEndpoint'i birim testi sırasında diğer bazı değerler için değiştiremeyeceğimiz için ideal değildir.

Bu api uç noktalarını hizmetlerimize enjekte edebilmeliyiz (başka bir hizmete bir hizmet enjekte etmeyi düşünün). Bunun için de bir sınıf yaratmamız gerekmiyor, tek yapmak istediğimiz ApiEndpoint'imiz olan hizmetlerimize bir dize enjekte etmektir. Mükemmel cevabı piksellerle tamamlamak için , işte burada açısal 2'de nasıl yapılabileceği konusunda tam koddur:

Öncelikle , Angular'a uygulamamızda istediğimizde ApiEndpoint uygulamamızın bir örneğini nasıl sağlayacağımızı söylemeliyiz (bir bağımlılık kaydetme olarak düşünün):

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

Ve sonra hizmette bu ApiEndpoint'i servis yapıcıya enjekte ediyoruz ve Angular yukarıdaki kayıtlarımıza dayanarak bizim için sağlayacaktır:

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...
}

Bu senaryo ile ilgili son deneyimim:

• @ açısal / cli: 1.0.0
• düğüm: 6.10.2
• @ açısal / çekirdek: 4.0.0

Burada resmi ve güncellenmiş dokümanları takip ettim:

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

Görünüşe OpaqueToken artık önerilmemektedir ve biz kullanmalıdır InjectionToken , bu yüzden bu bir cazibe gibi çalışır benim dosyalar şunlardır:

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@

  }

Sonuç temiz ve konsolda John Papa'nın bu sayıdaki son yorumundan daha fazla uyarı yok:

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

Anahtar arabirimi farklı bir dosyaya uygulamak oldu.

Tüm çözümler karmaşık görünmektedir. Bu dava için en basit çözümü arıyorum ve sadece sabitleri kullanmak istiyorum. Sabitler basittir. Aşağıdaki çözüme karşı konuşan bir şey var mı?

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 );
    }

}

Bir Typcript sabiti kullanın

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

Kullanarak bağımlılık enjektöründe kullanabilirsiniz

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

Webpack kullanıyorsanızTavsiye ettiğim , farklı ortamlar için sabitler ayarlayabilirsiniz. Bu, ortam başına farklı sabit değerleriniz olduğunda özellikle değerlidir.

Muhtemelen /configdizininizin altında birden fazla web paketi dosyanız olacaktır (örn. Webpack.dev.js, webpack.prod.js, vb.). Sonra bircustom-typings.d.ts onları ekleyecek olacak. Her dosyada izlenecek genel kalıp ve bir Bileşende örnek bir kullanım.

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)
      }),

özel typings.d.ts

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

Bileşen

export class HomeComponent implements OnInit {
  api_url:string = API_URL;
  authToken: string = "Bearer " + localStorage.getItem(JWT_TOKEN_NAME)});
}

Derleme sırasında oluşturulan bir özellik dosyasını kullanmak basit ve kolaydır. Açısal CLI'nin kullandığı yaklaşım budur. Her ortam için bir özellik dosyası tanımlayın ve oluşturma sırasında hangi dosyanın uygulamanıza kopyalanacağını belirlemek için bir komut kullanın. Ardından kullanmak için özellik dosyasını içe aktarın.

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

Angular4 için bir yaklaşım modül düzeyinde bir sabit tanımlamak olacaktır:

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 {
}

Ardından, hizmetinizde:

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);
    }
}

Global sabitleri tanımlamanın başka bir yolu var. Çünkü ts dosyasında tanımladıysak, üretim modunda inşa edersek değeri değiştirmek için sabitleri bulmak kolay değildir.

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
  }
}

Uygulama klasörüne klasör configs / setting.json ekliyorum

Setting.json içindeki içerik

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

Uygulama modülünde APP_INITIALIZER ekleyin

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

bu şekilde, json dosyasındaki değeri daha kolay değiştirebilirim. Ayrıca sürekli hata / uyarı mesajları için de bu yolu kullanıyorum.

angularjs en module.constant standart anlamda bir sabit tanımlamaz.

Bir sağlayıcı kayıt mekanizması olarak kendi başına dursa da, en iyi ilgili module.value( $provide.value) işlevi bağlamında anlaşılır . Resmi belgeler kullanım durumunu açıkça belirtmektedir:

$ Enjektörüyle dize, sayı, dizi, nesne veya işlev gibi bir değer hizmeti kaydedin. Bu, sağlayıcının $ get özelliğinin argüman almayan ve değer hizmetini döndüren bir fabrika işlevi olduğu bir hizmeti kaydettirmek için kısadır. Bu aynı zamanda bir değer hizmetine başka hizmetlerin enjekte edilmesinin mümkün olmadığı anlamına da gelir.

Bunu , kullanım durumunu da açıkça ifade eden module.constant( $provide.constant) için olan dokümanlarla karşılaştırın (benimkini vurgulayın):

$ Enjektör ile dize, sayı, dizi, nesne veya işlev gibi sabit bir hizmet kaydedin. Değer gibi, diğer hizmetleri de bir sabite enjekte etmek mümkün değildir. Ancak değerden farklı olarak, bir sabit bir modül yapılandırma işlevine enjekte edilebilir (bkz. Açısal. Modül) ve bir AngularJS dekoratörü tarafından geçersiz kılınamaz .

Bu nedenle, AngularJS constantişlevi, alandaki terimin yaygın olarak anlaşılan anlamında bir sabit sağlamaz.

Bununla birlikte, sağlanan nesneye getirilen kısıtlamaların, $ enjektör aracılığıyla daha önceki kullanılabilirliği ile birlikte, adın analoji tarafından kullanıldığını açıkça göstermektedir.

Bir AngularJS uygulamasında gerçek bir sabit istiyorsanız, herhangi bir JavaScript programında yaptığınız gibi "sabit" olursunuz.

export const π = 3.14159265;

Açısal 2'de aynı teknik uygulanabilir.

Açısal 2 uygulamalarının, AngularJS uygulamalarıyla aynı anlamda bir yapılandırma aşaması yoktur. Ayrıca, hizmet dekoratör mekanizması ( AngularJS Dekoratör ) yoktur, ancak birbirlerinden ne kadar farklı oldukları göz önüne alındığında bu özellikle şaşırtıcı değildir.

Örneği

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

tesadüfen de sabit $provide.constantolan bir nesneyi belirtmek için kullanıldığından , belirsiz bir şekilde keyfi ve biraz rahatsız edici . Sen de yazmış olabilirsin

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

çünkü her ikisi de değişebilir.

Artık sabitle alay eden test edilebilirlik argümanı azalıyor çünkü tam anlamıyla değişmiyor.

Kişi alay etmez π.

Elbette uygulamaya özgü anlambiliminiz uç noktanızın değişebileceği veya API'nizin saydam olmayan bir yük devretme mekanizmasına sahip olabileceğinden, API uç noktasının belirli koşullar altında değişmesi mantıklı olacaktır.

Ancak bu durumda, constantişlev için tek bir URL'nin dize hazır gösterimi sağlamak işe yaramazdı.

Daha iyi bir argüman ve muhtemelen bir tane daha AngularJS $provide.constantişlevinin varlığının nedeni ile uyumludur, AngularJS tanıtıldığında JavaScript'in standart modül kavramı yoktur . Bu durumda, genel değerler değişebilir veya değişmez değerleri paylaşmak için kullanılır ve genel değerleri kullanmak sorunludur.

Bununla birlikte, böyle bir şeyin bir çerçeve yoluyla sağlanması, o çerçeveye bağlanmayı arttırır. Ayrıca açısal spesifik mantığı başka herhangi bir sistemde çalışacak mantıkla karıştırır.

Bu yanlış veya zararlı bir yaklaşım demek değildir, ancak kişisel olarak, Açısal 2 uygulamasında bir sabit istiyorsam , yazacağım

export const π = 3.14159265;

tıpkı AngularJS kullandığım gibi.

Daha fazla şey değişir ...

Angular 2'de uygulama genelinde sabitler oluşturmanın en iyi yolu environment.ts dosyalarını kullanmaktır. Bu tür sabitleri bildirmenin avantajı, her bir ortam için farklı bir ortam dosyası olabileceğinden, bunları ortama göre değiştirebilmenizdir.

Genel değişkeniniz için bir sınıf oluşturabilir ve ardından bu sınıfı şu şekilde dışa aktarabilirsiniz:

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

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

CONSTANTSınıfınızı oluşturduktan ve dışa aktardıktan sonra , bu sınıfı kullanmak istediğiniz sınıfa aşağıdaki gibi aktarmanız gerekir:

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);
  }
}

Sen ya bunu kullanabilirsiniz constructorya ngOnInit(){}veya herhangi önceden tanımlayabilirsiniz yöntemlerinde.