Hmmm....I see your to-do list includes a screencast. Maybe an addendum to this could be comments in the code that explain what's happening?

Cheers

Scripts and Views are only included when they are in their respective directories.

Refactor to allow for Scripts and Views to be anywhere.

Currently I need to use .constant and add additional external modules. I am accomplishing this by using my own app template like:

angular.module 'app', <%= config.modules %>
angular.module('app.config', []).constant('version', '0.1'))

and by adding an additionalModules key in the Gruntfile for ngShim to concat to config.modules (referring to modules explicitly referenced in index.html and not through requireJS).

Because I have to modify ngShim to do this I was wondering if you had an alternative suggestion or a less intrusive mechanism to accomplish these tasks?

Hi
How is loading external json/text data file using $http.get and or reading data from database done?

Hi,
I have substituted $routeProvider with $stateProvider from ui-router in order to make use of nested views. However, I get Error [ng:areq] http://errors.angular.org/undefined/ng/areq?p0=calendarController&p1=not%20a%20function%2C%20got%20undefined.
I have tried all the forms of defining controllers for the templates in the router shown in the ui-router documentation but cannot get it to work.

this does not work

.state 'home'
url: "/home"
views:
"home"
templateurl:"views/partials/home.html"
controller: "calendarController"

Can you perhaps suggest how to do this if any?, help much appreciated

Being a long-time C dev, i figure "make clean" or anything similar should be pretty benign.
Then the good folks developing grunt come along and, by default, run all targets.
I now know I should have done a "grunt clean:working" but that was only after wiping my .coffee files, then learning about how grunt works. (as much as I could learn in half and hour or so).

I guess the proper answer here is for me to learn my tools before experimenting.
Btw, no biggy since I'm obsessive with git and had everything saved.

I'm currently not sure what exactly here is wrong.

At first, I had adapted the configuration w/ live reload into my setup, but this does not work. After that, I had checked out now the AngularFun repo, but the live reload won't work either.

I'm using the latest Chrome (stable/release channel, aka 24 atm). The Chrome Extension "LiveReload" is 2.0.9.

The browser logged this

LiveReload protocol error (unparsable JSON) after receiving data: 
"{ command: 'hello', protocols: [ '[http://livereload.com/protocols/official-7](http://livereload.com/protocols/official-7)', '[http://livereload.com/protocols/2.x-origin-version-negotiation](http://livereload.com/protocols/2.x-origin-version-negotiation)', '[http://livereload.com/protocols/2.x-remote-control](http://livereload.com/protocols/2.x-remote-control)'], serverName: 'grunt-reload', }".. 

And the server logged this

Received Message: 
{"command":"hello","protocols":["http://livereload.com/protocols/official-6","http://livereload.com/protocols/official-7"],"ver":"2.0.8","ext":"Chrome","extver":"2.0.9"}
Fri Jan 18 2013 23:19:31 GMT+0100 (CET) Peer 127.0.0.1 disconnected.

Any ideas? Is the current setup still working for you?

grunt-newer could take care of

    # ensure only tasks are executed for the changed file
    # without this, the tasks for all files matching the original pattern are executed
    grunt.event.on 'watch', (action, filepath, key) ->
        path = require 'path'

        file = filepath.substr(4) # trim "src/" from the beginning.  I don't like what I'm doing here, need a better way of handling paths.
        dirname = path.dirname file
        ext = path.extname file
        basename = path.basename file, ext

from https://github.com/CaryLandholt/AngularFun/blob/master/Gruntfile.coffee#L463

If the SPA (Single Page Application) is index.jade, grunt prod breaks.

The .jade views need to be compiled in order to calculate the hash.
But index.jade cannot be compiled until ngTemplateCache has executed.

Probably need to split the jade task into two sub tasks.

Hi Cary,

Had to use: grunt.cmd to compile, but that didn't work when Running it.
Also tried from Cygwin.

Trace is:

