StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Great question!</p> <p>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. </p> <p>Package-by-feature is a far better approach:</p> <pre><code>|- README |- src/ |- app/ |- app.js |- feature1/ |- feature2/ |- ... |- vendor/ |- angular/ |- bootstrap/ |- ... |- assets/ |- less/ |- index.html </code></pre> <p>Inside <code>src/app</code>, 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:</p> <pre class="lang-js prettyprint-override"><code>angular.module( 'products', [ 'productCatalog', ... ]) </code></pre> <p>And each module can have its own routes:</p> <pre class="lang-js prettyprint-override"><code>.config( [ '$routeProvider', function( $routeProvider ) { $routeProvider.when( '/products', { ... } ); $routeProvider.when( '/products/:id', { ... } ); }); </code></pre> <p>And controllers, etc:</p> <pre class="lang-js prettyprint-override"><code>.controller( 'ProductListCtrl', [ '$scope', function ( $scope ) { ... } ]); </code></pre> <p>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:</p> <pre class="lang-js prettyprint-override"><code>angular.module( 'app', [ 'products', ... ]); </code></pre> <p>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.</p> <p>A great reference implementation is <a href="http://github.com/angular-app/angular-app" rel="nofollow noreferrer">angular-app</a>. Check it out!</p> <p><strong>Update:</strong> Since this answer, I started an AngularJS project kickstarter/template called <a href="http://joshdmiller.github.com/ng-boilerplate" rel="nofollow noreferrer">ngBoilerplate</a> to encapsulate these concepts (among many other best practices) and a sophisticated build system to support them.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload