项目中angular js的接口url统一管理
为了防止环境改变时需要修改多处接口的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的实现,顺利地找到了获取数据的方法,但是有部分接口在调用中出现无法展示数据.经查,发现时跨域的问题,花费了一通时间,随笔记录下过程,以方便 ...
随机推荐
- Spring in Action 学习笔记二-DI
装配bean 2015年10月9日 9:49 Sprng中,对象无需自己负责查找或创建其关联的其他对象.相关,容器负责吧需要相互协作的对象引用赋予各个对象. 创建应用对象之间协 ...
- MarkdownPad 2 常用快捷键
Ctrl + I : 斜体 Ctrl + B : 粗体 Ctrl + G : 图片 Ctrl + Q : 引用 Ctrl + 1 : 标题 1 Ctrl + 2 : 标题 2 Ctrl + 3 : 标 ...
- SSH面试题(struts2+Spring+hibernate)
struts2 + Spring +hibernate Hibernate工作原理及为什么要用? 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory ...
- 使用virtualenv搭建python3开发环境
问题描述 环境: CentOS6.5 想在此环境下使用python3进行开发,但CentOS6.5默认的python环境是2.6.6版本. 之前的做法是直接从源码安装python3,替换掉现有的开发环 ...
- Maven:jar 下载相关的问题
在使用Maven下载jar包时,会遇到一些问题,如何解决他们呢? 1.仓库里有jar 包,更新Maven时报仓库里找不到jar包的错误 这个问题,时常在版本有大的变动时出现.(例如:新增加了一些fea ...
- ab
ab is a tool for benchmarking your Apache Hypertext Transfer Protocol (HTTP) server. It is designed ...
- 一个典型的MapRuduce实例------webcount(网站统计访客信息)
统计某一特定网站的某个时辰访客人数 所用版本:hadoop2.6.5 数据样式如下: 111.111.111.111 - - [16/Dec/2012:05:32:50 -0500] "GE ...
- python-socket模块
socket server #!/usr/bin/env python # -*- coding:utf-8 -*- import socket ip_port = ('127.0.0.1',9999 ...
- ubuntu下修改键位
尴尬的背景: 服役5年的笔记本,最近键盘失灵,部分键位彻底失去响应.最蛋疼的是左右方向键都不能用了 ○| ̄|_ 解决方案是,通过xmodmap命令,用其他相对鸡肋些的键位替代方向键. 1 查看各个键位 ...
- liunx关闭防火墙
Redirecting to /bin/systemctl stop iptables.service systemctl stop iptables.service ?????? centos从7开 ...