J:\ProjJS\AngularFun-master>grunt.cmd server
Running "server:app" (server) task
20 Nov 16:43:50 - [nodemon] v0.6.23
20 Nov 16:43:50 - [nodemon] watching: J:\ProjJS\AngularFun-master
20 Nov 16:43:50 - [nodemon] starting coffee.cmd ./server.coffee --watch ./routes.coffee
CreateProcessW: The system cannot find the file specified.
20 Nov 16:43:50 - [nodemon] app crashed - waiting for file changes before starting...

Windows 8 Eval version, 64bit

Thanks!

In our app, we use Compass instead of Less. Should I PR this? As an alternative to less (not replacement)?

Thanks for your hard work on this code. Please specify a LICENSE so that people know how you'd like the code to be distributed.

Add security-related features to the branch.
Start with ClickJacking defense (https://www.owasp.org/index.php/Clickjacking_Defense_Cheat_Sheet).

I'm not sure that bootstrap.coffee serves much of a purpose, but wasn't sure if you ran into a particular issue?

Waiting on domReady! should not be necessary to bootstrap the app, as the ngApp directive already hooks the jQuery document ready and inits the app. See

• Getting rid of main blog post
• angularInit function

Then the snippet where angularInit is called (not sure where the source file is on GitHub, but its toward the end of the actual built angular.js file)

 //try to bind to jquery now so that one can write angular.element().read()
  //but we will rebind on bootstrap again.
  bindJQuery();

  publishExternalAPI(angular);

  jqLite(document).ready(function() {
    angularInit(document, bootstrap);
  });

I was using your method, but I see that the app ends up getting bootstrapped twice.

Now I have a choice of either removing the ngApp directive from my <html> tag OR removing domReady and the manual call to angular.bootstrap.

I tried removing the manual call to angular.bootstrap and didn't notice any ill effects. I am using Require, jQuery, Lawnchair, Twitter Bootstrap, modernizr, etc... and the dependency graph is being concatenated together by r.js without any script errors, etc.

But again, if you ran into any real world issues, I'd love to hear it.

Cary, I don't see that you are using the RequireJS text plugin. This plugin could be used to load AngularJS templates instead of using templateURL. As much as I understand AngularJS, templates are loaded via Ajax whereas RequireJS optimization can inline text file which is more efficient as it eliminates the need to make an http request.
Les

1. pngquant should return path to pngquant binary:
   Uncaught AssertionError: false == true
   at /home/az/work/AngularFun/node_modules/grunt-contrib-imagemin/node_modules/pngquant-bin/test/test-path.js:17:4
   at ChildProcess.exithandler (child_process.js:641:7)
   at ChildProcess.EventEmitter.emit (events.js:98:17)
   at maybeClose (child_process.js:735:16)
   at Socket. (child_process.js:948:11)
   at Socket.EventEmitter.emit (events.js:95:17)
   at Pipe.close (net.js:466:12)

2. pngquant should successfully proxy pngquant:
   Uncaught AssertionError: false == true
   at /home/az/work/AngularFun/node_modules/grunt-contrib-imagemin/node_modules/pngquant-bin/test/test-path.js:26:4
   at ChildProcess.exithandler (child_process.js:641:7)
   at ChildProcess.EventEmitter.emit (events.js:98:17)
   at maybeClose (child_process.js:735:16)
   at Socket. (child_process.js:948:11)
   at Socket.EventEmitter.emit (events.js:95:17)
   at Pipe.close (net.js:466:12)

3. pngquant should minify a .png:
   Uncaught Error: ENOENT, no such file or directory 'test/fixtures/test-fs8.png'
   at Object.fs.statSync (fs.js:684:18)
   at /home/az/work/AngularFun/node_modules/grunt-contrib-imagemin/node_modules/pngquant-bin/test/test-path.js:38:20
   at ChildProcess.exithandler (child_process.js:641:7)

When I run the grunt bootstrap command, all the subcommands execute successfully and I can view the result in the browser. The png files are also copied to the right location, but they seem to get broken by grunt's copy command.

Is anyone else having this issue?

Need a way to exclude certain files from being shimmed (i.e. libs).

heroku create git push heroku master

I get:

sh: grunt: not found
       npm ERR! weird error 127
       npm ERR! not ok code 0

 !     Push rejected, failed to compile Node.js app

To [email protected]:still-dusk-6074.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to '[email protected]:still-dusk-6074.git'

What else should I do to make this app work with heroku?

Some prefer to work with JavaScript instead of CoffeeScript.

Configure grunt that converts the CoffeeScript files to JavaScript.

After conversion, the CoffeeScript files would need to be deleted (clean).
The node_modules directory needs to be excluded.

Maybe something like this:

coffee:
    all:
        files: [
            cwd: './'
            src: [
                '**/*.coffee'
                '!**/node_modules/**'
            ]
            dest: './'
            expand: true
            ext: '.js'
        ]
        options:
            bare: true

Proposed command line command: grunt jslove

I started to look into getting AngularFun up and running with jslove

It converted from the coffee script well with no errors but I am having issues with grunt. I did perform the npm install and the bower install before running grunt jslove.

Now when I run the grunt command I get this error:

Running "clean:working" (clean) task
Cleaning ./.temp/...OK

Running "coffeelint:scripts" (coffeelint) task

0 files lint free.

Running "copy:app" (copy) task
Created 10 directories, copied 22 files

Running "ngShim:scripts" (ngShim) task

Source file " ./.temp/scripts/libs/angular-animate.min.js" not found.
Source file " ./.temp/scripts/libs/angular-resource.min.js" not found.
Source file " ./.temp/scripts/libs/angular-route.min.js" not found.

Running "coffee:app" (coffee) task
File .temp/scripts/app.js created.
File .temp/scripts/app.js.map created.
File .temp/scripts/bootstrap.js created.
File .temp/scripts/bootstrap.js.map created.
File .temp/scripts/main.js created.
File .temp/scripts/main.js.map created.

Running "less:app" (less) task

FileError: 'bootstrap.less' wasn't found in ./.temp/styles/styles.less on line 1, column 1:
1 @import "bootstrap.less";
2
Warning: Error compiling LESS. Use --force to continue.

Aborted due to warnings.

When I run the grunt sever command, the browser page loads but I get this error in the chrome tab:

Error: Cannot find module 'html'
at Function.Module._resolveFilename (module.js:332:15)
at Function.Module._load (module.js:274:25)
at Module.require (module.js:358:17)
at require (module.js:374:17)
at new View (/home/benjamin/workspace/AngularFun/node_modules/express/lib/view.js:43:49)
at Function.app.render (/home/benjamin/workspace/AngularFun/node_modules/express/lib/application.js:488:12)
at ServerResponse.res.render (/home/benjamin/workspace/AngularFun/node_modules/express/lib/response.js:760:7)
at /home/benjamin/workspace/AngularFun/routes.js:35:18
at callbacks (/home/benjamin/workspace/AngularFun/node_modules/express/lib/router/index.js:164:37)
at param (/home/benjamin/workspace/AngularFun/node_modules/express/lib/router/index.js:138:11)
at pass (/home/benjamin/workspace/AngularFun/node_modules/express/lib/router/index.js:145:5)
at Router._dispatch (/home/benjamin/workspace/AngularFun/node_modules/express/lib/router/index.js:173:5)
at Object.router (/home/benjamin/workspace/AngularFun/node_modules/express/lib/router/index.js:33:10)
at next (/home/benjamin/workspace/AngularFun/node_modules/express/node_modules/connect/lib/proto.js:190:15)
at resume (/home/benjamin/workspace/AngularFun/node_modules/express/node_modules/connect/lib/middleware/static.js:60:7)
at SendStream.error (/home/benjamin/workspace/AngularFun/node_modules/express/node_modules/connect/lib/middleware/static.js:73:37)
at SendStream.EventEmitter.emit (events.js:100:17)
at SendStream.error (/home/benjamin/workspace/AngularFun/node_modules/express/node_modules/send/lib/send.js:147:51)
at SendStream.onStatError (/home/benjamin/workspace/AngularFun/node_modules/express/node_modules/send/lib/send.js:248:48)
at /home/benjamin/workspace/AngularFun/node_modules/express/node_modules/send/lib/send.js:320:26
at Object.oncomplete (fs.js:96:15)

Hi there,

thanks for your work. Could you explain a bit more the functionality of the main.coffee?

What I understood is that one line in the shim section is equal to s.th. like angular.module("myMod", ["myDep1", "myDep2"])

What I don't understand which modules should go into [...], (require) -> angular.element.... I understood that the first callback is called after all modules inside [...] are loaded. In the current main.coffee the modules differ to the one inside shim. Why?

Could you give me some more insights?

Thanks a lot, Leif

main.coffee:

require
    shim:
        'controllers/gitHubController'       : deps: ['app', 'services/gitHubService']
        'controllers/personController'       : deps: ['app', 'services/personService']
        ...
    [
        'require'
        'controllers/gitHubController'
        'controllers/personController'
        ...
    ], (require) ->
        angular.element(document).ready ->
            require ['bootstrap']

Currently the test tasks are combined with product build.
Separate to make a cleaner implementation.

I cannot seem to be able to add ui-bootstrap properly: baybe because it doesn't follow the angular-* pattern?

grunt-regarde is deprecated in favor of grunt-contrib-watch

I added this to the copy section in order to get the spec files into dist_test:

      }, {
        cwd: './test/',
        src: 'scripts/**/*.js',
        dest: './dist_test/',
        expand: true
      }

