Di Angular 1.x Anda dapat mendefinisikan konstanta seperti ini:

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

Apa yang akan menjadi setara dalam Angular (dengan TypeScript)?

Saya hanya tidak ingin mengulangi url basis API berulang-ulang di semua layanan saya.

Perubahan di bawah ini berfungsi untuk saya pada versi akhir Angular 2:

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

Dan kemudian dalam layanan:

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

Solusi untuk konfigurasi yang disediakan oleh tim sudut itu sendiri dapat ditemukan di sini .

Ini semua kode yang relevan:

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

Sekarang Anda dapat menyuntikkan konfigurasi di mana-mana tanpa menggunakan nama string dan dengan menggunakan antarmuka Anda untuk pemeriksaan statis.

Anda tentu saja dapat memisahkan Antarmuka dan konstanta lebih lanjut untuk dapat memberikan nilai yang berbeda dalam produksi dan pengembangan misalnya

Di Angular2, Anda memiliki definisi memberikan berikut ini , yang memungkinkan Anda untuk mengatur berbagai jenis dependensi:

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

Bandingkan dengan Angular 1

app.servicedi Angular1 sama dengan useClassdi Angular2.

app.factorydi Angular1 sama dengan useFactorydi Angular2.

app.constantdan app.valuetelah disederhanakan useValuedengan kendala yang lebih sedikit. yaitu tidak ada configblok lagi.

app.provider - Tidak ada padanan dalam Angular 2.

Contohnya

Untuk mengatur dengan injektor root:

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

Atau pengaturan dengan injektor komponen Anda:

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

provide adalah tangan pendek untuk:

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

Dengan injector, mendapatkan nilainya mudah:

var endpoint = injectorValue.get(API_ENDPOINT);

Di Angular 4, Anda bisa menggunakan kelas lingkungan untuk menjaga semua global Anda.

Anda memiliki environment.ts dan environment.prod.ts secara default.

Sebagai contoh

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

Dan kemudian pada layanan Anda:

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

Diperbarui untuk Angular 4+

Sekarang kita cukup menggunakan file environment yang disediakan angular default jika proyek Anda dihasilkan melalui angular-cli.

sebagai contoh

Di folder lingkungan Anda buat file berikut

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

dan setiap file dapat menyimpan perubahan kode terkait seperti:

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

Kasus penggunaan dalam aplikasi

Anda dapat mengimpor lingkungan ke file apa pun seperti layanan clientUtilServices.ts

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

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

Kasus penggunaan dalam membangun

Buka file cli sudut Anda .angular-cli.jsondan di dalam "apps": [{...}]tambahkan kode berikut

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

Jika Anda ingin membangun untuk produksi, jalankan ng build --env=proditu akan membaca konfigurasi dari environment.prod.ts, cara yang sama Anda dapat melakukannya untuk qaataudev

## Jawaban yang lebih lama

Saya telah melakukan sesuatu seperti di bawah ini, di provider saya:

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

Maka saya memiliki akses ke semua data Konstan di mana saja

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

Walaupun pendekatan dengan memiliki kelas AppSettings dengan konstanta string saat ApiEndpoint bekerja, itu tidak ideal karena kita tidak akan dapat menukar ApiEndpoint nyata ini dengan beberapa nilai lain pada saat pengujian unit.

Kita harus dapat menyuntikkan titik akhir api ini ke layanan kami (pikirkan menyuntikkan layanan ke layanan lain). Kita juga tidak perlu membuat seluruh kelas untuk ini, semua yang ingin kita lakukan adalah menyuntikkan string ke layanan kita menjadi ApiEndpoint kita. Untuk menyelesaikan jawaban yang sangat baik dengan pixelbits , berikut adalah kode lengkap bagaimana hal itu dapat dilakukan di Angular 2:

Pertama-tama kita perlu memberi tahu Angular bagaimana memberikan instance ApiEndpoint kita ketika kita memintanya di aplikasi kita (anggap itu sebagai mendaftarkan dependensi):

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

Dan kemudian dalam layanan kami menyuntikkan ApiEndpoint ini ke konstruktor layanan dan Angular akan menyediakannya untuk kami berdasarkan pendaftaran kami di atas:

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

Ini adalah pengalaman terakhir saya dengan skenario ini:

• @ angular / cli: 1.0.0
• simpul: 6.10.2
• @ angular / inti: 4.0.0

Saya telah mengikuti dokumen resmi dan yang diperbarui di sini:

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

Sepertinya OpaqueToken sekarang sudah usang dan kita harus menggunakan InjectionToken , jadi ini adalah file saya yang berjalan seperti pesona:

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@

  }

Hasilnya bersih dan tidak ada peringatan pada konsol terima kasih atas komentar terbaru John Papa dalam masalah ini:

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

Kuncinya diimplementasikan dalam file antarmuka yang berbeda.

Semua solusi tampaknya rumit. Saya mencari solusi paling sederhana untuk kasus ini dan saya hanya ingin menggunakan konstanta. Konstanta itu sederhana. Adakah yang menentang solusi berikut ini?

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

}

Cukup gunakan konstanta naskah

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

Anda dapat menggunakannya di injector ketergantungan menggunakan

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

Jika Anda menggunakan Webpack , yang saya sarankan, Anda dapat mengatur konstanta untuk lingkungan yang berbeda. Ini sangat berharga ketika Anda memiliki nilai konstan yang berbeda pada basis per lingkungan.

Anda mungkin memiliki beberapa file webpack di bawah /configdirektori Anda (mis., Webpack.dev.js, webpack.prod.js, dll.). Maka Anda akan memilikicustom-typings.d.ts Anda akan menambahkannya di sana. Berikut pola umum yang harus diikuti di setiap file dan penggunaan sampel dalam Komponen.

paket web. {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)
      }),

custom-typings.d.ts

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

Komponen

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

Menggunakan file properti yang dihasilkan selama membangun sederhana dan mudah. Ini adalah pendekatan yang menggunakan CLI Angular. Tentukan file properti untuk setiap lingkungan dan gunakan perintah saat membangun untuk menentukan file mana yang akan disalin ke aplikasi Anda. Kemudian cukup impor file properti untuk digunakan.

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

Satu pendekatan untuk Angular4 akan mendefinisikan konstanta di tingkat modul:

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

Kemudian, dalam layanan Anda:

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

Saya punya cara lain untuk mendefinisikan konstanta global. Karena jika kita mendefinisikan dalam file ts, jika membangun dalam mode produksi tidak mudah untuk menemukan konstanta untuk mengubah nilai.

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

Di folder aplikasi, saya menambahkan folder configs / setting.json

Konten di setting.json

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

Dalam modul aplikasi tambahkan APP_INITIALIZER

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

dengan cara ini, saya dapat mengubah nilai dalam file json lebih mudah. Saya juga menggunakan cara ini untuk pesan kesalahan / peringatan yang konstan.

AngularJS module.constant tidak mendefinisikan konstanta dalam arti standar.

Meskipun berdiri sendiri sebagai mekanisme registrasi penyedia, paling baik dipahami dalam konteks fungsi terkait module.value( $provide.value). Dokumentasi resmi menyatakan use case dengan jelas:

Daftarkan layanan nilai dengan $ injector, seperti string, angka, array, objek atau fungsi. Ini adalah kependekan dari mendaftarkan layanan di mana properti $ get miliknya adalah fungsi pabrik yang tidak mengambil argumen dan mengembalikan layanan nilai. Itu juga berarti tidak mungkin untuk menyuntikkan layanan lain ke layanan bernilai.

Bandingkan ini dengan dokumentasi untuk module.constant( $provide.constant) yang juga dengan jelas menyatakan use case (penekanan milik saya):

