利用 Angular 发挥环境的力量

一.介绍

您是否曾想过如何在不同的环境中为同一应用设置不同的颜色、标题或 API 调用?可以肯定的是,生产 API 和测试 API 是不同的,应谨慎使用。部署时,我们不会在项目的所有地方手动更改所有 API 调用。不应这样做,因为这很危险。

在 Angular 中,有一种简单的方法可以为不同的环境设置不同的配置。这样我们就可以使用并部署到任意数量的阶段/环境,而无需更改代码。这称为环境文件。

简而言之,我们可以为生产创建一个名为 environment.ts 的环境文件,为开发阶段创建一个名为 environment.development.ts 的环境文件。然后,根据我们发布应用程序的位置,将使用正确的环境文件。

只需要进行一些配置,收益却是巨大的。

在本文中,我将向您展示如何开始并提供具有不同文本和 API 的示例。

二.入门

  1. 创建一个新的应用程序: ng new angular-environment-demo --standalone false。
  2. 生成环境文件: ng generate environment。

注意:从 Angular 15.1 开始,环境文件不会自动生成。

三.环境文件的层次结构

无论是 environment.development.ts 还是 environment.ts,一开始都包含相同的对象。所有配置都应与此对象一起,并且都应包含相同的键。

例如,如果 environment.development.ts 需要一个键值对,如:‘weather_status’: ‘Good’,而 environment.ts 不会使用它,则该文件中会有以下内容:‘weather_status’: ‘’。这是因为,由于您在代码中使用它,并且您的代码将在它将使用的环境文件中查找它 [这将在后面解释]。如果您的代码指向另一个环境文件,它仍会查找它但找不到它;导致编译错误。

让我们添加两个不同的页面标题。

在 app.component.ts 文件或任何其他想要使用环境文件中的值的 ts 文件中,您可以像以下方式访问它们:“环境。<<您想要访问的值。>>。下面是在 app.component.ts 的 ngOnInit 中使用 pageTitle 的示例。

注意第 2 行的导入。现在,您可以导入任何环境文件。

在第 13 行,我们将环境中的“pageTitle”的值分配给“this.title”。

在 HTML 文件中,我们使用如下所示的“标题”。

当您使用 ng serve 提供应用程序时,您将看到以下屏幕。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

当我们只执行“ng serve”时,将使用“environment.development.ts”文件中的值。

如果您想使用 environment.ts 文件中的配置,您应该在 angular.json 文件中添加以下内容。

"fileReplacements": [{"replace": "src/environments/environment.development.ts","with": "src/environments/environment.ts"}
],

这些代码应该添加到 angular.json 文件的“projects”->“architect”->“build”->“configurations”->“production”下。

下面是 angular.json 文件的完整示例。

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {"angular-environment-demo": {"projectType": "application","schematics": {"@schematics/angular:component": {"standalone": false},"@schematics/angular:directive": {"standalone": false},"@schematics/angular:pipe": {"standalone": false}},"root": "","sourceRoot": "src","prefix": "app","architect": {"build": {"builder": "@angular-devkit/build-angular:application","options": {"outputPath": "dist/angular-environment-demo","index": "src/index.html","browser": "src/main.ts","polyfills": ["zone.js"],"tsConfig": "tsconfig.app.json","assets": ["src/favicon.ico","src/assets"],"styles": ["src/styles.css"],"scripts": []},"configurations": {"stagging": {"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.stagging.ts"}]},"production": {"budgets": [{"type": "initial","maximumWarning": "500kb","maximumError": "1mb"},{"type": "anyComponentStyle","maximumWarning": "2kb","maximumError": "4kb"}],"fileReplacements": [{"replace": "src/environments/environment.development.ts","with": "src/environments/environment.ts"}],"outputHashing": "all"},"development": {"optimization": false,"extractLicenses": false,"sourceMap": true,"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.development.ts"}]}},"defaultConfiguration": "production"},"serve": {"builder": "@angular-devkit/build-angular:dev-server","configurations": {"stagging": {"buildTarget": "angular-environment-demo:build:stagging"},"production": {"buildTarget": "angular-environment-demo:build:production"},"development": {"buildTarget": "angular-environment-demo:build:development"}},"defaultConfiguration": "development"},"extract-i18n": {"builder": "@angular-devkit/build-angular:extract-i18n","options": {"buildTarget": "angular-environment-demo:build"}},"test": {"builder": "@angular-devkit/build-angular:karma","options": {"polyfills": ["zone.js","zone.js/testing"],"tsConfig": "tsconfig.spec.json","assets": ["src/favicon.ico","src/assets"],"styles": ["src/styles.css"],"scripts": []}}}}}
}

当我们想要充分利用环境文件时,这个文件是最重要的。

要使用 environment.ts 文件中的配置,我们需要使用以下命令为应用程序提供服务:“ng serve --configuration=production”。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

请注意,您没有在代码中做任何更改,您只是添加了新的配置并使用新命令为应用程序提供服务。

例如,如果您在生产环境中提供服务,则可以使用此命令在该环境中提供服务。无需更改代码。

通常有多个环境主要用于测试。

当您需要适应新环境时,需要遵循一些步骤。

  • 在环境文件夹中创建一个新的环境文件。例如,我们可以添加 environment.staging.ts。
  • 一旦创建,不要忘记添加其他环境文件中存在的值。

  • 在angular.json文件中,我们需要在configuration下添加一个新的配置。

  • 最后一部分仍在 angular.json 文件中。现在我们需要添加配置以使用相应的环境文件为应用程序提供服务。这些更改在“项目”->“架构师”->“服务”->“配置”下完成。

  • 要使用 environment.stagging.ts 文件中的配置为应用程序提供服务,我们运行以下命令:ng serve --configuration=stagging。服务完成后,加载的屏幕如下。

四.使用环境文件来使用不同的 API。

环境文件的另一个强大的应用是它可以轻松、几乎无缝地用于调用不同环境的不同 API。

以下是步骤。

  • 在项目的所有环境文件中的环境对象中添加相应的键值对,如下所示。
export const environment = {pageTitle: "Dinosaur",apiUrl: "https://dinosaur-facts-api.shultzlab.com/dinosaurs"
};
  • 在您的 component.ts 文件中,无论需要什么,您都可以用任何您想要的方法调用 Web 服务。
  • 对于这个例子,我们将在承诺中使用 fetch 方法。
getInfo(){const myPromise = new Promise((resolve, reject) => {fetch(environment.apiUrl).then((response) => response.json()).then((data) => {resolve(data)}).catch((error) => reject(error))});myPromise.then((result: any) => {const element = document.getElementById('txtResult');if (element) {element.innerHTML = JSON.stringify(result.slice(0, 5));}console.log(result.slice(0, 5));}).catch((error) => console.log(error)).finally(() => console.log('promise done'));
}
  • 请注意,在调用中,我们没有传递任何 api。相反,我们使用来自环境文件的变量。
  • 此时,函数已完成,可以在单击按钮时调用。
  • 当我们使用 ng serve 来提供应用程序并单击按钮时,我们得到以下内容。

  • 当我们使用 ng serve --configuration=production 提供应用程序时,输出如下:

  • 请注意,代码没有任何变化。我们只是使用不同的服务配置为应用程序提供服务。
  • 当您部署到环境时,情况也是如此。无论您是使用 Azure 还是其他方式部署 Angular 应用程序,系统都会在某个时候要求您输入运行 Angular 应用程序的命令。提供正确的服务配置将使用所需的环境文件并显示相应的信息或调用所需的 API。无需更改代码。

五.结论

环境文件非常重要且功能强大。最大限度地利用它们将避免您在不同阶段部署时进行手动更改。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/391719.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode每日一题】2024年8月第一周(下)

