Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

We're keeping our code as discreet components, each component has it's own folder in which you'll find the js, html and _scss file for that component only. The js file contains the directive and the controller, and the html is pulled in using require.js' text plugin.

Then the controllers.js file only handles the routing controllers, and the html for each route is built solely out of components.

I resisted using require at first because it seemed like clunky cruft on top of Angular's cruftless dependency injection, but I was wrong and this way of working has been a lot of fun, relatively stress free and great for new devs since they just need to get their head around the way a component is put together and they never have to worry about other parts of the app.



Care to share how you use Require with Angular? I know it requires you (hehe) to manually bootstrap Angular.


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 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.


I used this tutorial as a starting point.

http://www.startersquad.com/blog/angularjs-requirejs/




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: