将API方法构建为角度服务

时间:2013-02-12 18:43:59

标签: javascript angularjs

几天前,当我开始使用AngularJS时,我发现了许多有用的东西,我意识到在Web应用程序中使用它更容易,而不是从头开始构建所有内容(有时这是必要的,但在大多数情况下并非如此)或使用大量可能会混淆应用程序加载时间的库。

所以,我有一个用于在线商店的php API包装器,有很多方法(我试图模仿REST,但API只提供POST和GET),我开始为它构建一个JS脚本,可用于在没有任何PHP知识或不得不触及任何PHP代码的情况下调用方法。

使用AngularJS我提出了这个:

var Application = Application || {};

;(function($, window, document, undefined) {

"use strict";

var Envato = {};

Application.Envato = angular.module("Envato", []);

Application.Envato.constant("API", {

    Path : {
        Private : "api/envato/private/",
        Public : "api/envato/public/"
    }
});

})(jQuery, window, document);

以上是我的模块,放在modules文件夹中。接下来,将是围绕模块的工厂构建(放置在与上述模块相同的文件夹中):

var Application = Application || {};

;(function($, window, document, undefined) {

"use strict";

Application.Envato.factory("APIXHRService", function($http, $timeout, $q) {

    return function(method, url, data) {

        var deferred = $q.defer(),
            headers = {
                "Content-Type" : "Application/JSON"
            };

        $http({ method : method, url : url, data : data, headers : headers }).success(function(_data) {

            deferred.resolve(_data);
            deferred = $q.defer();
        }).error(function(_data) {

            deferred.resolve(_data || "Request [ Failed ]");
            deferred = $q.defer();
        });

        return deferred.promise;
    };
});

Application.Envato.factory("Envato", function(APIXHRService, API) {

    return {

        API : {

            Private : {

                User : {

                    Account : function(user){
                        return APIXHRService("POST", API.Path.Private + "get-account-information.php", { user : user });
                    },

                    Statement : function(user) {
                        return APIXHRService("POST", API.Path.Private + "get-statement.php", { user : user });
                    },

                    Sales : function(user) {
                        return APIXHRService("POST", API.Path.Private + "get-recent-sales.php", { user : user });
                    },

                    Transactions : function(user) {
                        return APIXHRService("POST", API.Path.Private + "get-earnings-and-sales-by-month.php", { user : user });
                    },

                    Vitals : function(user) {
                        return APIXHRService("POST", API.Path.Private + "get-user-vitals.php", { user : user });
                    }
                },

                Purchases : {

                    Download : function(user, token) {
                        return APIXHRService("POST", API.Path.Private + "get-item-download-url.php", { user : user, token : token });
                    },

                    Information : function(user, token) {
                        return APIXHRService("POST", API.Path.Private + "get-purchase-information.php", { user : user, token : token });
                    }
                }
            },

            Public : {

                API : {

                    Releases : function() {
                        return APIXHRService("GET", API.Path.Public + "get-api-releases.php");
                    }
                },

                Blog : {

                    Posts : function(marketplaces) {
                        return APIXHRService("POST", API.Path.Public + "get-blog-posts.php", { marketplaces : marketplaces });
                    },

                    Threads : {

                        Active : function(marketplaces) {
                            return APIXHRService("POST", API.Path.Public + "get-active-threads.php", { marketplaces : marketplaces });
                        },

                        Status : function(threads) {
                            return APIXHRService("POST", API.Path.Public + "get-thread-status.php", { threads : threads });
                        }
                    }
                },

                Collections : function(collections) {
                    return APIXHRService("POST", API.Path.Public + "get-collections.php", { collections : collections });
                },

                Items : {

                    Count : function(marketplaces) {
                        return APIXHRService("POST", API.Path.Public + "get-items-count.php", { marketplaces : marketplaces });
                    },

                    Featured : function(marketplaces) {
                        return APIXHRService("POST", API.Path.Public + "get-featured-items.php", { marketplaces : marketplaces });
                    },

                    Information : function(items) {
                        return APIXHRService("POST", API.Path.Public + "get-item-information.php", { items : items });
                    },

                    Latest : {

                        Marketplace : function(marketplaces) {
                            return APIXHRService("POST", API.Path.Public + "get-new-items-from-market.php", { marketplaces : marketplaces });
                        },

                        Random : function(marketplaces) {
                            return APIXHRService("POST", API.Path.Public + "get-random-new-items.php", { marketplaces : marketplaces });
                        },

                        User : function(users) {
                            return APIXHRService("POST", API.Path.Public + "get-new-items-from-user.php", { users : users });
                        }
                    },

                    Popular : function(marketplaces) {
                        return APIXHRService("POST", API.Path.Public + "get-popular-items.php", { marketplaces : marketplaces });
                    },

                    Price : function(items) {
                        return APIXHRService("POST", API.Path.Public + "get-item-price.php", { items : items });
                    }
                },

                Users : {

                    Information : function(users) {
                        return APIXHRService("POST", API.Path.Public + "get-user-information.php", { users : users });
                    },

                    Items : {

                        Count : function(users) {
                            return APIXHRService("POST", API.Path.Public + "get-user-items-by-site.php", { users : users });
                        }
                    },

                    Total : function() {
                        return APIXHRService("GET", API.Path.Public + "get-total-users-count.php");
                    },
                },

                Search : function(expression, marketplace, categories) {
                    return APIXHRService("POST", API.Path.Public + "get-search-results.php", { expression : expression, marketplace : ( marketplace === undefined ? "" : marketplace ), categories : ( categories === undefined ? "" : categories ) });
                }
            }
        }
    };
});

})(jQuery, window, document);

最后,如果需要,我有一个控制器,可以让我检查方法是否正常工作:

var Application = Application || {};

;(function($, window, document, undefined) {

"use strict";

Application.controller("EnvatoAPIController", ["$scope", "_debounce", "Envato", function($scope, _debounce, Envato) {

    $scope.getData = _debounce(function($event) {

        $event.preventDefault();

        return Envato.API.Private.Purchases.Download("chaoscod3r", "52dfdscb1-dada-4ff8-bfcb-d3fdsbn55mda").then(function(data) {
            $scope.data = JSON.stringify(data, undefined, 4);
        });

    }, 250, false);

}]);

})(jQuery, window, document);

我发布这个的原因是我正在寻找一些关于如何改进我的代码的见解,因为在我看来它在那里有点太多了。也许用Angular有更好的方法吗?我没有机会通过所有AngularJS API文档,所以我想这里肯定有很多开发人员使用Angular并且可以给我一些提示:)

编辑:问题是如何折射Envato工厂?哪种方式最好?

1 个答案:

答案 0 :(得分:1)

如果省略全局应用程序var声明并将所有角度模块附加到角度对象,则可以保存一些行。 (我不知道在哪里放“使用严格”;但是声明。)

也可以使用括号注入的括号表示法来启用js代码缩小。

<强>之前:

var Application = Application || {};

;(function($, window, document, undefined) {

    Application.Envato.factory("APIXHRService", function($http, $timeout, $q) {
       return function (
       //something
    });

    Application.Envato.factory("Envato", function(APIXHRService, API) {
        return {
            //api
        };
    });

})(jQuery, window, document);

<强>后:

angular.factory("APIXHRService", ["$http", "$timeout", "$q", function($http, $timeout, $q) {
   return function (
   //something
}])

.factory("Envato", ["APIXHRService", "API", function(APIXHRService, API) {
    return {
        //api
    };
}]);