javascript - How to structure angularJS models for large and maintainable applications? -

in foray angularjs, i've been little confused. main reason this, because never quite understood, model part of whole thing was. mean, mvc framework, had have models, correct? so, did little bit of reading on matter. tried reading this bit of documentation, here.

what understood was, model aspect of controller, in fact inside $scope dictionary. fine, , did not bother me, until read blog post evil-trout, 1 of makers of discourse.

what trying by, angular did not have proper modelling scheme. tried looking answers, , bumped this. read, did not give me concrete examples of how structure models in angularjs.

i've felt indeed lacking since, i'm used django development, , having clear models helpful. in emberjs, there seems way make models, inherit ember class. also, after reading evil-trout's blog post, understand potential pitfalls of having variables attached scope, , many of them being primitives, , not objects.

so, best way structure model in angularjs, such can have maintainable code in future. main reason stick angular because wonderfully simple write, fear might end being php, functionality has been supplanted sake of simplicity.

i hope i've been able make question clear, if not please feel free leave comment, telling me how can improve.

things remember models

they represent chunk of data...

• that chunk can come api, static file, explicitly declared.
• it can updated events in app.

they can many or one...

• a model not have encompassing object. if see potential abstracting smaller models single model, have discovered modular code. injecting child services parent ensures separation of concerns , re-usability.

a example here think service consumes 2 api's build single model. build this:

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; }; 

but if want use api calls in project? components make single service best represented own services?

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; }; 

now can use thing1 or thing2 independent of things. great news, because next project working on doesn't need thing1 needs thing2. if nothing else, modular services (or code in general) give structure app identify things components rather blobs.