4

在我涉足 AngularJS 时，我有点困惑。这样做的主要原因是因为我从来没有真正理解过整个事情的模型部分是什么。我的意思是，它是一个 MVC 框架，所以它必须有模型，对吗？所以，我对这件事做了一点阅读。我试着在这里阅读这篇文档。

我从中了解到的是，控制器的模型方面，实际上是$scope字典里面的内容。很好，这并没有打扰我，直到我读到了evil-trout 的一篇博文，他是话语的制造者之一。

他试图解决的问题是 Angular 没有合适的建模方案。我试图寻找答案，但我碰到了这个。这是一本很好的读物，但并没有给我具体的例子来说明如何在 AngularJS 中构建模型。

我觉得这确实缺乏，因为我习惯了 django 开发，并且有清晰的模型是有帮助的。在 emberjs 中，似乎有一种方法可以制作模型，它继承自 Ember 类。此外，在阅读 evil-trout 的博客文章后，我了解了将所有变量附加​​到范围的潜在缺陷，其中许多变量是原语，而不是对象。

那么，在 AngularJS 中构建模型的最佳方法是什么，以便您将来可以拥有可维护的代码。我坚持使用 angular 的主要原因是因为它编写起来非常简单，但我担心它最终可能会变成类似 php 的东西，为了简单起见，功能经常被取代。

我希望我已经能够明确我的问题，如果没有，请随时发表评论，告诉我如何改进。

4

2 回答 2

7

关于模型要记住的事情

它们代表了一大块数据......

  • 该块可以来自一个 API，一个静态文件，被显式声明。
  • 它可以通过您应用程序中的事件进行更新。

它们可以是多个或一个...

  • 模型不必是包罗万象的对象。如果您看到从单个模型中抽象出较小模型的潜力，那么您已经发现了模块化代码。将子服务注入您的父级可确保关注点和可重用性的分离。

一个很好的例子是考虑使用两个 API 来构建单个模型的服务。你当然可以像这样构建它：

angular.module('things', [])
.factory('Things', function($http) {
    var _things = {};
    _things.getThing1 = function(){return $http.get('http://ONE.com/1')};
    _things.getThing2 = function(){return $http.get('http://TWO.com/2')};
    return _things;
};

但是如果你想在另一个项目中使用这些 API 调用呢？构成我的单一服务的组件真的最好用它们自己的服务来表示吗？

angular.module('thing1', [])
.factory('T1', function($http) {
    var _thing1 = {};
    _thing1.getThing1 = function(){return $http.get('http://ONE.com/1')};
    return _thing1;
};

angular.module('thing2', [])
.factory('T2', function($http) {
    var _thing2 = {};
    _thing2.getThing2 = function(){return $http.get('http://TWO.com/2')};
    return _thing2;
};

angular.module('things', ['thing1','thing2'])
.factory('Things', function(T1,T2) {
    var _things = {};
    _things.getThing1 = T1.getThing1();
    _things.getThing2 = T2.getThing2();
    return _things;
};

现在您可以使用thing1或thing2独立于things. 这是个好消息，因为您正在进行的下一个项目不需要thing1但肯定需要thing2. 如果不出意外，模块化服务（或一般的任何代码）将为您的应用程序提供结构，帮助您将事物识别为组件而不是 blob。

于 2013-08-08T15:07:02.823 回答
1

我们使用 Angular 已经有一段时间了，我们提出了一个约定来帮助我们控制范围污染。

$scope我们在每个控制器中的变量上最多定义 2 个属性。viewModel和model。作为viewModel一个对象，它帮助我们实现简单的模型绑定，而model对象是与 CRUD 操作的视图有关的数据。

ng-view我们在主视图 ( )、子视图（使用 创建的视图ng-include）、指令（如果我们创建隔离范围）中遵循此约定。

无耻的插件：几天前我写了一篇博客文章详细说明了这一点:)

于 2013-08-08T14:46:42.597 回答