Javascript 如何为大型可维护应用程序构建angularJS模型?

Javascript 如何为大型可维护应用程序构建angularJS模型?,javascript,angularjs,Javascript,Angularjs,在我进入AngularJS的过程中,我有点困惑。主要原因是,我从来没有真正理解过,整个事情的模型部分是什么。我的意思是,这是一个MVC框架,所以它必须有模型,对吗?所以,我就这件事读了一点书。我试着读书 我从中了解到的是,控制器的模型方面,实际上是$scope字典中的内容。很好,这并没有困扰我,直到我读到一篇文章,一位话语的创造者 他想做的是,Angular没有一个合适的建模方案。我试着去寻找答案,结果我碰到了。这本书读得很好,但并没有给我具体的例子说明如何用AngularJS构造模型 我觉得这

在我进入AngularJS的过程中,我有点困惑。主要原因是,我从来没有真正理解过,整个事情的模型部分是什么。我的意思是,这是一个MVC框架,所以它必须有模型,对吗?所以,我就这件事读了一点书。我试着读书

我从中了解到的是,控制器的模型方面,实际上是
$scope
字典中的内容。很好,这并没有困扰我,直到我读到一篇文章,一位话语的创造者

他想做的是,Angular没有一个合适的建模方案。我试着去寻找答案,结果我碰到了。这本书读得很好,但并没有给我具体的例子说明如何用AngularJS构造模型

我觉得这确实是缺乏的,因为我已经习惯了django开发,拥有清晰的模型是很有帮助的。在emberjs中,似乎有一种方法可以创建从Ember类继承的模型。此外,在阅读了邪恶鳟鱼的博客文章后,我理解了将所有变量附加到作用域的潜在陷阱,其中许多是原语,而不是对象

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


我希望我能把我的问题说清楚,如果没有,请随时发表评论,告诉我如何改进。

我们已经使用Angular一段时间了,我们已经制定了一项公约,帮助我们控制范围污染

我们在每个控制器的
$scope
变量上最多定义2个属性<代码>视图模型和
模型
viewModel
是一个帮助我们实现简单模型绑定的对象,而
model
是与CRUD操作视图相关的数据

我们在主视图(
ng视图
)、子视图(使用
ng include
创建的视图)、指令(如果我们创建独立范围)中遵循此约定

无耻插头:几天前我写了一篇详细介绍这一点的文章:)

关于模型需要记住的事情 它们代表一块数据

  • 该块可以来自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
独立于
事物
。这是个好消息,因为您正在进行的下一个项目不需要
thing1
,但肯定需要
thing2
。如果没有其他东西,模块化服务(或任何代码)将为您的应用程序提供结构,帮助您将事物识别为组件而不是斑点。

我建议听米什科的“最佳实践”视频,特别是他在视频中谈到的模型: