Code Organization in Large AngularJS and JavaScript Applications • Hacker News Board

Re: Code Organization in Large AngularJS and JavaScript Applications

#11

Post by Kiro » Tue, Apr 23, 2013, 3:20 PM UTC

What's in these files?

  models/
    CartModel.js
    ProductModel.js
    SearchResultsModel.js
    UserModel.js

I have a lot of controllers, directives, filters and services which sit fine in their own files/modules but I don't understand what I would put in a model file.

Re: Code Organization in Large AngularJS and JavaScript Applications

#12

Post by camus » Tue, Apr 23, 2013, 3:25 PM UTC

liberte9 wrote: post #8

I'm not sure I agree with the idea of adding utility methods to the $rootScope to avoid wiring in dependencies repeatedly. I would probably go with defining a utility class and indeed injecting it into every controller that needs it. I like the idea of having my utility methods clearly defined in one place. Any opinions here on the pros/cons?

I'm for using services to define whatever object used across controllers and other services. Using rootscope or scope inheritance is very tricky in AngularJS

Re: Code Organization in Large AngularJS and JavaScript Applications

#13

Post by davecap1 » Tue, Apr 23, 2013, 3:29 PM UTC

SoftwareMaven wrote: post #7

I was surprised at Angular-seed's directory structure. It is fine for toy apps, but that isn't what it is really being billed as. I'm building a django/angular app. Each django app gets its own angular module, and each angular module roughly shares the seed structure, but may be broken into more files (much like the second example in TFA). So my whole structure looks something like: django-project/ app1/ views.py sta…

I recently completed my struggle with AngularJS/Django and the asset pipeline. I was using django-compressor but that was really not pleasant. What I did was completely decouple my AngularJS app from my Django app. I stopped using Django's collectstatic as well, and now use Grunt to compile my assets into a temporary "static" directory (not stored in version control), from an "assets" directory (stored in version control). I then use a fabric task to upload the contents of "static" to S3, to new directory with an incremented build number (something like s3://my-bucket/dist/v1234/). Once that is done, I update STATIC_URL in my Django app to reflect the new dist path.

My one tip: forget about using Django to manage your assets if you need cache-busting... use fabric and something like grunt.

Re: Code Organization in Large AngularJS and JavaScript Applications

#14

Post by davecap1 » Tue, Apr 23, 2013, 3:34 PM UTC

A nice example of a slightly larger AngularJS app can be seen here: https://github.com/angular-app/angular-app

Re: Code Organization in Large AngularJS and JavaScript Applications

#15

Post by ganarajpr » Tue, Apr 23, 2013, 3:39 PM UTC

camus wrote: post #12

liberte9 wrote: post #8

I'm not sure I agree with the idea of adding utility methods to the $rootScope to avoid wiring in dependencies repeatedly. I would probably go with defining a utility class and indeed injecting it into every controller that needs it. I like the idea of having my utility methods clearly defined in one place. Any opinions here on the pros/cons?

I'm for using services to define whatever object used across controllers and other services. Using rootscope or scope inheritance is very tricky in AngularJS

Agreed. Any utility functions should go into a different service.

Using $rootScope feels like a hack.

Re: Code Organization in Large AngularJS and JavaScript Applications

#16

Post by olouv » Tue, Apr 23, 2013, 3:43 PM UTC

Kiro wrote: post #11

What's in these files? models/ CartModel.js ProductModel.js SearchResultsModel.js UserModel.js I have a lot of controllers, directives, filters and services which sit fine in their own files/modules but I don't understand what I would put in a model file.

Model files in angularJS are often basic wrappers around either $ressource or $http. From that you can add default values, collection-like functions, etc.

Re: Code Organization in Large AngularJS and JavaScript Applications

#17

Post by joshuacc » Tue, Apr 23, 2013, 4:20 PM UTC

olouv wrote: post #16

Kiro wrote: post #11

What's in these files? models/ CartModel.js ProductModel.js SearchResultsModel.js UserModel.js I have a lot of controllers, directives, filters and services which sit fine in their own files/modules but I don't understand what I would put in a model file.

Model files in angularJS are often basic wrappers around either $ressource or $http. From that you can add default values, collection-like functions, etc.

Do you happen to have a link to an example for those of us just getting started in Angular?

Re: Code Organization in Large AngularJS and JavaScript Applications

#18

Post by joelhooks » Tue, Apr 23, 2013, 4:52 PM UTC

Kiro wrote: post #11

What's in these files? models/ CartModel.js ProductModel.js SearchResultsModel.js UserModel.js I have a lot of controllers, directives, filters and services which sit fine in their own files/modules but I don't understand what I would put in a model file.

The Model files are storing state, essentially. In this case they are following a pattern from Robotlegs (as3). I wrote it up here http://joelhooks.com/2011/03/12/an-introduction-to-robotlegs...

These are then injected as "services" in your controllers.

Re: Code Organization in Large AngularJS and JavaScript Applications

#19

Post by psgibbs » Tue, Apr 23, 2013, 5:10 PM UTC

joshuacc wrote: post #17

olouv wrote: post #16

Earlier quoted context omitted.

Model files in angularJS are often basic wrappers around either $ressource or $http. From that you can add default values, collection-like functions, etc.

Do you happen to have a link to an example for those of us just getting started in Angular?

I think typically people start them out in 'services.js' since effectively models in angular are constructors that are created, and then injected whenever you need a certain type (so you have a service that returns the constructor function).

A good example of this is how the tutorial treats the restful 'Phone' resource, creating a service that injects the resource where necessary. I've started calling them 'models' rather than 'services' internally as well, so it's interesting to me that others are too.

http://docs.angularjs.org/tutorial/step_11

Re: Code Organization in Large AngularJS and JavaScript Applications

#20

Post by drinchev » Tue, Apr 23, 2013, 6:16 PM UTC

That's just the tip of the iceberg. Many complicated projects have landing page which should not include the whole javascript app, but still need the same collections & models. Or for example website with CMS will include administration part which is fairly different in structure.

My applications are backbone based and my directory structure is similar to :

   scripts/
     classes/
       collections/
         socket.coffee
       ui/
         popup.coffee
       page.coffee
     models/
       user.coffee
     collections/
       items.coffee
       products.coffee
     ui/
       navigation/
         top.coffee
         sidebar.coffee
       overlay.coffee
     pages/
       landing/
         home.coffee
         about.coffee
       cms/
         home.coffee
         admin.coffee
     utils/
       templates.coffee
     landing.coffee
     cms.coffe

What's important in my app is classes path. I put there only reusable classes, and using coffeescript I can simply extend the whole module by

   class Items extend require('classes/collections/socket.coffee')

   module.exports = new Items()

Also I always use utils folder, for general javascript helper functions.