如何為大型和可維護的應用構建angularJS模型？

Question

在我進軍AngularJS時，我有點困惑。 造成這種情況的主要原因是因為我從未真正理解，整個事物的模型部分是什么。 我的意思是，它是一個MVC框架，所以它必須有模型，對嗎？ 所以，我對此事做了一些閱讀。 我在這里嘗試閱讀這些文檔 。

我從中理解的是，控制器的模型方面，實際上是$scope字典中的內容。 很好，這並沒有打擾我，直到我讀到邪惡鱒魚的博客文章，邪惡鱒魚是話語的制造者之一。

他試圖得到的是，Angular沒有適當的建模方案。 我試着尋找答案，我碰到了這個 。 這是一個很好的閱讀，但實際上沒有給我如何在AngularJS中構建模型的具體例子。

我覺得這確實缺乏，因為我已經習慣了django開發，並且擁有清晰的模型是有幫助的。 在emberjs中，似乎有一種方法可以制作繼承自Ember類的模型。 此外，在閱讀了evil-trout的博客文章之后，我理解了將所有變量附加​​到范圍的潛在缺陷，其中許多變量是原始的，而不是對象。

那么，在AngularJS中構建模型的最佳方法是什么，以便將來可以使用可維護的代碼。 我堅持使用angular的主要原因是因為它寫得非常簡單，但我擔心它最終可能會像php一樣，為了簡單起見，功能常常被取代。

我希望我能夠清楚地表達我的問題，如果沒有，請隨時發表評論，告訴我如何改進。

Answer 1

關於模型的事情要記住

它們代表了一大塊數據......

• 該塊可以來自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;
};

現在你可以獨立於things使用thing1或thing2 。 這是個好消息，因為你正在開展的下一個項目不需要thing1但絕對需要thing2 。 如果不出意外，模塊化服務（或任何一般代碼）將為您的應用提供結構，幫助您將事物識別為組件而不是blob。

Answer 2

我們已經使用Angular一段時間了，我們已經提出了一個公約，幫助我們控制范圍污染。

我們在每個控制器中的$scope變量上定義最多2個屬性。 viewModel和model 。 viewModel是一個對象，它幫助我們實現簡單的模型綁定，以及model對象，它是與CRUD操作視圖相關的數據。

我們在主視圖（ ng-view ），子視圖（使用ng-include創建的視圖），指令（如果我們創建隔離范圍）中遵循此約定。

無恥的插件 ：我寫了一篇博文，詳細介紹了這幾天:)