模型数据和行为放在哪里？[tl; 博士 使用服务]

我正在为最新项目使用AngularJS。在文档和教程中，所有模型数据都放入控制器范围。我知道控制器必须可用，因此必须在相应的视图内可用。

但是我不认为该模型应该在那里实际实施。它可能很复杂，并且具有私有属性。此外，可能要在另一个上下文/应用程序中重用它。将所有内容放入控制器中完全破坏了MVC模式。

任何模型的行为都一样。如果我要使用DCI体系结构并将行为与数据模型分开，则必须引入其他对象来保存行为。这可以通过介绍角色和上下文来完成。

DCI == d ATA Ç ollaboration 我 nteraction

当然，可以使用简单的javascript对象或任何“类”模式来实现模型数据和行为。但是，AngularJS的实现方式是什么？使用服务？

所以归结为这个问题：

遵循AngularJS最佳实践，如何实现与控制器分离的模型？

如果您希望某些东西可以被多个控制器使用，则应该使用服务。这是一个简单的示例：

myApp.factory('ListService', function() {
  var ListService = {};
  var list = [];
  ListService.getItem = function(index) { return list[index]; }
  ListService.addItem = function(item) { list.push(item); }
  ListService.removeItem = function(item) { list.splice(list.indexOf(item), 1) }
  ListService.size = function() { return list.length; }

  return ListService;
});

function Ctrl1($scope, ListService) {
  //Can add/remove/get items from shared list
}

function Ctrl2($scope, ListService) {
  //Can add/remove/get items from shared list
}

我目前正在尝试这种模式，该模式虽然不是DCI，但提供了经典的服务/模型解耦（带有用于与Web服务对话的服务（又称为模型CRUD），以及用于定义对象属性和方法的模型）。

请注意，只有在模型对象需要在其自身属性上使用方法的情况下，我才使用该模式，我可能会在所有地方使用该模式（例如改进的getter / setter方法）。我并不是在为每种服务系统地提倡这样做。

编辑：我曾经认为这种模式会违背“ Angular模型是普通的旧javascript对象”的口头禅，但是在我看来，现在这种模式非常好。

编辑（2）：更清楚地说，我仅使用Model类来分解简单的getter / setter方法（例如：在视图模板中使用）。对于大型业务逻辑，我建议使用“了解”模型但与它们分开的单独服务，并且仅包含业务逻辑。如果需要，可将其称为“业务专家”服务层

service / ElementServices.js（注意元素如何在声明中注入）

MyApp.service('ElementServices', function($http, $q, Element)
{
    this.getById = function(id)
    {
        return $http.get('/element/' + id).then(
            function(response)
            {
                //this is where the Element model is used
                return new Element(response.data);
            },
            function(response)
            {
                return $q.reject(response.data.error);
            }
        );
    };
    ... other CRUD methods
}

model / Element.js（使用angularjs Factory，用于创建对象）

MyApp.factory('Element', function()
{
    var Element = function(data) {
        //set defaults properties and functions
        angular.extend(this, {
            id:null,
            collection1:[],
            collection2:[],
            status:'NEW',
            //... other properties

            //dummy isNew function that would work on two properties to harden code
            isNew:function(){
                return (this.status=='NEW' || this.id == null);
            }
        });
        angular.extend(this, data);
    };
    return Element;
});

Angularjs文档明确指出：

与许多其他框架不同，Angular对模型没有任何限制或要求。没有类可以继承或使用特殊的访问器方法来访问或更改模型。该模型可以是原始的，对象哈希或完整的对象类型。简而言之，模型是一个普通的JavaScript对象。

— AngularJS开发人员指南-V1.5概念-模型

因此，这取决于您如何声明模型。这是一个简单的Javascript对象。

我个人不会使用Angular Services，因为它们的作用类似于您可以使用的单例对象，例如，在应用程序中保持全局状态。

DCI是一个范式，因此，没有语言AngularJS的方式可以实现，无论语言是否支持DCI。如果您愿意使用源代码转换，那么JS会很好地支持DCI，如果您不愿意，它会存在一些缺点。再说一次，DCI与依赖注入无关，与说C＃类无关，而且绝对不是服务。因此，使用angulusJS进行DCI的最佳方法是采用JS方式进行DCI，这与DCI的最初编写方式非常接近。除非您进行源转换，否则您将无法完全完成转换，因为角色方法即使在上下文之外也将成为对象的一部分，但这通常是基于方法注入的DCI的问题。如果您查看fullOO.info在DCI的权威网站上，您可以查看它们也使用方法注入的ruby实现，或者您可以在此处查看有关DCI的更多信息。它主要与RUby示例有关，但DCI内容与此无关。DCI的关键之一是系统的工作与系统的工作是分开的。因此，数据对象相当笨拙，但是一旦绑定到上下文角色中，角色方法就可以使某些行为可用。角色只是一个标识符，仅此而已；当通过该标识符访问对象时，可以使用角色方法。没有角色对象/类。使用方法注入时，角色方法的作用域与所描述的不完全相同，而是很接近。JS中的上下文示例可能是

function transfer(source,destination){
   source.transfer = function(amount){
        source.withdraw(amount);
        source.log("withdrew " + amount);
        destination.receive(amount);
   };
   destination.receive = function(amount){
      destination.deposit(amount);
      destination.log("deposited " + amount);
   };
   this.transfer = function(amount){
    source.transfer(amount);
   };
}

关于AngularJS中的模型的本文可能会有所帮助：

http://joelhooks.com/blog/2013/04/24/modeling-data-and-state-in-your-angularjs-application/

正如其他发布者所述，Angular没有提供现成的用于建模的基类，但是可以有用地提供以下功能：

1. 与RESTful API交互并创建新对象的方法
2. 在模型之间建立关系
3. 在持久化到后端之前验证数据；对显示实时错误也很有用
4. 缓存和延迟加载，以防止产生浪费的HTTP请求
5. 状态机挂钩（保存，更新，创建，新建等之前/之后）

ngActiveResource（https://github.com/FacultyCreative/ngActiveResource）。完全公开-我写了这个库-我已经成功地用它来构建几个企业级应用程序。它已经过充分的测试，并提供了Rails开发人员应该熟悉的API。

我和我的团队将继续积极地开发这个库，并且我希望看到更多的Angular开发人员对此做出贡献并进行测试。

这是一个比较老的问题，但是我认为该主题比Angular 2.0的新方向更重要。我想说的一种最佳实践是编写对特定框架的依赖关系尽可能少的代码。仅在增加直接价值的地方使用框架特定的部分。

当前，似乎Angular服务是将其引入下一代Angular的少数几个概念之一，因此遵循将所有逻辑移至服务的一般准则可能是明智的。但是，我认为即使不直接依赖Angular服务也可以创建解耦模型。创建仅具有必要的依赖关系和责任的自包含对象可能是解决方法。进行自动化测试时，也使工作变得更加轻松。如今，单一职责是一项繁琐的工作，但这确实很有意义！

这是一个示例的示例，我认为该示例非常适合将对象模型与dom分离。

http://www.syntaxsuccess.com/viewarticle/548ebac8ecdac75c8a09d58e

一个关键目标是以一种使代码在单元测试中使用与在视图中一样易于使用的方式来构造代码。如果您实现了这一点，那么您就可以编写出切实可行的测试。

我已尝试在此博客文章中解决该确切问题。

基本上，数据建模的最佳场所是服务和工厂。但是，根据获取数据的方式以及所需行为的复杂性，有许多不同的实现方法。Angular目前没有标准方法或最佳实践。

该帖子介绍了三种方法，使用$ http，$ resource和Restangular。

这是每个示例代码，带有自定义 getResult()在Job模型上方法：

矩形（容易松开）：

angular.module('job.models', [])
  .service('Job', ['Restangular', function(Restangular) {
    var Job = Restangular.service('jobs');

    Restangular.extendModel('jobs', function(model) {
      model.getResult = function() {
        if (this.status == 'complete') {
          if (this.passed === null) return "Finished";
          else if (this.passed === true) return "Pass";
          else if (this.passed === false) return "Fail";
        }
        else return "Running";
      };

      return model;
    });

    return Job;
  }]);

$ resource（稍微复杂一些）：

angular.module('job.models', [])
    .factory('Job', ['$resource', function($resource) {
        var Job = $resource('/api/jobs/:jobId', { full: 'true', jobId: '@id' }, {
            query: {
                method: 'GET',
                isArray: false,
                transformResponse: function(data, header) {
                    var wrapped = angular.fromJson(data);
                    angular.forEach(wrapped.items, function(item, idx) {
                        wrapped.items[idx] = new Job(item);
                    });
                    return wrapped;
                }
            }
        });

        Job.prototype.getResult = function() {
            if (this.status == 'complete') {
                if (this.passed === null) return "Finished";
                else if (this.passed === true) return "Pass";
                else if (this.passed === false) return "Fail";
            }
            else return "Running";
        };

        return Job;
    }]);

$ http（核心）：

angular.module('job.models', [])
    .service('JobManager', ['$http', 'Job', function($http, Job) {
        return {
            getAll: function(limit) {
                var params = {"limit": limit, "full": 'true'};
                return $http.get('/api/jobs', {params: params})
                  .then(function(response) {
                    var data = response.data;
                    var jobs = [];
                    for (var i = 0; i < data.objects.length; i ++) {
                        jobs.push(new Job(data.objects[i]));
                    }
                    return jobs;
                });
            }
        };
    }])
    .factory('Job', function() {
        function Job(data) {
            for (attr in data) {
                if (data.hasOwnProperty(attr))
                    this[attr] = data[attr];
            }
        }

        Job.prototype.getResult = function() {
            if (this.status == 'complete') {
                if (this.passed === null) return "Finished";
                else if (this.passed === true) return "Pass";
                else if (this.passed === false) return "Fail";
            }
            else return "Running";
        };

        return Job;
    });

博客文章本身更详细地介绍了为什么您可能使用每种方法的原因以及如何在控制器中使用模型的代码示例：

AngularJS数据模型：$ http VS $ resource VS Restangular

Angular 2.0有可能为数据建模提供更强大的解决方案，使每个人都在同一页面上。