angularJS的公用代码Constant Service Factory

目录

App.js

Constant

Factory

Service

---

查看别人的业务代码想学习一下angularJS，随便打开一个js都是近千行代码，因为多人开发代码基本不复用，

但是实际上业务并不复杂。

简单学习下angularJS提取公共代码的一些方式。

App.js

在App.js的module定义之前，

可以加入一些简单的全局常量

或者Date.prototype.Format等简单的工具（日期格式化方法）

Constant

系统里面的常量可以使用Constant来提取出，这里用Constant来存一些系统的枚举常量

//存储本模块的枚举常量
module.constant("dmConstant",{
    //用户类型
    UserType:[
        {ID:1,Name:"个人"},
        {ID:1,Name:"机构"},
    ],
    //日志类型
    LogType:[
        {ID:1,Name:"登录日志"},
        {ID:2,Name:"退出日志"},
    ]
});

这样做的好处是枚举常量可以集中维护

不用每个页面进行维护，减少重复代码，枚举的常量有修改时不用修改多个文件。

Factory

一些最基础的方法可以放在Factory里，Factory可以注入到Service里面，

这样一个Factory的方法可以被多个Service复用

Factory可以定义一个对象，共享的类or方法，就是这个对象的属性，最后直接返回对象即可

这里我们用Factory来做一个接口管理的方法

module.factory('apiFactory', function ($http) {
    var apiFactory = {};
    //抽象接口方法GetPage
    apiFactory.getApiGetFunc = function (url) {
        return (params, func) => $http.get(url, { params: params }).then(({ data }) => {
            if (data.Success) {
                func(data);
            } else {
                layer.msg(data.ErrorMessage, { icon: 5 });
            }
        }, function ({ reason }) { });
    }
    //抽象接口方法Post
    apiFactory.getApiPostFunc = function (url) {
        return (params, func) => $http.post(url, params).then(({ data }) => {
            if (data.Success) {
                func(data);
            } else {
                layer.msg(data.ErrorMessage, { icon: 5 });
            }
        }, function ({ reason }) { });
    }
    return apiFactory;
});

Service

Service可以调用Factory，然后注入到Controller里面

所以Service这里主要用来直接提供具体业务用到的一些工具方法or接口方法

这里不贴工具类了，贴一个Service引用上面Factory来实现接口管理的服务

//集中管理XX模块的接口地址
module.service('dmApiService', ['apiFactory', function (apiFactory) {
    //===========================投诉管理 by XXXX=================================
    //get
    this.TypeListGet = apiFactory.getApiGetFunc("/api/DataDictionary/GetTypeList");//获取系统数据字典
    this.AllEmployeeListGet = apiFactory.getApiGetFunc("/api/Complain/GetEmployeeList");//获取所有员工下拉列表
}]);

Service直接管理接口地址，这样业务代码和接口地址解耦，接口地址集中管理，避免反复定义，集中维护

下面再贴一下注入Controller之后Controller如何调用

$scope.getEmployeeList = () => {
            dmApiService.AllEmployeeListGet({},
                (data) => {
                    $scope.employeeList = Array.isArray(data.ComplainEmployeeList) ? data.ComplainEmployeeList : []
                });
        }

然后需要使用接口的地方调用$scope.getEmployeeList()就可以了，大大减少了业务Controller层里面的业务代码，

当然不同公司web项目http请求的复用代码都不一样，我们只用修改factory里面的内容代码、入参等来满足业务即可