为了防止环境改变时需要修改多处接口的url,项目中用到了一个config.json文件来统一管理url:
- 在src下建立config文件夹,创建config.json文件,主要内容如下:
{
"hempConfig": {
"basePath": "**************",
"kpPath": "***********",
"messageCenterBasePath":"************",
"messageCenterHomepageUrl":"*************"
},
"currentVersion": "*****",
"currentBuildNumber": ****,
"pkgIdentifier": "*******"
} - 在directives文件夹下创建hngConfigLoader.js文件,主要内容如下:
var hngConfigLoader = ['$window', '$http', '$log', function ($window, $http, $log) {
return {
restrict: "E",
link: function (scope, element, attrs) {
for (var attr in attrs) {
if (attr.substr(0, 1) !== '$') {
scope.attr = attr;
$http.get(attrs[scope.attr]).then(function (response) {
$window[scope.attr] = response.data;
$log.debug(angular.toJson($window[scope.attr], true));
});
}
}
}
};
}]; module.exports = hngConfigLoader; - 在index.html中引入该directive
<hng-config-loader root-config="config/ClientConfig.json"></hng-config-loader>
这里的root-config就是window["rootConfig"];ts文件在GlobalDefinition中新增
rootConfig?: {
"hempConfig": {
"basePath": string,
"kpPath": string,
"messageCenterBasePath":string,
"messageCenterHomepageUrl":string
},
"currentVersion": string,
"pkgIdentifier": string
};指明类型。
- 这样在service文件或者其他地方需要调用接口时只需要用例如:
→ .tsvar url = $window["rootConfig"]["hempConfig"]["basePath"] + "****";
→ .js
var url = window["rootConfig"]["hempConfig"]["basePath"] + "*****";
这样的形式就可以了,环境改变时就不需要每次去各个地方修改url,只需要去config.json文件中统一修改即可。
项目中angular js的接口url统一管理的更多相关文章
-
项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
-
在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies
在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...
-
在 ASP.NET Core 项目中实现小写的路由URL
在 ASP.NET MVC 早期版本中,我们可以通过在应用的 RegisterRoutes 方法中设置 routes.LowercaseUrls = true ; 来将页面的 URL 链接转小写.在 ...
-
mpvue 开发小程序接口数据统一管理
mpvue项目里做API与数据分离统一管理 小程序里请求数据接口使用wx:request,因为考虑项目比较大,最好把wx:request封装起来,统一使用管理 utils.js 配置开发环境和线上环境 ...
-
Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
-
在vue-cli搭建的项目中增加后台mock接口
用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...
-
Vue + webpack 项目配置化、接口请求统一管理
准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题. 又或者后面其他同事接手你的模块,或者改你的bug ...
-
vue项目中使用mockjs模拟接口返回数据
Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...
-
html中通过js获取接口JSON格式数据解析以及跨域问题
前言:本人自学前端开发,一直想研究下js获取接口数据在html的实现,顺利地找到了获取数据的方法,但是有部分接口在调用中出现无法展示数据.经查,发现时跨域的问题,花费了一通时间,随笔记录下过程,以方便 ...
随机推荐
-
《Entity Framework 6 Recipes》中文翻译系列 (27) ------ 第五章 加载实体和导航属性之关联实体过滤、排序、执行聚合操作
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-9 关联实体过滤和排序 问题 你有一实体的实例,你想加载应用了过滤和排序的相关 ...
-
第三方Girdview中文件下载的方法,以及js显示图片
/// <summary> /// 文件下载事件 /// </summary> /// <param name="sender"></ ...
-
JSP通过IP获取用户(客户端)的地理位置信息
<%!//获取客户端的IP public String getRemoteIP(HttpServletRequest request) { if (request.getHeader(" ...
-
Java数字图像处理基础 - 必读
写了很多篇关于图像处理的文章,没有一篇介绍Java 2D的图像处理API,文章讨论和提及的 API都是基于JDK6的,首先来看Java中如何组织一个图像对象BufferedImage的,如图: 一个B ...
-
CAS实践笔录
下载CAS 本文下载的是cas-server-4.0.0-release 下载地址: https://www.apereo.org/cas/download 导入Eclipse测试 Import -& ...
-
sdf SimpleDateFormat 不是线程安全的,
我经常用一个public static SimpleDateFormat sdf; 今天发现报“java.lang.NumberFormatException: multiple points”的异常 ...
-
UITableView 编辑模式(增加-删除-移动---自定义左滑 title)
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
-
Java基础入门知识
Java编程入门知识 知识概要: (1)Java入门基本常识 (2)Java的特性跨平台性 (3)Java的编程环境的搭建 (4)Java的运行机制 (5)第一个Java小程序入门 (1)Java ...
-
如何利用c中的指针实现两个8bit的数合并为16bit
对于从事单片机开发,进行单片机c语言开发的人来说,在对外部信息采集回来的数据进行处理,经常会用到,将采集到的第一个字节作为高8位,采集到的第二个字节作为低8位,从而构成1个16bit的数,得到一次完整 ...
-
Python开发【第五篇】内置函数
abs() 函数返回数字的绝对值 __author__ = "Tang" a = -30 all() 函数用于判断给定的可迭代参数iterable中的所有元素是否都为True,如果 ...