Angular Fun

By Cary Landholt

About

• This is an attempt to play with the features of AngularJS using a structure to support large client-side applications, leverage the goodness of RequireJS, CoffeeScript, LESS, Grunt and Jasmine.
• Demonstrates controllers, services, directives, filters, and partials
• Uses the RequireJS text plugin to include directive partials in the minified output to reduce server requests
• Uses Jasmine to run unit tests
• Uses Grunt to put it all together

Prerequisites

• Must have Git installed
• Must have node.js (at least v0.8.1) installed with npm (Node Package Manager)
• Must have CoffeeScript node package installed globally. npm install -g coffee-script
• Must have Grunt node package installed globally. npm install -g grunt

Install Angular Fun

Enter the following commands in the terminal.

• git clone git://github.com/CaryLandholt/AngularFun.git
• cd AngularFun
• npm install

Compile Angulr Fun

You have three options.

1. grunt - will compile the app preserving individual files (when run, files will be loaded on-demand)
2. grunt dev - same as grunt but will watch for file changes and recompile on the fly
3. grunt prod - will compile using optimizations. This will create one JavaScript file and one CSS file to demonstrate the power of r.js, the build optimization tool for RequireJS. And take a look at the index.html file. Yep - it's minified too.

Run It

• Navigate to the root of the project
• grunt server
• Open the app in your browser to run the app

Making Changes

• grunt dev will watch for any CoffeeScript (.coffee), Less (.less), or .template file changes. When changes are detected, the files will be linted, compiled, and ready for you to refresh the browser.

Running Tests

• grunt
• Open /test/runner.html to run the unit tests using Jasmine.

To-Do

• Add many more unit tests :(
• Add more documentation :(
• Screencasts :)