为了防止环境改变时需要修改多处接口的url,项目中用到了一个config.json文件来统一管理url:

  1. 在src下建立config文件夹,创建config.json文件,主要内容如下:

    {
    "hempConfig": {
    "basePath": "**************",
    "kpPath": "***********",
    "messageCenterBasePath":"************",
    "messageCenterHomepageUrl":"*************"
    },
    "currentVersion": "*****",
    "currentBuildNumber": ****,
    "pkgIdentifier": "*******"
    }
  2. 在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;
  3. 在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
    };

    指明类型。

  4. 这样在service文件或者其他地方需要调用接口时只需要用例如:
    →  .ts
     var url = $window["rootConfig"]["hempConfig"]["basePath"] + "****";

    →  .js

    var url = window["rootConfig"]["hempConfig"]["basePath"] + "*****";

    这样的形式就可以了,环境改变时就不需要每次去各个地方修改url,只需要去config.json文件中统一修改即可。

项目中angular js的接口url统一管理的更多相关文章

  1. 项目中常用js方法整理common.js

    抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...

  2. 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies

    在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...

  3. 在 ASP.NET Core 项目中实现小写的路由URL

    在 ASP.NET MVC 早期版本中,我们可以通过在应用的 RegisterRoutes 方法中设置 routes.LowercaseUrls = true ; 来将页面的 URL 链接转小写.在 ...

  4. mpvue 开发小程序接口数据统一管理

    mpvue项目里做API与数据分离统一管理 小程序里请求数据接口使用wx:request,因为考虑项目比较大,最好把wx:request封装起来,统一使用管理 utils.js 配置开发环境和线上环境 ...

  5. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  6. 在vue-cli搭建的项目中增加后台mock接口

    用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...

  7. Vue + webpack 项目配置化、接口请求统一管理

    准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题.  又或者后面其他同事接手你的模块,或者改你的bug ...

  8. vue项目中使用mockjs模拟接口返回数据

    Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...

  9. html中通过js获取接口JSON格式数据解析以及跨域问题

    前言:本人自学前端开发,一直想研究下js获取接口数据在html的实现,顺利地找到了获取数据的方法,但是有部分接口在调用中出现无法展示数据.经查,发现时跨域的问题,花费了一通时间,随笔记录下过程,以方便 ...

随机推荐

  1. NSURLConnection实现文件上传和AFNetworking实现文件上传

    请求的步骤分为4步 1.创建请求 2.设置请求头(告诉服务器这是一个文件上传的请求) 3.设置请求体 4.发送请求 NSURLConnection实现文件上传 // 1.创建请求 NSURL *url ...

  2. android Animation介绍

    Animation介绍: 在Android SDK介绍了2种Animation模式: 1. Tween Animation:间动画,通过对场景里的对象不断做图像变换(平移.缩放.旋转)产生动画效果,即 ...

  3. 贝塞尔曲线(UIBezierPath)属性、方法汇总

    UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般U ...

  4. UITableView点击每个Cell,Cell的子内容的收放

    关于点击TableviewCell的子内容收放问题,拿到它的第一个思路就是, 方法一: 运用UITableview本身的代理来处理相应的展开收起: 1.代理:- (void)tableView:(UI ...

  5. 了解npm的文件结构(npm-folders)和配置文件(npm-mrc)

    一.npm的文件结构 npm的安装: 本地安装 1. 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm ...

  6. 软件海贼团 OnePiece (版权所有)

    最近迷上了“海贼王”这部动画片,不仅仅是因为其中的人物个个性格鲜明,剧情跌宕起伏扣人心弦,各种耍宝搞笑,还感觉到这个团队很像理想中的敏捷软件团队. 作为一直带团队的我,感觉“海贼王”这个动画片给了我很 ...

  7. CSS:@font-face的使用方法

    1.介绍 @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当 ...

  8. sql面试题(学生表_课程表_成绩表_教师表)

    原帖链接:http://bbs.csdn.net/topics/280002741 表架构 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程 ...

  9. OpenStack Mitaka 版本中的 domain 和 admin

    OpenStack 的 Keystone V3 中引入了 Domain 的概念.引入这个概念后,关于 admin 这个role 的定义就变得复杂了起来. 本文测试环境是社区 Mitaka 版本. 1. ...

  10. UC浏览器中touch事件的异常记录

    以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...