Question: We're looking to build out our mobile app using Stackmob and Heroku for backend. 

There is a Heroku Addon that enables a developer to control the app server-side logic using Rails. 

There is not much documentation available on this addon nor are there examples.

There is a fair bit of media coverage on the add-on but no clear implementation and use-case path.

If any one in the community has some insight, we and other developers would sure benefit from hearing more.

Answer: 
Great question!

I don't like that the tutorials and documentation take a "package-by-layers" approach to their code. I think that is probably done for convenience in teaching concepts, which is great, but that approach has limited applicability in the real world. 

Package-by-feature is a far better approach:

```
|- README
|- src/
   |- app/
      |- app.js
      |- feature1/
      |- feature2/
      |- ...
   |- vendor/
      |- angular/
      |- bootstrap/
      |- ...
   |- assets/
   |- less/
   |- index.html

```

Inside `src/app`, you can package your contents based on the section of the site you're working on (e.g. menus) and by routes (e.g. product list and product detail). Each can be declared like so:

```js
angular.module( 'products', [
  'productCatalog',
  ...
])

```

And each module can have its own routes:

```js
.config( [ '$routeProvider', function( $routeProvider ) {
  $routeProvider.when( '/products', { ... } );
  $routeProvider.when( '/products/:id', { ... } );
});

```

And controllers, etc:

```js
.controller( 'ProductListCtrl', [ '$scope', function ( $scope ) { ... } ]);

```

So everything that goes together is packaged in the same directory. And you can place all of your components in separate files, with one module per file (if you wish; I usually do). And in your top-level app, you simply declare your dependencies:

```js
angular.module( 'app', [
  'products',
  ...
]);

```

You can also bundle general-purpose directives by themselves, too, to keep your tests and documentation all together - again, by feature! And each of these components are drag-and-drop reusable in future projects.

A great reference implementation is [angular-app](http://github.com/angular-app/angular-app). Check it out!

**Update:** Since this answer, I started an AngularJS project kickstarter/template called [ngBoilerplate](http://joshdmiller.github.com/ng-boilerplate) to encapsulate these concepts (among many other best practices) and a sophisticated build system to support them.
I usually do

```
(angular
 .module('app.controllers', ['ng', ...])
 .controller('myContrA', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
 .controller('myContrB', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
);

```

This way you can add `app.controllers` as a dependency and thus make all your controllers available.