为了防止环境改变时需要修改多处接口的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. 初识Spring框架实现IOC和DI(依赖注入)

    学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的, IoC是 ...

  2. angularjs中的filter(过滤器)——格式化日期的date

    date过滤器的功能是基于要求的格式格式化一个日期成为一个字符串. 格式化字符串的基本参数: 'yyyy': 用4位数字表示年(例如:AD 1 => 0001, AD 2010 => 20 ...

  3. ArcGIS Engine开发之量测功能

    1.距离测量 距离测量时,片段长度通过两点之间距离计算得到,全部长度通过片段长度的和计算得到.主要用到INewLineFeedback和IScreenDisplay两个接口. 1)INewLineFe ...

  4. 使用IdleTest进行TDD单元测试驱动开发演练(2)

    [前言] 1. 有关上篇请参见<使用IdleTest进行TDD单元测试驱动开发演练(1)>,有关本篇用到Entity Framework Code First请参见<使用NuGet助 ...

  5. pc端与移动端的区别

    移动设备和PC本身有区别: 1.屏幕尺寸不同,屏幕大小导致显示的内容页不一样. 2.网络速度不同:手机分2G.3G.4G.WIFI等,我们要少用图片,JS.动画等等,用户打不开一样起不了作用. 3.使 ...

  6. Markdown 新手指南

    Markdown 新手指南   「简书」作为一款「写作软件」在诞生之初就支持了 Markdown,Markdown 是一种「电子邮件」风格的「标记语言」,我们强烈推荐所有写作者学习和掌握该语言.为什么 ...

  7. vi(vim)键盘图及其基本命令

    进入vi vi filename                打开或新建文件,并将光标置于第一行首 vi +n filename           打开文件,并将光标置于第 n行首 vi + fi ...

  8. JSON字符串和JS对象之间的转换

    JSON字符串和JS对象之间的转换 1 json字符串转换为js对象 1.1 标准json格式字符串转换为Js对象  JSON字符串 str JSON.parse(str) eval(str) eva ...

  9. [转]ASP.NET Core--根据方案来限制身份

    本文转自:http://www.cnblogs.com/duyao/p/5980105.html 翻译如下: 在某些情况下,比如单页的应用程序,可以与多种认证来方式结合.例如,您的应用程序可能使用基于 ...

  10. vi安装Vundle+YouCompleteMe+注释快捷'scrooloose/nerdcommenter'

    Vundle is short for Vim bundle and is a Vim plugin manager. 从git上下载vundle $ git clone https://github ...