How to use RequireJS in AngularJS Application?

AngularJS Developers: What do you think about this entry-level brunch stack and what is your OS of choice and applications you use to ease JS development?

• My friend challenged me on Sunday to go up a level and start scripting with AngularJS (http://angularjs.org/). He showed me some JS libraries, a YouTube video http://www.youtube.com/watch?v=ZhfUv0spHCY), and it's slideshow (https://docs.google.com/presentation/d/1GB0LO-gQ63bfaDfdaKLcdsFV3gt27m7ICmdfY21yFIo/pub?start=false&loop=false&amp&delayms=3000#slide=id.g58b27ea1_3_18) and this time I know I can comfortably dig into a real framework. Before he has suggested RoR (http://rubyonrails.org/) and bootstrap (http://twitter.github.com/bootstrap/) and I tried them but didn't like it because of LESS and SASS and RoR' syntax. Then he suggested WordPress (http://wordpress.org/) but learned I hate PHP. Then, I fell in love with Coffeescript (http://coffeescript.org/), Stylus (http://learnboost.github.com/stylus/) and Jade (http://jade-lang.com/) from researching about how to make development easier. He taught me the basics of HTML and some CSS from scratch to the point where I know how to edit HTML/CSS templates the way I want. He showed me how to use heroku with the wordpress-heroku library (https://github.com/mhoofman/wordpress-heroku). He said the next step is to start learning how to use APIs and querying. One of our goals is to set up a simple nodejs / neo4j (http://www.neo4j.org/) app on heroku to use cypher (http://docs.neo4j.org/chunked/milestone/cypher-query-lang.html) and D3 (http://d3js.org/) to make some visualizations out of a CSV file. He's targeted my passion to visualize my music collection and he has me hooked. The overall goal before using D3 is to start small and port this todo app (https://github.com/tbeseda/angularjs-for-hipsters/) with the stack I have in mind. He also suggested playing with Chart.js (https://github.com/nnnick/Chart.js) or Vesla (https://github.com/trifacta/vega) before really hopping into and while learning d3. The ultimate goal is to port another app (http://blog.codecentric.de/en/2013/03/home-automation-with-angularjs-and-node-js-on-a-raspberry-pi/) and dig into making these skills productive with raspberry pie and start hacking my house. I want to make sure he has pointed me to the right places to learn AngularJS: http://docs.angularjs.org/tutorial http://egghead.io/ Here's the stack / http://brunch.io/ skeleton I have in mind: Brunch (Node.js, Express.js) Angular Bootstrap (http://angular-ui.github.com/bootstrap/) D3.js (as angularjs directives) HTML5 Boilerplate (for good standards) Stylus (https://github.com/brunch/stylus-brunch) Coffescript (https://github.com/brunch/coffee-script-brunch) CoffeeLint Jade (https://github.com/brunch/jade-brunch) Requirejs Underscorejs (https://github.com/floydsoft/angular-underscore) uglify.js (https://github.com/brunch/uglify-js-brunch) auto-reload (https://github.com/brunch/auto-reload-brunch) Integrated karma (used to be testacular) https://github.com/karma-runner/karma tasty-pie The inspiration came from: https://github.com/exlee/brunch-on-asteroids (has d3 and most of the above with angularjs already) https://github.com/scotch/angular-brunch-seed https://github.com/btford/angular-express-seed https://github.com/elsom25/angular-requirejs-html5boilerplate-seed https://github.com/geeknam/tastypie-angular-example http://1000monkeys.co/2012/12/30/using-d3-with-angular.html I think all of these can be fused in two hours right? I don't know how to build this so I'm going to pay someone on Elance to build a brunch skeleton so I can alleviate the development set up. What I'm looking for is your comment on the stack, the learning resources and some information on what is your OS of choice. What are the Mac os / Linux apps / sublime plugins that you use to make AngularJS development easier? We always need novice and intermediate people like you helping out beginners. Hopefully you have the time and patience to respond. :-) Edit: removed verbal diarrhea (suggestion from reddit [http://www.reddit.com/r/javascript/comments/1bkrnt/angularjs_developers_what_do_you_think_about_this/])

• Answer:

  First of all, congrats for choosing angular, best js framework out there. Ubuntu is the currently most used linux distro & I think the most supported. I like more Arch Linux, but ubuntu would be a perfect choice for your needs. Even though angularjs can work with requirejs, require it's not necessary here. Angular has its own module system which helps a lot with structuring the application. I've used brunch before & was very happy with it. Currently I'm using http://yeoman.io for this kind of stuff. It has most of the features you want. You can set up a project in a few minutes, with boostrap / html5 boilerplate, angular, gruntjs & bower. There are lots of yeoman + express seeds out there. I chose yeoman since it's supported by developers from google and they are putting a lot of effort into it. One great angular resource is http://www.yearofmoo.com/, absolutely a must read. There are also lots of great tutorials on bennadel blog (one of them http://www.bennadel.com/blog/2433-Using-RESTful-Controllers-In-An-AngularJS-Resource.htm). Follow angular google + page to receive great new stuff once in a while. Some great web related tutorials are at http://www.youtube.com/results?search_query=the+breakpoint&oq=the+br&gs_l=youtube.3.0.35i39l2j0l8.596.1835.0.2548.6.6.0.0.0.0.139.638.2j4.6.0...0.0...1ac.1.-ccVI94e3C0. Also, google has sponsored a codeschool 1-2 hours great tutorial: http://discover-devtools.codeschool.com/. I've found some new, useful things there. Tasty pie is great, I've worked a lot with it in the past. You can easily build nice restful apis. What I do not understand, is why do you want both tasty-pie & express ?!? I'd go with express, less context switching (only js instead of both js & python), but tastypie is also very used and specialized on restful apis. What I've found very interesting and helps a lot with fast prototyping is to use a BaaS (backend as a service). http://firebase.com has recently relesed an angular wrapper for using their api (https://github.com/firebase/angularFire). There are also lots of other BaaS services out there. I've found that it's much easier for baby projects to use this kind of stuff and it's also free. If you need to scale, then you have to pay or export the data and set up your own servers. In the angular's best practices youtube link, they say they want to have animations in angular 2.0. If you'll want to support them, you'll need to use css3 or a jquery like approach. There are tons of great libraries which are unfortunately jquery plugins, even if they use only 1, 2 jquery methods. You can reach a point when you'll need to integrate it. http://Egghead.io tutorials are golden. Watch them at 1, 2 times at least. You'll learn the best practices in time, but every resource will help you a lot. As a tip, also try having an OOP approach (http://egghead.io video no 15: build a simple, minimal component and extend it in other components, rather than having huge components with lots of stuff which are harder to reuse / extend). As of sublime plugins, I use a lot git, jshint, editorconfig. You surely have a lot of enthusiasm on you're definitely on the good path. LE: They've just released animations, in 1.1.4 version (3rd of April): http://www.youtube.com/watch?v=cF_JsA9KsDM  A centralized module place: http://ngmodules.org/ A great example with express.js and http://socket.io : http://www.netmagazine.com/tutorials/angularjs-collaboration-board-socketio A list with cool applications already built with angular: http://builtwith.angularjs.org/