在Angular 1中。X你可以这样定义常量:

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

在Angular中(使用TypeScript)会是什么?

我只是不想在我的所有服务中一遍又一遍地重复API基url。


当前回答

AngularJS的模块。Constant不能定义标准意义上的常数。

虽然它是一个独立的提供者注册机制,但是最好在相关模块的上下文中理解它。Value ($ provider . Value)函数。官方文档清楚地陈述了用例:

用$injector注册一个值服务,比如一个字符串、一个数字、一个数组、一个对象或一个函数。这是注册服务的缩写,其中其提供者的$get属性是一个不接受参数并返回值服务的工厂函数。这也意味着不可能将其他服务注入到价值服务中。

将其与模块的文档进行比较。常量($ provider . Constant),它也清楚地说明了用例(强调我的):

用$injector注册一个常量服务,比如一个字符串、一个数字、一个数组、一个对象或一个函数。与值一样,不可能将其他服务注入到常量中。 但与value不同的是,常量可以被注入到模块的配置函数中(参见angular.Module),而且它不能被AngularJS的装饰器覆盖。

因此,AngularJS的constant函数并没有在这个领域中提供一个通常理解的常量。

也就是说,对所提供的对象施加的限制,以及它之前通过$注入器的可用性,清楚地表明该名称是类推使用的。

如果你想在AngularJS应用程序中有一个实际的常量,你可以像在任何JavaScript程序中一样“提供”一个

export const π = 3.14159265;

在Angular 2中,同样的技术也适用。

Angular 2应用程序没有AngularJS应用程序那样的配置阶段。此外,没有服务装饰器机制(AngularJS decorator),但考虑到它们彼此之间的差异,这并不特别令人惊讶。

例如

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

是模糊任意的,有点令人讨厌,因为$ provider。Constant被用来指定一个对象,这个对象碰巧也是一个常量。你还不如写信算了

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

因为任何一方都可以改变。

现在关于可测性的争论,嘲笑常数,被削弱了,因为它字面上是不变的。

不模拟π。

当然,您的应用程序特定的语义可能是您的端点可能会更改,或者您的API可能具有非透明的故障转移机制,因此API端点在某些情况下更改是合理的。

但在这种情况下,将其作为单个URL的字符串文字表示提供给常量函数是行不通的。

一个更好的参数,可能更符合AngularJS $ provider存在的原因。常量函数是,当AngularJS被引入时,JavaScript还没有标准的模块概念。在这种情况下,全局变量将用于共享可变或不可变的值,使用全局变量是有问题的。

也就是说,通过框架提供这样的东西可以增加与该框架的耦合。它还将特定于Angular的逻辑与适用于任何其他系统的逻辑混合在一起。

这并不是说这是一种错误或有害的方法,但就我个人而言,如果我想在Angular 2应用程序中使用常量,我会写

export const π = 3.14159265;

就像我使用AngularJS一样。

事情改变得越多……

其他回答

在Angular 2中创建应用范围常量的最佳方法是使用environment。ts文件。声明这些常量的好处是,您可以根据环境改变它们,因为每个环境可以有不同的环境文件。

以下改动对我来说在Angular 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);
    }
}

为Angular 4+更新

现在,如果你的项目是通过angular-cli生成的,我们可以简单地使用angular提供的默认环境文件。

例如

在环境文件夹中创建以下文件

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

从'../../environments/environment'导入{environment};

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

构建中的用例

打开你的angular 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. product .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)
  }
 }

在Angular2中,你有以下提供定义,它允许你设置不同类型的依赖:

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

与Angular 1的比较

在Angular1中,app.service等价于Angular2中的useClass。

Angular1中的app.factory相当于Angular2中的useFactory。

app.constant和app.value被简化为useValue,约束更少。也就是说,不再有配置块了。

app.provider——在Angular 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/'})]

提供是对…的简称:

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

使用注入器,获取值很容易:

var endpoint = injectorValue.get(API_ENDPOINT);

在阅读了这个帖子和其他一些帖子的所有答案后,我想提供我这些天正在使用的解决方案。

首先,我必须为环境添加一个类。这样,我就实现了属性的数据类型,因此使用起来很容易。此外,我还可以将默认数据绑定到我的环境,这样我就可以在所有环境之间共享公共数据。有时我们有一些在所有环境中具有相同值的变量(例如站点名称),并且我们不希望每次都更改到所有环境。

// environments\ienvironments.ts

export class IEnvironment implements IEnvironmentParams {
  public production: boolean;
  public basicURL: string = 'https://www.someawesomedomain.com';
  public siteName: string = 'My awesome site';

  constructor(params: IEnvironmentParams) {
    this.production = params.production ?? false;
    this.basicURL = params.basicURL ?? this.basicURL;
    this.siteName = params.siteName ?? this.siteName;
  }
}

export interface IEnvironmentParams {
  production: boolean;
  basicURL?: string;
  siteName?: string;
}

注意,我正在使用IEnvironmentParams来简化环境的创建,这样我就可以传递一个对象,而不会弄乱构造函数参数并避免参数顺序问题,还可以使用??操作符。

// environments\environment.prod.ts

import {IEnvironment, IEnvironmentParams} from "./ienvironment";

const params: IEnvironmentParams = {
    production: true
};

export const environment: IEnvironment = new IEnvironment(params);
// environments\environment.ts

import {IEnvironment, IEnvironmentParams} from "./ienvironment";

const params: IEnvironmentParams = {
    production: false
};

export const environment: IEnvironment = new IEnvironment(params);

用法示例

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


// app-routing.module.ts

const routes: Routes = [
  { 
    path: '', component: HomeComponent,     
    data: {
        title: `${environment.siteName} | Home page title!`,
        description: 'some page description',
    }
  }
];

检查代码完成情况。

// home.component.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {

  constructor() {
    console.log(`home component constructor - showing evironment.siteName - ${environment.siteName}`);
  }
}

你可以在任何你想要的地方使用它,类、服务、指令、组件等等。

对于那些想知道在构建之后替换值的人。你能做到的。这有点棘手,但当你构建一个Angular应用时,环境数据会被导出到main.js中,看看下面的截图。

只需在任何IDE中打开文件并找到环境,然后只需替换数据。

关于Angular Universal项目。当Angular Universal项目构建完成时,它会导出两个main.js,一个用于服务器,一个用于浏览器,所以你必须同时修改两个。