I'm a total newbie so perhaps that shouldn't have been needed?

Edit: to demonstrate my level of newbieness -- I can't even make the tests fail now that they are run...I edited test/scripts/services/personSpec.js as so, and it still succeeds.

  return it('should query for people at /people and receive an array', function() {
    var failure, success;
    success = function(result) {
      return false;

      // expect(result).toEqualData([
      //   {
      //     name: 'George'
      //   }
      // ]);
    };
    failure = function() {
      return expect(true).toBe(false);
    };
    return personService.get(success, failure);
  });

Hi Cary,
Trying to run Jasmine tests, but having trouble.
The first ssue is a missing domReady.js in /dist/scripts/libs after building with grunt.
When I manually supply a domReady.js, it hangs on twitterfy.js calling angular - for some reason it is loaded before angular is in the test runner. I tried adding a dependency to main.coffee, but don't really know how to use require.js

The runner then shows 1 Error: No module: app
and in the inspector i can see:
Uncaught ReferenceError: angular is not defined twitterfy.js:2

Running on Chrome/Win8
Thanks!

So I have tried everything I can think of and I am kind of at a loss...

I have a requirejs module I want to use within a controller:

https://github.com/faisalman/ua-parser-js/blob/master/src/ua-parser.js#L474-L478

I add it as a dependency of the controller in my main.js shim but in the module itself I am unable to access it directly unless I use a require wrapper/callback which of course breaks things since none of the rest of the angular application is using requirejs wrappers/callbacks.

