Question

我正在使用Angular为网络应用开发评论功能。目前应用程序中有两个部分是用户可以评论的：

分类
产品

对于这两个部分，大约90％的评论功能是相同的，因此我想使其可重复使用 - 即编写一些我可以作为基础参考/使用的服务或控制器。

到目前为止，我的研究似乎指向使用工厂服务，但不幸的是，这似乎不起作用（我花了一整天的时间来完成各种教程）。

我很可能会过度思考这个问题并使其过于复杂，但老实说，我不知道该转向哪个方向。

这是对我到目前为止的快速而肮脏的概述：

类别的HTML视图
类别的控制器（从服务接收数据并将数据发布到服务以便将数据绑定到模型）
该类别的服务（检索并存储所有必要的内容）数据）
该产品使用相同的逻辑，服务和控制器中的许多代码将被复制。我已成功将这两项服务合并为一项服务，但我在为控制器做同样的事情时遇到了麻烦。

我：

编写一个基本控制器，它将与上述服务进行通信，并将与两个现有控制器连接
OR
编写一个工厂/提供商服务，该服务连接到两个现有控制器以及上述服务。

Answer 1

如果您使用工厂的路线，您可以将所有常用功能放入其返回对象中，并从控制器中引用它。

<强>工厂

angular.module('myModule').factory('CommonFunctions', function(){
  return {
    foo : foo,
    bar : bar
  }

  function foo(){ 
    console.log('foo'); 
  };
  function bar (){ 
    console.log('bar'); 
  };
}

<强>控制器

 angular.module('myModule')
        .controller('myController', ['CommonFunctions', function(CommonFunctions) {
    var vm = this;
    vm.foo = CommonFunctions.foo();
    vm.bar = CommonFunctions.bar();
 }

Answer 2

角度分离服务类型即：

了解具体值
- 常数
- value
- （在创建其他服务之前需要特定值的常量）
用于功能
- 工厂
- 服务
- 提供商
- （在创建其他服务之前需要服务的特定实例的提供者，通常利用常量）

允许共享数据的方式以及在控制器和/或指令之间处理数据的方法，任何可以是value的任何东西也可以是constant，唯一的区别在于它们可以在哪里注射。同样地，任何service都可以重写为factory或provider，更多是您的特定用例/您更舒服的写作决定使用哪个，但实际上是最好的方式考虑一下，如果你有一个需要共享但在angular.module.config内不需要的值，那么使用value，否则使用constant，现在如果你有一个功能，你想分享，（也许它以某种方式处理这个价值，或者只是做其他事情）你应该把它写成工厂，然后当你有一些工厂处理这个价值，或者除此之外，您可以将它们组合成service或使用提供程序配置和组合它们。这是一个简单的例子（注意我使用推荐的语法来编写角度服务）：

'use strict';
var app = angular.module('test.app',[]);

app.constant('configureableValue',{defaultValue:55});

app.value('editableValue',{defaultValue:100,editedValue:null});

app.provider('configureValue',configureValueProvider);
configureValueProvider.$inject - ['configureableValue'];
function configureValueProvider(configureableValue){
    var defaultVal = configureableValue.defaultValue,
        originalVal = defaultVal;
    return {
        getValue:getValue,
        setValue:setValue,
        resetValue:resetValue,
        '$get':providerFunc
    };
    function getValue(){
        return defaultVal;
    }
    function setValue(val){
        defaultVal = val;
    }
    function providerFunc(){
        return {
            get:function(){ return getValue(); },
            reset:function(){ resetValue(); }
        };
    }
    function resetValue(){
        defaultVal = originalVal
    }
}
// this factory is an example of a single function service, this should almost always be defined as a factory
app.factory('getEditableValue',getEditableValue);
getEditableValue.$inject = ['editableValue'];
function getEditableValue(editableValue){
    return function(){
        return editableValue.editedValue ? editableValue.editedValue : editableValue.defaultValue;
    };
}
// same with this one
app.factory('setEditableValue',setEditableValue);
setEditableValue.$inject = ['editableValue'];
function setEditableValue(editableValue){
    return function(val){
        editableValue.editedValue = val;
    }
}
// now this is an example of a service service collecting the factorys for an object with all the related behavior we need
app.service('editableService',editableService);
editableService.$inject = ['getEditableValue','setEditableValue'];
function editableService(getEditableValue,setEditableValue){
    var self = this;
    self.setVal = setEditableValue;
    self.getVal = getEditableValue;
}
app.config(appConfig);
appConfig.$inject = ['configureValueProvider'];
function appConfig(configureValueProvider){
    configureValueProvider.setValue('i changed '+ configureValueProvider.getValue() +' to this!!!!');
}

app.run(appRun);
appRun.$inject = ['configureValue','editableService'];
function appRun(configureValue,editableService){
    console.log('before editing: ',editableService.getVal());
    editableService.setVal('changed!!!');
    console.log('after editing: ',editableService.getVal());
    console.log('we changed this in the config func: ',configureValue.get());
    configureValue.reset();
    console.log('and now its back to the original value: ',configureValue.get());
}

我知道这对于一个简单的例子来说很多，但是角度提供了许多功能，并且有许多方法可以使用它们，希望这会有所帮助。

Angular - 重用代码（服务或控制器）

2 个答案: