javascript - 重构 Controller 以使用具有多种功能的 Angular 服务

Question

我有一个工作正常的 Controller ，但似乎应该重构它以包含服务。

我的 Controller 使用两个函数来更改成分的显示。一个与移动设备的选择元素绑定(bind)，另一个与桌面的链接绑定(bind)。

是否可以重构它以使用服务？

我的移动 html:

<select ng-model="ingredient.item" ng-options="i.option for i in ingredient.items" ng-change="ingredient.change_select(ingredient.item)">
    <option value="">choose ingredient</option>
</select>

我的桌面 html:

<a ng-click="ingredient.change_tab('octopamine','Octopamine')">Octopamine</a>

我的 Controller :

app.controller('IngredientsCtrl', function() {
  var ingredient = this;

  ingredient.items = [
    {
      'option': 'Brigham\'s Tea Leaf',
      'param' : 'brighamtea'
    },
    {
      'option': 'White Willow Bark Powder',
      'param' : 'white_willow'
    }];

  ingredient.tab = 'brighamtea';
  ingredient.tab_image = 'http://imgix.ximo365.com/brighamtea.jpg';
  ingredient.tab_title = 'Brigham\'s Tea Leaf';

  ingredient.change_select = function (item) {
    ingredient.tab = item.param;
    ingredient.tab_image = 'http://imgix.ximo365.com/' + item.param + '.jpg';
    ingredient.tab_title = item.option;
  }

  ingredient.change_tab = function(param,title) {
    ingredient.tab = param;
    ingredient.tab_image = 'http://imgix.ximo365.com/' + param + '.jpg';
    ingredient.tab_title = title;
  }
});

Answer 1

当然。

创建一个工厂/服务，例如:IngredientsService

使用依赖注入(inject)在 Controller 中引入此服务。

//示例

app.controller('IngredientsCtrl'), function(IngredientsService) {
    // Create reusable service methods
    IngredientsService.change_select(item);
    IngredientsService.change_tab(param, title);
});

如果您在其他 Controller 、指令或服务等多个区域使用此功能，您还可以管理服务中的默认项目列表，以保持事物干燥。

使用服务还可以让您独立测试并模拟 Controller 中的依赖关系。