利用 Angular 发挥环境的力量
一.介绍
您是否曾想过如何在不同的环境中为同一应用设置不同的颜色、标题或 API 调用?可以肯定的是,生产 API 和测试 API 是不同的,应谨慎使用。部署时,我们不会在项目的所有地方手动更改所有 API 调用。不应这样做,因为这很危险。
在 Angular 中,有一种简单的方法可以为不同的环境设置不同的配置。这样我们就可以使用并部署到任意数量的阶段/环境,而无需更改代码。这称为环境文件。
简而言之,我们可以为生产创建一个名为 environment.ts 的环境文件,为开发阶段创建一个名为 environment.development.ts 的环境文件。然后,根据我们发布应用程序的位置,将使用正确的环境文件。
只需要进行一些配置,收益却是巨大的。
在本文中,我将向您展示如何开始并提供具有不同文本和 API 的示例。
二.入门
- 创建一个新的应用程序: ng new angular-environment-demo --standalone false。
- 生成环境文件: 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。无需更改代码。
五.结论
环境文件非常重要且功能强大。最大限度地利用它们将避免您在不同阶段部署时进行手动更改。
相关文章:
利用 Angular 发挥环境的力量
一.介绍 您是否曾想过如何在不同的环境中为同一应用设置不同的颜色、标题或 API 调用?可以肯定的是,生产 API 和测试 API 是不同的,应谨慎使用。部署时,我们不会在项目的所有地方手动更改所有 API 调用。不应这样做,因…...
Vue3+TypeScript+printjs 实现标签批量打印功能
前言:临时性需求没怎么接触过前端,代码实现有问题及优化点希望大佬可以留言告知一下 开发工具:VS CODE 界面开发:Vue3TypeScriptElementPlus 打印组件:Print-JS 前端打印入口图: 标签页面: …...
微信文件如何直接打印及打印功能在哪里设置?
在数字化时代,打印需求依旧不可或缺,但传统打印店的高昂价格和不便操作常常让人头疼。幸运的是,琢贝打印作为一款集便捷、经济、高效于一体的网上打印平台,正逐渐成为众多用户的首选。特别是通过微信小程序下单,更是让…...
dataX -20240804-master分支
1、相关报错 Error: java.io.IOException: java.lang.RuntimeException: ORC split generation failed with exception: org.apache.orc.impl.SchemaEvolution$IllegalEvolutionException: ORC does not support type conversion from file type struct<nanos:int> (10)…...
【网络】传输层
传输层 一、预备知识1、端口号1、端口号范围划分2、知名端口号3、两个问题4、netstat && iostate5、pidof6、谈下面协议始终铭记两个问题 二、UDP协议(简单)1、UDP协议端格式2、UDP的特点3、面向数据报4、UDP缓冲区 三、TCP协议(重点…...
学生管理系统之更新和删除、筛选
学生管理系统之更新和删除 建立新的窗口 添加组件 进行布局 使用Widget把二个放在一块,作为一列,然后全选进行栅格布局,最后添加弹簧进行微调。 编写增加的槽函数 在主函数中调用对话框...
教您一键批量下载拼多多批发图片信息,节省时间
图片是电商的核心展示手段,高质量、吸引人的图片能显著提升商品吸引力,增强用户体验,促进购买决策。良好的视觉呈现有助于品牌形象的塑造,提高转化率和客户满意度,对电商平台的流量和销售业绩具有直接影响。 使用图快…...
基于微信小程序的微课堂笔记的设计与实现(源码+论文+部署讲解等)
博主介绍:✌全网粉丝10W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术栈介绍:我是程序员阿龙ÿ…...
去噪扩散恢复模型
去噪扩散恢复模型 Bahjat Kawar 计算机科学系 以色列海法理工学院 bahjat.kawarcs.technion.ac.il Michael Elad 计算机科学系 以色列海法理工学院 eladcs.technion.ac.il Stefano Ermon 计算机科学系 美国加利福尼亚州斯坦福大学 ermoncs.stanford.edu …...
Stable Diffusion 官方模型V1.5版本下载
模型描述 Stable Diffusion的官方模型更适合绘制偏写实的风格,如果您想绘制二次元之类的风格,可以考虑下载本站的其它模型。 安装方法 将模型下载后,将会得到一个名为****.ckpt格式的文件,将该文件剪切至你的Stable Diffusion本…...
【算法】双指针-OJ题详解1
双指针-OJ题 移动零(点击跳转)原理讲解代码实现 复写零(点击跳转)原理讲解代码实现 快乐数(点击跳转)原理讲解代码实现 盛最多水的容器(点击跳转)原理讲解代码实现 有效三角形的个数…...
29 两个任务切换(1)
1 这里涉及到进程的切换与之前的 特权级的切换还是不一样的。 2 给每个进程 在 GDT表中,分配一个 TSS, 这个TSS中 保存着这个进程 所用到的 通用寄存器段寄存器 3个可能的栈, 当进行 进程切换的时候,就是切换到 另一个 TSS表&am…...
正则表达式概述
一、正则表达式概述 正则表达式(Regular Expression,简称regex或regexp)是一种强大的文本处理工具,它使用一种特定的模式来描述和匹配一系列符合某个句法规则的字符串。在Python中,我们可以使用re模块来操作正则表达式…...
【C语言】Top K问题【建小堆】
前言 TopK问题:从n个数中,找出最大(或最小)的前k个数。 在我们生活中,经常会遇到TopK问题 比如外卖的必吃榜;成单的前K名;各种数据的最值筛选 问题分析 显然想开出40G的空间是不现实的&#…...
Rust 程序设计语言学习——并发编程
安全且高效地处理并发编程是 Rust 的另一个主要目标。并发编程(Concurrent programming),代表程序的不同部分相互独立地执行,而并行编程(parallel programming)代表程序不同部分同时执行,这两个…...
联邦学习研究综述【联邦学习】
文章目录 0 前言机器学习两大挑战: 1 什么是联邦学习?联邦学习的一次迭代过程如下:联邦学习技术具有以下几个特点: 2 联邦学习的算法原理目标函数本地目标函数联邦学习的迭代过程 3 联邦学习分类横向联邦学习纵向联邦学习联邦迁移…...
深入理解Python中的列表推导式
深入理解Python中的列表推导式 在Python编程中,列表推导式(List Comprehension)是一种简洁而强大的语法,用于创建和操作列表。它不仅提高了代码的可读性,还能显著减少代码的行数。本文将详细介绍什么是列表推导式,如何使用它,以及一些实际应用示例,帮助读者更好地理解…...
Android 实现左侧导航栏:NavigationView是什么?NavigationView和Navigation搭配使用
目录 1)左侧导航栏效果图 2)NavigationView是什么? 3)NavigationView和Navigation搭配使用 4)NavigationView的其他方法 一、实现左侧导航栏 由于Android这边没有直接提供左侧导航栏的控件,所以我尝试了…...
如何快速下载拼多多图片信息,效率高
图片是电商吸引顾客的关键因素,高质量的商品图片能提升产品吸引力,增强用户购买欲望。良好的视觉展示有助于建立品牌形象,提高转化率。同时,图片也是商品信息的主要传递媒介,对消费者决策过程至关重要。 使用图快下载器…...
windows 10下,修改ubuntu的密码
(1)在搜索框里面输入cmd,然后点击右键,选择管理员打开 Microsoft Windows [版本 10.0.22631.3880] (c) Microsoft Corporation。保留所有权利。 C:\Windows\System32>C: C:\Windows\System32>cd ../../ C:\>cd Users\ASUS\AppData\Local\Micros…...
【MySQL】慢sql优化全流程解析
定位慢sql 工具排查慢sql 调试工具:Arthas运维工具:Skywalking 通过以上工具可以看到哪个接口比较慢,并且可以分析SQL具体的执行时间,定位到哪个sql出了问题。 启用慢查询日志 慢查询日志记录了所有执行时间超过指定参数(lon…...
RabbitMQ高级特性 - 消息分发(限流、负载均衡)
文章目录 RabbitMQ 消息分发概述如何实现消费分发机制(限制每个队列消息数量)使用场景限流背景实现 demo 非公平发送(负载均衡)背景实现 demo RabbitMQ 消息分发 概述 RabbitMQ 的队列在有多个消费者订阅时,默认会通过…...
信号处理——自相关和互相关分析
1.概括 在信号处理中,自相关和互相关是相关分析非常重要的概念,它们能分析一个信号或两个信号在时间维度的相似性,在振动测试分析、雷达测距和声发射探伤得到了广泛的应用。自相关分析的研究对象为一个信号,互相关分析的研究对象…...
如何解决部分设备分辨率不适配
1)如何解决部分设备分辨率不适配 2)Unity中如何实现草的LOD 3)使用了Play Asset Delivery提交版本被Google报错 4)如何计算弧线弹道的落地位置 这是第396篇UWA技术知识分享的推送,精选了UWA社区的热门话题,…...
C#插件 调用存储过程(输出参数类型)
存储过程 CREATE PROCEDURE [dbo].[GetSum]num1 INT,num2 INT,result INT OUTPUT AS BEGINselect result num1 num2 END C#代码 using Kingdee.BOS; using Kingdee.BOS.App.Data; using Kingdee.BOS.Core.Bill.PlugIn; using Kingdee.BOS.Util; using System; using System.…...
代码随想录算法训练营day32 | 509. 斐波那契数 、70. 爬楼梯 、746. 使用最小花费爬楼梯
碎碎念:开始动态规划了!加油! 参考:代码随想录 动态规划理论基础 动态规划常见类型: 动规基础类题目背包问题打家劫舍股票问题子序列问题 解决动态规划问题应该要思考清楚的: 动态规划五部曲࿱…...
【人工智能专栏】Learning Rate Decay 学习率衰减
Learning Rate Decay 学习率衰减 使用格式 optimizer = torch.optim.SGD(model.paraters(), lr=0.1, momentum=0.9, weight_decay=1e-4) scheduler = torch.optim...
浙大版《C语言程序设计(第3版)》题目集
练习4-11 统计素数并求和 本题要求统计给定整数M和N区间内素数的个数并对它们求和。 输入格式: 输入在一行中给出两个正整数M和N(1≤M≤N≤500)。 输出格式: 在一行中顺序输出M和N区间内素数的个数以及它们的和,数字间以空格分隔。 输入…...
【学习笔记】Day 2
一、进度概述 1、inversionnet_train_light 试运行——未成功 2、DL-FWI基础入门培训-1,2,以及作业1的完成——暂未完成作业 二、详情 1、inversionnet_train_light 试运行 在补充完相关依赖后,运行仍有报错 产生原因:这个代码在当…...
Java中的Map(如果想知道Java中有关Map的知识点,那么只看这一篇就足够了!)
前言:在Java编程语言中,集合框架(Collection Framework)提供了一系列用于存储和操作数据的接口和类。其中,Map和Set是两个非常重要的接口,分别用于存储键值对和无重复元素的集合。 ✨✨✨这里是秋刀鱼不做梦…...
wordpress 优酷视频/网站搜索引擎拓客
在进行数据分析的时候,经常需要将数据进行可视化,以方便我们对数据的认识和理解。0,Matplotlib 简介Matplotlib 是一个可视化工具包,可以让我们使用Python 来可视化数据。[Matplotlib](https://matplotlib.org/)这里汇总了一些官方…...
抖音广告投放 网页制作教程/seo关键词优化系统
命令为rpm -qpl xxx.rpm 比如: rpm -qpl ext3grep-0.10.0-1.el5.rf.i386.rpm 其中指定ext3grep-0.10.0-1.el5.rf.i386.rpm是rpm包的路径...
wix网站做图片能折叠吗/软文营销平台
PHP中的$_ENV是一个包含服务器端环境变量的数组。它是PHP中一个超级全局变量,我们可以在PHP 程序的任何地方直接访问它。 $_ENV只是被动的接受服务器端的环境变量并把它们转换为数组元素,你可以尝试直接输出它。 当你想看看一个变量中究竟有什么东西在…...
本地安装wordpress账户是什么意思/青岛百度推广seo价格
我最后用{$html|raw}解决了转载于:https://www.cnblogs.com/zph666/p/8477528.html...
德城区建设局网站/广告公司图片
织梦dedecms 网站换服务器后出现后台登录空白的解决办法 用dedecms做了一个站,换服务器后,发现后台登录不了,显示一片空白,在网上找了些方法如: 找到:include/common.inc.php文件,打开,查找程…...
北京网站的制作设计/优化官网咨询
大家好,今天为大家带来新的知识, HashTable, HashMap, ConcurrentHashMap 之间的区别 目录: 🌸1.回忆hashmap 🌸 2.比较HashTable,ConcurrentHashMap 🌸3.总结HashTable, ConcurrentHashMap的区别 🌸4.一个历史小问题 &#x…...