TOtomelders·Feb 9, 2014
FYI: I just started a new project and decided to go with a slightly different setup that achieves the same thing. I would recommend using the angular-require-seed as a starting point as opposed to the tutorial I suggested earlier.
The credit for this stuff has to go to a guy called Tim Kendrick whom I work with. He set up the project that my project is based on. He figured out the project structure and I've basically copied it with a few minor adjustments.
https://github.com/tnajdek/angular-requirejs-seed
You can structure the app however you want, but I would suggest having a component directory which is structured like this...
---------
src/js/components
|- myComponent
|- myComponent.js
|- myComponent.html
|- _myComponent.scss
---------
Then you need an extra module that you inject when you're defining your app. This module
Read the rest
is responsible for injecting all the components you want to include, here's a Gist
https://gist.github.com/gargantuan/8902061
So every time you create a new component, you have to require it in components.js AND you have to include the sass partial in your main .scss file.
On the subject of sass, you'll need to prevent sass files being included more than once. Fortunately 'courtismas' has a solution for that
https://gist.github.com/courtsimas/1167053
Other notes:
I'm using Gulp for my build tasks. I can't recommend it enough.
I'm looking into creating a Gulp task that will generate a JSON manifest of components so new components are automagically included in the app. That way there's no need to manually maintain the sass and components.js files.