为了防止环境改变时需要修改多处接口的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. linux安装中文语言包

    相关配置如下: yum install fonts-chinese.noarch yum install m17n-db-common-cjk yum install m17n-db-chinese安 ...

  2. iOS10 适配问题-Xcode8

    前段时间升级了Xcode8,整体来说对OC的影响不大,但是还是跳一个坑,消耗了不少时间.这里总结下遇到的适配问题. 1.权限问题 Xcode8 访问相机.相册等需要权限的地方崩溃 解决办法: 在使用私 ...

  3. H5 表格的结构

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 轻量级ORM框架——第二篇:Dapper中的一些复杂操作和inner join应该注意的坑

       上一篇博文中我们快速的介绍了dapper的一些基本CURD操作,也是我们manipulate db不可或缺的最小单元,这一篇我们介绍下相对复杂 一点的操作,源码分析暂时就不在这里介绍了. 一:t ...

  5. protobuf的编译安装

    github地址:https://github.com/google/protobuf支持多种语言,有多个语言的版本,本文采用的是在centos7下编译源码进行安装. github上有详细的安装说明: ...

  6. 0034 Java学习笔记-反射-初步2-操作对象

    通过反射创建对象 通过反射创建对象有两种方式,一种通过Class对象的newInstance()方法,一种是获取到Class对象的Constructor后,再调用newInstance()方法,前者要 ...

  7. Windows Server 2012 虚拟化实战:存储(二)

    五.搭建Window Server 2012虚拟化的存储网络 前文我们讨论了Window Server 2012支持的各种与存储相关的技术,接下来我们通过实践对其中的一些技术进行检验.实际上Windo ...

  8. 树莓派3B初始化后一些必须的设置

    接上一篇,SSH已经登录成功(http://www.cnblogs.com/crosys/p/6220108.html) 1.树莓派系统的设置 1.1扩展系统空间 因为内存卡还有很多空间没有分配,第一 ...

  9. zabbix-3.0.3 mysql表分区的方法

    目的:解决mysql空间越来越大,mysql性能出现瓶颈,zabbix会无端出现大量agent超时报警 中间遇到一个mysql问题:5.1版本的mysql不支持分表(其实是支持的,需要重新编译mysq ...

  10. MDK st-link下载STM32程序出现Internal command error和Error:Flash download failed. Target DLL

    MDK st-link下载STM32程序出现Internal command error和Error:Flash download failed. Target DLL   是因为目标板的芯片处于休眠 ...