项目中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的实现,顺利地找到了获取数据的方法,但是有部分接口在调用中出现无法展示数据.经查,发现时跨域的问题,花费了一通时间,随笔记录下过程,以方便 ...
随机推荐
- SSH框架整合
SSH框架整合 一.原理图 action:(struts2) 1.获取表单的数据 2.表单的验证,例如非空验证,email验证等 3.调用service,并把数据传递给service Service: ...
- C#模拟HTTP Form请求上传文件
using System; using System.Collections.Generic; using System.Text; using System.Net; using System.IO ...
- HTTP、HTTP2
HTTP.HTTP2.0.SPDY.HTTPS 你应该知道的一些事 原文链接:http://www.alloyteam.com/2016/07/httphttp2-0spdyhttps-readi ...
- 你必须知道的HTTP错误
发送网络请求有时失败,分析一下响应行,在响应的响应行内,你会发现响应行由三部分组成,用空格来隔开,HTTP/1.1 404 NOT FOUND,第一个是响应的HTTP的版本,第二个和第三个是状态值. ...
- iOS多线程之8.NSOPeration的其他用法
本文主要对NSOPeration的一些重点属性和方法做出介绍,以便大家可以更好的使用NSOPeration. 1.添加依赖 - (void)addDependency:(NSOperation * ...
- 二维码合成,将苹果和安卓(ios和android)合成一个二维码,让用户扫描一个二维码就可以分别下载苹果和安卓的应用
因为公司推广的原因,没有合适的将苹果和安卓(ios和android)合成一个二维码的工具. 因为这个不难,主要是根据浏览器的UA进行判断,所以就自己开发了一个网站 网站名称叫:好推二维码 https ...
- Windows 批处理设置dns ,解决能上qq不能开网页
对于windows 7 @echo off netsh interface ip set dns "本地连接" static 114.114.114.114 primary net ...
- MySQL同步常见问题解答(自己的小心得)
前几天刚刚注册了博客园,我想写一些技巧性的教程,今天给大家分享一个MySQL同步常见问题解答. Q:如果主服务器正在运行并且不想停止主服务器,怎样配置一个从服务器? A:有多种方法.如果你在某时间点做 ...
- tcpdump、nc网络工具使用
tcpdump: 网络嗅探器 nc: nmap: 端口扫描 混杂模式(promisc) C设置为监控,当A和B通信,C是无法探测到数据的,除非有交换机的权限,将全网端口的数据通信都发送副本到C的端口上 ...
- 创建agsXMPP 自定义packet types
在网上看了好多文章基本都是转载 没有能成功运行的,又没有别的资料,很是费解,无奈之下只好潜心研究,最终总结了几个要点给大家分享下,以免再次多浪费时间 agsXMPP是什么就不多描述了,重点说下我在创建 ...