2024.8.03 中等 链接&#xff1a;3143. 正方形中的最多点数 &#xff08;1&#xff09;题目描述&#xff1a; &#xff08;2&#xff09;示例 &#xff08;3&#xff09;分析 题目中以s字符串中&#xff1a;相同的字母 为限制&#xff0c;要求方格内只包含不同字母对应的点位。…

YOLOv8添加注意力模块并测试和训练

YOLOv8添加注意力模块并测试和训练 参考bilibili视频 yolov8代码库中写好了注意力模块&#xff0c;但是yolov8的yaml文件中并没用使用它&#xff0c;如下图的通道注意力和空间注意力以及两者的结合CBAM&#xff0c;打开conv.py文件可以看到&#xff0c;其中包含了各种卷积块的…

【机器学习第7章——贝叶斯分类器】

机器学习第7章——贝叶斯分类器 7.贝叶斯分类器7.1贝叶斯决策论7.2 朴素贝叶斯分类器条件概率的m估计 7.3 极大似然估计优点基本原理 7.4 贝叶斯网络7.5 半朴素贝叶斯分类器7.6 EM算法7.7 EM算法实现 7.贝叶斯分类器 7.1贝叶斯决策论 一个医疗判断问题 有两个可选的假设&#…

校园商铺管理小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;商品类型管理&#xff0c;商品信息管理&#xff0c;在线咨询管理&#xff0c;咨询回复管理&#xff0c;交流论坛&#xff0c;系统管理 微信端账号功能包括&a…

【Verilog-CBB】开发与验证(4)——RS前向打拍器

引言 我们知道时序路径的建立时间收敛依赖于触发器之间的组合逻辑延迟&#xff0c;以及时钟周期。对于一个确定的设计一般来说&#xff0c;时钟频率不会有太多的让步&#xff0c;因此修时序的时候主要发力点就是减小触发器之间组合逻辑延迟。一方面可以通过组合逻辑优化来降低…

Chapter 22 数据可视化——折线图

欢迎大家订阅【Python从入门到精通】专栏&#xff0c;一起探索Python的无限可能&#xff01; 文章目录 前言一、Pyecharts介绍二、安装Pyecharts三、全局配置项四、绘制折线图 前言 在大数据时代&#xff0c;数据可视化成为了分析和展示数据的重要手段。Pyecharts 是一个基于 …

python open cv(图像处理的基本操作)

概要图 1读取图像 cv2.imread() 函数是OpenCV库中用于读取图像文件的函数。它有两个参数&#xff1a; 文件名&#xff1a;这是第一个也是必需的参数&#xff0c;它指定了要读取的图像文件的路径和文件名。这个路径可以是相对路径&#xff0c;也可以是绝对路径。 标志&#xf…

【practise】只出现一次的数字

现在给你一个数组&#xff0c;里面放了一些数字&#xff0c;里面都是两两成对&#xff0c;只有一个数字是单独的&#xff0c;要求找出其中只出现一次的数字。相必这道题是非常简单了&#xff0c;有很多解法比如说用暴力求解&#xff1f;比如说用位运算&#xff1f;甚至说用哈希…

【C++标准模版库】list的介绍及使用

list 一.list的介绍二.list的使用1.list 构造函数2.list 空间大小3.list 增删查改4.list 迭代器的使用1.正向迭代器2.反向迭代器 5.list 其他成员函数 三.vector与list关于sort性能的比较 一.list的介绍 C中的list标准模板库&#xff08;STL&#xff09;是C标准库中的一个重要组…

PCL1.11.0下载安装(Windows)

PCL1.11.0下载安装&#xff08;Windows&#xff09; PCL安装需要的几个模块如下图所示&#xff1a; 一、PCL1.11.0下载 PCL以1.11.0版本为例&#xff0c;打开下载连接&#xff08;PCL下载&#xff09; 下载PCL-1.11.0-AllInOne-msvc2019-win64.exe和pcl-1.11.0-pdb-msvc2019-…

Vue3 列表自动滚动播放(表头固定、列表内容自动滚动播放)+ vue3-seamless-scroll - 附完整示例

