詳解如何在Angular中使用環(huán)境變量
簡介
如果你正在構建一個使用 API 的應用程序，你會想在開發(fā)過程中使用測試環(huán)境的 API 密鑰，而在生產(chǎn)環(huán)境中使用生產(chǎn)環(huán)境的 API 密鑰。在 Angular 中，你可以通過 environment.ts 文件創(chuàng)建環(huán)境變量。
在本教程中，你將學習如何在 Angular 中使用環(huán)境變量。
先決條件
如果你想跟著本文操作，你需要：
- 一個用于 Node.js 的本地開發(fā)環(huán)境。請參考《如何安裝 Node.js 并創(chuàng)建本地開發(fā)環(huán)境》。
本教程已經(jīng)驗證過可以在 Node v16.2.0、npm v7.15.1 和 @angular/core v12.0.3 下運行。
檢測環(huán)境
Angular CLI 項目已經(jīng)使用了一個 production 環(huán)境變量，在生產(chǎn)環(huán)境下啟用生產(chǎn)模式：
// ...
if (environment.production) {
enableProdMode();
}
Angular 還為我們提供了一個名為 isDevMode 的實用函數(shù)，可以用來檢查應用程序是否在開發(fā)模式下運行：
import { Component, OnInit, isDevMode } from '@angular/core';
@Component({ ... })
export class AppComponent implements OnInit {
ngOnInit() {
if (isDevMode()) {
console.log('Development!');
} else {
console.log('Production!');
}
}
}
這個示例代碼將在開發(fā)模式下記錄消息 'Development!'，在生產(chǎn)模式下記錄消息 'Production!'。
添加開發(fā)和生產(chǎn)變量
你還會注意到，默認情況下，在 /src/environment 文件夾中有一個用于開發(fā)環(huán)境和一個用于生產(chǎn)環(huán)境的環(huán)境文件。
假設我們想要根據(jù)是否處于開發(fā)或生產(chǎn)模式來使用不同的密鑰：
對于 environment.ts 中的開發(fā)設置：
export const environment = {
production: false,
apiKey: 'devKey'
};
對于 environment.prod.ts 中的生產(chǎn)設置：
export const environment = {
production: true,
apiKey: 'prodKey'
};
在我們的組件中，我們只需要這樣做就可以訪問變量：
import { Component } from '@angular/core';
import { environment } from '../environments/environment';
Angular 會負責切換正確的環(huán)境文件。
使用以下命令運行開發(fā)模式：
ng serve
apiKey 變量將解析為 devKey。
使用以下命令運行生產(chǎn)模式：
ng serve --configuration=production
apiKey 變量將解析為 prodKey。
添加暫存變量
通過在 angular.json 文件的 configurations 字段中添加新條目，可以在 Angular CLI 項目中添加新的環(huán)境。
讓我們基于生產(chǎn)使用的配置添加一個暫存環(huán)境：
{
// ...
"projects": {
"angular-environment-example": {
// ...
"prefix": "app",
"build": {
// ...
"configurations": {
"staging": {
// ...
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.stage.ts"
}
],
// ...
},
// ...
},
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"staging": {
"browserTarget": "angular-environment-example:build:staging"
},
}
},
}
}
}
}
現(xiàn)在我們可以添加一個暫存環(huán)境文件：
export const environment = {
production: true,
apiKey: 'stagingKey'
};
使用以下命令運行開發(fā)模式：
ng serve --configuration=staging
apiKey 變量將解析為 stagingKey。
結論
在本教程中，你學習了如何在 Angular 中使用環(huán)境變量。
如果你想了解更多關于 Angular 的知識，請查看我們的 Angular 主題頁面，了解練習和編程項目。
以上就是詳解如何在Angular中使用環(huán)境變量的詳細內(nèi)容，更多關于Angular環(huán)境變量的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了AngularJS封裝指令方法,結合實例形式詳細分析了AngularJS的功能、jQuery類庫協(xié)作及組件封裝的具體操作技巧,需要的朋友可以參考下2016-12-12
本篇文章主要介紹了基于AngularJS的拖拽上傳的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Promise是一個構造函數(shù)，自己身上有all、reject、resolve這幾個異步方式處理值的方法，原型上有then、catch等同樣很眼熟的方法，下面通過實例代碼給大家講解angularjs promise 的相關知識，感興趣的朋友一起看看吧2018-03-03
AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能,涉及AngularJS使用ng-blur、ng-focus針對表單事件監(jiān)聽相關操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了基于AngularJS實現(xiàn)的工資計算器,結合具體實例形式分析了AngularJS數(shù)值計算相關操作技巧,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了AngularJS模塊管理問題的非常規(guī)處理方法，算是一個無奈之舉，分享給小伙伴，大家可以參考下。2015-04-04
這篇文章主要介紹了AngularJS服務service用法,結合實例形式總結分析了服務Service的概念、功能及自定義服務的相關操作技巧,需要的朋友可以參考下2016-12-12
本篇文章主要介紹了angularjs的select使用及默認選中設置，非常具有實用價值，需要的朋友可以參考下2017-04-04
Angularjs中ng-repeat-start與ng-repeat-end的用法實例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開始先進行了簡單的介紹，而后通過完整的實例代碼詳細給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要介紹了Angular4學習筆記之根模塊與Ng模塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09