This works of course, but due to it being in a callback the rest of the controller can't see it on load:

require(['ua-parser'], function(UAParser) {
    var parser = new UAParser();
});

Ideally I would want the main.js to fully handle the loading in advance like it does with all the angular stuff so that I don't need to use require in my angular code:

var parser = new UAParser()

Any ideas on a method to resolve cases like these?

There may be a problem with grunt-express' lastest version on Windows.
Works on Mac.

exploring...

Hi Cary,
I'm using angularfun as a reference for a huge application. I have struggled in vain to configure AMD enabled jquery and NON AMD jquery plugins like datatables and the controllers to load. Do you perhaps have some pointers into how I could go about loading the jquery and the plugins?.

Thank you.

I grew to quite like haml on a recent rails project and would like to use Jade with AngularJS.
Not quite sure how to integrate the necessary grunt/node pieces to get this done.
Any tips?

After git push heroku master:

heroku open opens the app on http://still-dusk-6074.herokuapp.com/

Application Error
An error occurred in the application and your page could not be served. Please try again in a few moments.

If you are the application owner, check your logs for details.

Is there anything specific I need to change to use Heroku as production?

Could be a path escaping problem.

Overall, a very nice starting point - the best I've seen so far.

But, while node.js is fine for development, I'd prefer to deploy using a different web server, perhaps Apache or nginx, fronting a Python/Ruby/Go app.