vue3-seamless-scroll&#xff1a;Vue3.0 无缝滚动组件&#xff0c;支持Vite2.0&#xff0c;支持服务端打包 目前组件支持上下左右无缝滚动&#xff0c;单步滚动&#xff0c;并且支持复杂图标的无缝滚动&#xff0c;目前组件支持平台与Vue3.0支持平台一致。 目录 效果 一、介绍…

腾讯云AI代码助手评测:如何智能高效完成Go语言Web项目开发

腾讯云AI代码助手评测&#xff1a;如何智能高效完成Go语言Web项目开发 &#x1f680; 文章目录 腾讯云AI代码助手评测&#xff1a;如何智能高效完成Go语言Web项目开发 &#x1f680;背景引言开发环境介绍腾讯云AI代码助手使用实例1. 代码补全2. 技术对话3. 代码优化4. 规范代码…

(计算机网络)物理层

目录 一.基本概念 二.基本术语 三.码元 四.多路复用技术 一.基本概念 1. 2. 3. 4. 5. 6. 7. 8. 9. 二.基本术语 1. 2. 3.早期--公用的电话网传输数据&#xff0c;网络上传的是模拟信号&#xff0c;调制解调器--将数字信号转化成模拟信号&#xff0c;最后&#xff0c;调制解…

NSSCTF-GDOUCTF 2023新生赛

[GDOUCTF 2023]hate eat snake 考察&#xff1a;js代码审计 打开题目&#xff0c;发现需要坚持60秒&#xff0c;那么简单的一个思路就是修改得分的变量>60即可 办法1&#xff1a;修改变量 右键查看源代码&#xff0c;之后发现有一个snake.js的文件&#xff0c;ctrlf搜索i…

程序设计基础(c语言)_补充_1

1、编程应用双层循环输出九九乘法表 #include <stdio.h> #include <stdlib.h> int main() {int i,j;for(i1;i<9;i){for(j1;j<i;j)if(ji)printf("%d*%d%d",j,i,j*i);elseprintf("%d*%d%-2d ",j,i,j*i);printf("\n");}return 0…

DS18B20数字温度传感器操作解析

文章目录 引言特点工作原理引脚说明配置寄存器温度寄存器时序初始化时序写时序读时序 引言 DS18B20 是一种广泛使用的数字温度传感器&#xff0c;具有高精度和易用性。是Dallas Semiconductor公司&#xff08;现为Maxim Integrated公司&#xff09;生产的单总线数字温度传感器…

关爱提示器-不要久坐

关爱提示器-不要久坐 最近身体不适腰疼脖子疼的&#xff0c;去医院检查&#xff0c;大夫提示注意身体不要久坐多运动等等之类的&#xff0c;哎&#xff0c;生活所迫&#xff0c;披星戴月兢兢业业的&#xff0c;到头来还要被批判躺平不努力。哎&#xff0c;先关爱自己吧&#xf…

Java | Leetcode Java题解之第322题零钱兑换

题目&#xff1a; 题解&#xff1a; public class Solution {public int coinChange(int[] coins, int amount) {int max amount 1;int[] dp new int[amount 1];Arrays.fill(dp, max);dp[0] 0;for (int i 1; i < amount; i) {for (int j 0; j < coins.length; j)…

Dynamo修改共享参数绑定的分组——群问题整理005

Hello大家好!我是九哥~ 今天继续给大家分享一些短平快的小教程,是来自群里面的问题。 问题005:Dynamo修改共享参数绑定的分组 今天看到群里询问如何修改参数所在的分组,查了下API,项目参数是不行的,不过共享参数是允许ReInsert()的,那么就好办了。 然后在Document下…

JavaEE 第4节 线程安全问题

小贴士&#xff1a; 本节题目所述的主题其实非常的庞大&#xff0c;如果要细讲起来&#xff0c;一篇博客远远不够&#xff0c;本篇博客只会每个方面的内容做一个简要描述&#xff0c;详细的内容在后续同专栏博客中都会涉及到的&#xff0c;如果有需要可以一步到本专栏的其他博客…