在Angular 1中。X你可以这样定义常量:
angular.module('mainApp.config', [])
.constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/')
在Angular中(使用TypeScript)会是什么?
我只是不想在我的所有服务中一遍又一遍地重复API基url。
在Angular 1中。X你可以这样定义常量:
angular.module('mainApp.config', [])
.constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/')
在Angular中(使用TypeScript)会是什么?
我只是不想在我的所有服务中一遍又一遍地重复API基url。
当前回答
只需使用Typescript常量
export var API_ENDPOINT = 'http://127.0.0.1:6666/api/';
你可以在依赖注入器中使用
bootstrap(AppComponent, [provide(API_ENDPOINT, {useValue: 'http://127.0.0.1:6666/api/'}), ...]);
其他回答
只需使用Typescript常量
export var API_ENDPOINT = 'http://127.0.0.1:6666/api/';
你可以在依赖注入器中使用
bootstrap(AppComponent, [provide(API_ENDPOINT, {useValue: 'http://127.0.0.1:6666/api/'}), ...]);
在Angular 4中,你可以使用环境类来保存所有的全局变量。
你有环境。Ts和environment. products . Ts。
例如
export const environment = {
production: false,
apiUrl: 'http://localhost:8000/api/'
};
在你的服务中:
import { environment } from '../../environments/environment';
...
environment.apiUrl;
以下改动对我来说在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);
}
}
在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);
如果你正在使用Webpack(我推荐使用Webpack),你可以为不同的环境设置常量。当每个环境都有不同的常数值时,这一点尤其有价值。
在你的/config目录下可能有多个webpack文件(例如,webpack.dev.js, webpack.prod.js等)。然后你会有一个custom- types .d。把t加在这里。下面是每个文件中要遵循的一般模式,以及组件中的示例用法。
网络包。{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;
}
组件
export class HomeComponent implements OnInit {
api_url:string = API_URL;
authToken: string = "Bearer " + localStorage.getItem(JWT_TOKEN_NAME)});
}