Can you suggest what changes are needed?

Thanks,
Peter

Not sure if I'm doing something wrong, but this is what happens when I run "grunt tests":

Running "testacular:unit" (testacular) task
[2013-04-09 17:25:07.724] [DEBUG] config - autoWatch set to false, because of singleRun
INFO [testacular]: Testacular server started at http://localhost:8081/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 27.0 (Mac)]: Connected on socket id 4LMsNDduoNvuzdQZsCIr
Chrome 27.0 (Mac) person service should query for people at /people and receive an array FAILED
    Error: No pending request to flush !
    at Error (<anonymous>)
    at Function.$httpBackend.flush (/Users/peterk/angularjs/AngularFun/test/scripts/libs/angular-mocks.js:1148:34)
        at null.<anonymous>  (/Users/peterk/angularjs/AngularFun/dist_test/scripts/services/personSpec.js:39:25)
Chrome 27.0 (Mac): Executed 2 of 2 (1 FAILED) (0.145 secs / 0.034 secs)
Warning: Task "testacular:unit" failed. Use --force to continue.

Aborted due to warnings.
air11:AngularFun peterk$ 

Hi.

Images are being hashed:

glyphicons-halflings.png -> glyphicons-halflings.6c8829cc6f.png

How is it possible to reference to hashed image filenames in a *.less file?

Would prefer to use grunt-contrib-reload.

I am trying to use the grunt template task in my own project but grunt can't find the task. The template task works when I build your project but doesn't work in my project. Is template loaded from a dependency? It may be obvious, but I am new to grunt so I am a little confused.

I also asked the question on stack overflow if you would like to answer there: http://stackoverflow.com/questions/15865641/grunt-template-task

2 issues:

