为了防止环境改变时需要修改多处接口的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. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  2. HTML常用标签

    HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...

  3. zepto/jQuery、AngularJS、React、Nuclear的演化

    写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...

  4. js基础(改变透明度实现轮播图的算法)

    前面有分享过改变层级的轮播图算法,今天继续利用透明度来实现无位移的轮播图算法. 实现逻辑:将所有要轮播的图片全部定位到一起,即一层一层摞起来,并且利用层级的属性调整正确的图片顺序,将图片的透明度全部设 ...

  5. iOS 获取当前点击的坐标

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { NSSet *allTouch ...

  6. Android HandlerThread 总结使用

    转载请标明出处:http://www.cnblogs.com/zhaoyanjun/p/6062880.html 本文出自[赵彦军的博客] 前言 以前我在 [Android Handler.Loop ...

  7. Java中一些常用的方法

    1.计算程序运行时常 long start = System.currentTimeMillis(); … … … long end = System.currentTimeMillis(); Sys ...

  8. SQL server学习

    慕课网sql server学习 数据库第一印象:desktop--web server--database server** 几大数据库:sql server.oracle database.DB2. ...

  9. postgresql 导出数据字典文档

    项目上需要整理目前数据库的数据字典文档.项目不规范,这种文档只要后期来补.这么多张表,每个字段都写到word文档里真心头大.就算前面写了个查询表结构的sql,但是最后整理到word里还是感觉有点麻烦. ...

  10. spring HttpInvoker相关学习资料

    官方文档 spring支持的几种RPC 用Http Invoker实现RCP客户端与后台的交互 Java HttpInvoker小试 Spring注解发布RMI/HTTPInvoker/Hessian ...