将API方法构建为角度服务
build API methods as angular service
几天前,当我开始使用AngularJS时,我发现了很多有用的东西,我意识到在你的网络应用程序中使用它比从头开始构建所有东西更容易(有时这是必要的,但在大多数情况下不是)或使用大量可能会打乱应用程序加载时间的库。
因此,我为一个网上商店提供了一个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
工厂?哪种方式最好?
如果省略全局app-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
};
}]);
相关文章:
- 如何使用WCF服务和javascript表单post上传.doc文件
- 监视函数从服务返回不起作用,但作用域函数起作用
- 通过Magento的网络服务检索运费
- 我应该如何从xml文件构建一个javascript页面
- 如何在DOM元素上按类型构建此函数
- Sencha Touch构建-排除文件
- RubyonRails——构建交互式接口应该朝哪个方向发展
- 在同一个服务工作者中处理service-worker.js有任何影响吗
- 如何在构建node-webkit应用程序后获取外部资源
- 使用angular.js问题的JavaSpringREST服务
- Ext.js从json构建模型关系的问题
- 基于谷歌地图API方向服务构建的替代路线
- 在Angularjs服务中为返回对象引用的http请求提供的数据构建简单的缓存
- 如何通过多次调用在Angular JS服务或控制器中构建模型数据
- 是否有可能构建使用appMobi XDK编写的iOS应用程序,而无需通过他们的生产托管服务?
- 我想用Node.js, Sails.js和MongoDB构建一个像Kinvey这样的后端服务
- 为TFS SOAP web服务构建javascript客户端
- 将API方法构建为角度服务
- 从服务接收信息后动态构建表
- 如何针对外部服务构建自动完成控件