1. The html module should be included in packages.json (I think -- I'm not a node dev)
2. In the "Run It" section of your readme, you should mention you must compile using one of the options listed before running it for the first time (I'm new to grunt)

Details: npm install worked fine, so far as I could tell, but upon running grunt server and browsing to the page, I got an error that the html module could not be found. I stopped the server and installed it via npm install html. I restarted the server, and realized I probably needed to compile with grunt when I got a template error. Runs fine now.

For stat very good tutorial application for angularjs and requirejs mashup.
The only issue witch I have is with template management.
So well Take 3 was perfect for management of coding and coding style but for templates,
I really don't like having all templates in one file, for multiple reasons.
And I don't like having to rely on angular to load my templates on router mode also.

I really wanted to work with requirejs for this, to use the r.js to build some parts of templates and other just to leave them as they are.

but yet I didn't find any viable solution to this.
What are your thoughts on this?

getting this on trying to run the app:
Running "server:app" (server) task
3 Dec 01:22:26 - [nodemon] v0.6.23
3 Dec 01:22:26 - [nodemon] watching: /Users/talgiat/Dropbox/Dev/Projects/AngularFun
3 Dec 01:22:27 - [nodemon] starting coffee ./server.coffee --watch ./routes.coffee
3 Dec 01:22:27 - [nodemon] app crashed - waiting for file changes before starting...
execvp(): No such file or directory

I'm new to all of this but wanted to let you know I hit an error following the very direct instructions on the grunt step:

tnunamak$ grunt bootstrap
Running "delete:dist" (delete) task

Running "coffeeLint:scripts" (coffeeLint) task

Running "copy:dist" (copy) task

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
TypeError: Object #<Object> has no method 'existsSync'
    at Object.<anonymous> (/Users/tnunamak/workspace/AngularFun/build/tasks/copy.js:17:19)
    at Object.<anonymous> (/usr/local/lib/node_modules/grunt/lib/grunt/task.js:103:15)
    at Object.<anonymous> (/usr/local/lib/node_modules/grunt/lib/grunt/task.js:56:16)
    at Task.<anonymous> (/usr/local/lib/node_modules/grunt/lib/util/task.js:341:36)
    at Task.<anonymous> (/usr/local/lib/node_modules/grunt/lib/util/task.js:317:9)
    at Task.<anonymous> (/usr/local/lib/node_modules/grunt/lib/util/task.js:344:11)
    at Task.<anonymous> (/usr/local/lib/node_modules/grunt/lib/util/task.js:317:9)
    at Task.<anonymous> (/usr/local/lib/node_modules/grunt/lib/util/task.js:344:11)
    at Task.<anonymous> (/usr/local/lib/node_modules/grunt/lib/util/task.js:317:9)
    at Task.<anonymous> (/usr/local/lib/node_modules/grunt/lib/util/task.js:344:11)

If you were to add angular as a script tag on the page, and then your require.js after that, you could avoid having to list angular as a dependency of each library. I'd imagine you could simply write this in your shim:

shim:
  'bootstrap': ['module1', 'module2', 'module3'] # all your modules listed here

Hi, Cary.

Thanks for this template. I'd like to be able to reference cdnjs copies of angular, etc., so that I can take advantage of them possibly being in a browser's cache already. For some reason it doesn't seem to be working for me. I suspect I'm doing something silly.

I specified paths in main.js and in the requirejs section of Gruntfile.js:

paths: {
 'libs/angular': '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.min'
}

The only result I see is that when I build dev, the file is indeed fetched from the cdn (according to chrome developer tools) but nothing actually runs and I get a blank page. And when I build prod the minified js doesn't contain the string "cdnjs"...

Is there a way to specify non-local js files? Ideally I'd reference a local non-minified copy for dev builds and the minified cdnjs copy for prod.

I thought I could do this because of the require docs:
https://github.com/jrburke/r.js/blob/master/build/example.build.js#L37

In addition to concatenating and minimizing files, it would be useful to have file checksums inserted into file names. This allows caching without constant revalidation. For example, scripts.min.js would be renamed to scripts-1234567890abcdef.min.js. There may be existing grunt tasks to help with this.

Having issues using grunt command after a clean install:

1. Cloned AngularFun
2. command: sudo npm install
3. command: bower install
4. command: grunt jslove
5. command: grunt

Running "clean:working" (clean) task

Running "coffeelint:files" (coffeelint) task

0 files lint free.

Running "copy:app" (copy) task
Created 10 directories, copied 22 files

Running "ngShim:scripts" (ngShim) task

Source file " ./.temp/scripts/libs/angular-animate.min.js" not found.
Source file " ./.temp/scripts/libs/angular-resource.min.js" not found.
Source file " ./.temp/scripts/libs/angular-route.min.js" not found.

Running "coffee:app" (coffee) task
File .temp/scripts/app.js created.
File .temp/scripts/app.js.map created.
File .temp/scripts/bootstrap.js created.
File .temp/scripts/bootstrap.js.map created.
File .temp/scripts/main.js created.
File .temp/scripts/main.js.map created.

Running "less:app" (less) task

FileError: 'bootstrap.less' wasn't found in ./.temp/styles/styles.less on line 1, column 1:
1 @import "bootstrap.less";
2

benjamin@benjamin-Aspire-V3-571:/workspace/AngularFun$ bower -version
1.2.6
benjamin@benjamin-Aspire-V3-571:/workspace/AngularFun$ grunt -version
grunt-cli v0.1.8
grunt v0.4.1
benjamin@benjamin-Aspire-V3-571:~/workspace/AngularFun$ cat /etc/*release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=13.04
DISTRIB_CODENAME=raring
DISTRIB_DESCRIPTION="Ubuntu 13.04"
NAME="Ubuntu"
VERSION="13.04, Raring Ringtail"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 13.04"
VERSION_ID="13.04"
HOME_URL="http://www.ubuntu.com/"
SUPPORT_URL="http://help.ubuntu.com/"
BUG_REPORT_URL="http://bugs.launchpad.net/ubuntu/"