我想创建一个工厂来抽象我的$http
来电。我想在多个模块中使用这个工厂,但我只希望保留该文件的一个副本。
我发现我正在做与kendo.directives
类似的事情:
angular.module('createPolicy', ['kendo.directives'])
.controller('CreatePolicyController', ['$scope', function ($scope) {
如何创建工厂,以便在添加kendo.directives
来源后,我可以像.js
那样简单地将其包含在内?
例如:
angular.module('createPolicy', ['kendo.directives', 'myPolicyService'])
.controller('CreatePolicyController', ['$scope', function ($scope) {
我如何构建工厂才能像那样使用它?
编辑:我在angular-factories.js中有以下内容:
var policyService = angular.module("PolicyService", []);
policyService.factory('PolicyService', function ($http) {
return {
getFoos: function () {
//return the promise directly.
return $http.get('/foos')
.then(function (result) {
//resolve the promise as the data
return result.data;
});
}
}
});
然后,在另一个文件中,我尝试使用它:
angular.module('createPolicy', ['kendo.directives', 'PolicyService'])
.controller('CreatePolicyController', ['$scope', function ($scope, policyService) {
$scope.editPolicy = true;
$scope.packages = [];
console.log(policyService.getFoos());
但是,我收到了错误:
TypeError:无法读取属性' getFoos'未定义的
我包含这样的文件(在ASP.NET MVC中):
bundles.Add(new ScriptBundle("~/bundles/jqueryplugins").Include(
"~/Scripts/angular.min.js",
"~/Scripts/angular-factories.js",
"~/Scripts/kendo.all.min.js",
"~/Scripts/kendo.aspnetmvc.min.js"));
答案 0 :(得分:4)
您可以定义自己的模块。
var specialHttpModule = angular.module("specialHttpModule", []);
specialHttpModule.service("someSpecialService", someSpecialService);
这将在此模块的.js
文件中。然后,您可以将其作为依赖项包含或使用angular.module("specialHttpModule");
检索它。要将其添加到createPolicy
模块,您需要将模块名称添加到依赖项列表中:
angular.module('createPolicy', ['kendo.directives', 'specialHttpModule'])
然后在您的模块中可以使用specialHttpModule
中声明的所有服务,指令和控制器进行注入:
.controller('CreatePolicyController', ['$scope', 'someSpecialService',
function ($scope, someSpecialService) {
答案 1 :(得分:1)
而不是service
或factory
使用与Provider
属性相同的get
版本返回的对象,并在config
的多个模块中配置相同的提供程序节
<强>工厂:
angular.module('myApp')
.factory('myService', function() {
return {
'username': 'auser',
'url': ''
'setUrl': function(inputUrl){
this.url = inputUrl;
}
}
})
等效提供商:
var appProvider = angular.module('appProvider', []);
appProvider.provider('myService', {
$get: function() {
return {
'username': 'auser',
'url': ''
'setUrl': function(inputUrl){
this.url = inputUrl;
}
}
}
});
在多个模块中配置提供程序:
第1单元:
angular.module('myApp', ['appProvider'])
.config(function(myServiceProvider) {
myServiceProvider
.setUrl("stackoverflow.com");
});
第2单元:
angular.module('secondApp', ['appProvider'])
.config(function(myServiceProvider) {
myServiceProvider
.setUrl("google.com");
});