Daftarkan layanan konstan dengan $ injector, seperti string, angka, array, objek atau fungsi. Seperti nilainya, tidak mungkin untuk menyuntikkan layanan lain ke dalam konstanta. Tetapi tidak seperti nilai, konstanta dapat disuntikkan ke fungsi konfigurasi modul (lihat angular.Module) dan tidak dapat diganti oleh dekorator AngularJS .

Oleh karena itu, constantfungsi AngularJS tidak memberikan konstanta dalam arti yang umum dipahami dari istilah di lapangan.

Yang mengatakan pembatasan ditempatkan pada objek yang disediakan, bersama dengan ketersediaan sebelumnya melalui $ injector, jelas menunjukkan bahwa nama tersebut digunakan oleh analogi.

Jika Anda menginginkan konstanta aktual dalam aplikasi AngularJS, Anda akan "memberikan" satu cara yang sama seperti pada program JavaScript apa pun yang

export const π = 3.14159265;

Dalam Angular 2, teknik yang sama berlaku.

Aplikasi Angular 2 tidak memiliki fase konfigurasi dalam arti yang sama dengan aplikasi AngularJS. Selain itu, tidak ada mekanisme dekorator layanan ( AngularJS Dekorator ) tetapi ini tidak terlalu mengejutkan mengingat betapa berbedanya mereka satu sama lain.

Contoh dari

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

samar-samar sewenang-wenang dan sedikit tidak menyenangkan karena $provide.constantdigunakan untuk menentukan objek yang kebetulan juga merupakan konstanta. Anda mungkin juga telah menulis

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

untuk semua bisa berubah.

Sekarang argumen untuk testabilitas, mengejek konstanta, berkurang karena secara harfiah tidak berubah.

Seseorang tidak mengejek π.

Tentu saja semantik khusus aplikasi Anda mungkin titik akhir Anda dapat berubah, atau API Anda mungkin memiliki mekanisme failover yang tidak transparan, sehingga masuk akal jika titik akhir API berubah dalam keadaan tertentu.

Tetapi dalam kasus itu, menyediakannya sebagai string string representasi dari satu URL ke constantfungsi tidak akan berfungsi.

Argumen yang lebih baik, dan kemungkinan satu lagi selaras dengan alasan keberadaan $provide.constantfungsi AngularJS adalah bahwa, ketika AngularJS diperkenalkan, JavaScript tidak memiliki standar konsep modul . Dalam hal itu, global akan digunakan untuk berbagi nilai, bisa berubah atau tidak berubah, dan menggunakan global adalah masalah.

Yang mengatakan, menyediakan sesuatu seperti ini melalui suatu kerangka kerja meningkatkan kopling ke kerangka itu. Ini juga mencampur logika spesifik sudut dengan logika yang akan bekerja di sistem lain.

Ini bukan untuk mengatakan itu adalah pendekatan yang salah atau berbahaya, tetapi secara pribadi, jika saya ingin konstan dalam aplikasi Angular 2, saya akan menulis

export const π = 3.14159265;

seperti halnya saya menggunakan AngularJS.

Semakin banyak hal berubah ...

Cara terbaik untuk membuat konstanta lebar aplikasi di Angular 2 adalah dengan menggunakan file environment.ts. Keuntungan dari mendeklarasikan konstanta tersebut adalah Anda dapat memvariasikannya sesuai dengan lingkungan karena dapat ada file lingkungan yang berbeda untuk setiap lingkungan.

Anda bisa membuat kelas untuk variabel global Anda dan kemudian mengekspor kelas ini seperti ini:

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

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

Setelah membuat dan mengekspor CONSTANTkelas Anda, Anda harus mengimpor kelas ini di kelas yang ingin Anda gunakan, seperti ini:

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

Anda dapat menggunakan ini di constructoratau ngOnInit(){}, atau dalam metode standar apa pun.