Question

我有一个包含多个小部件的页面。页面加载后，我得到一个包含URL的小部件列表。然后我 - 包括网址。

每个小部件都有自己的控制器，使用小部件html中的<script>标记加载。由于小部件列表是动态的，我无法在页面加载时加载小部件.js文件。（当我这样做时，它工作正常。）我一直收到错误。

我正在尝试将$ http调用包装在服务中，以使我的控制器单元可测试。

这是我的HTML：

<script src="/widget/fooWidget.js"></script>

<div ng-controller="FooWidgetCtrl">
    ...
</div>

这是我的fooWidget.js :(我在页面加载时加载的文件中定义了Widgets模块）

Widgets.service('FooWidgetSvc', function($http) {
    this.getSomething = function() {
        // $http methods
    }
});

function FooWidgetCtrl($scope, $http, FooWidgetSvc) {
    FooWidgetSvc.getSomething();
    return $scope.FooWidgetCtrl = this;
}

我收到以下错误：

Error: Unknown provider: FooWidgetSvcProvider <- FooWidgetSvc
at Error (<anonymous>)

我希望发生这种情况是因为我在角度引导过程完成后尝试定义服务。

如果有帮助的话我可以做一个傻瓜。

更新

感谢目前为止的回复。我创建了一个帮助说明我的问题的plunker：http://plunker.co/edit/iKzwnlZ7bNDjmR05qGDC

我已经想出如何手动注册控制器，并将其包含在plunker中。

Answer 1

好的，伙计们，对不起来了。我终于读了documentation足够多的时间，我发现了它。

我试图在Angular消化了所有内容之后创建一个服务，这意味着我必须使用$ controllerProvider手动将控制器附加到模块，并使用$ provide提供给模块的服务：

var WidgetsControllerProvider = null;
var WidgetsProvider = null;

var Widgets = angular.module('widgets', [], function($controllerProvider, $provide) {
  WidgetsControllerProvider = $controllerProvider;
  WidgetsProvider = $provide;
});

现在我可以像这样手动添加服务和控制器：

WidgetsProvider.factory('blergWidgetSvc', function($http) {
  return {
    getCountry: function(callback) {
      // code
    }
  };
});

WidgetsControllerProvider.register('blergWidgetCtrl', function($scope, blergWidgetSvc) {
    // code
});

我已经分叉并更新了plunker以显示我的解决方案。

Answer 2

这对你有用吗？

Widgets.service('FooWidgetSvc', function($http) {
    this.getSomething = function() {
        // $http methods
    }
}).controller('FooWidgetCtrl', function($scope, $http, FooWidgetSvc) {
    FooWidgetSvc.getSomething();
}

AngularJS：手动注册服务

2 个答案: