Angular and Coffeescript cannot access app module in seperate files

Question

I'm trying to make multiple files to manage and refactor my angular code in a rails project with coffeescript. I think the coffeescript is making my angular objects inaccessible between files but not sure. File structure:

javascripts
|-Angular
 |-controllers
 | |-search_strl.js.coffee
 |-main.js.coffee
|-application.js

In application.js: //= require_tree ./angular

In main.js.coffee: 'use strict'; copassApp = angular.module 'copassApp', []

In search_ctrl: copassApp.controller('SearchCtrl', ['$scope', 'Cospace', 'Copasser', '$location', ($scope, Cospace, Copasser, $location) -> ...more code...

Console error: Uncaught ReferenceError: copassApp is not defined

Not sure if this is a required file issue or a misuse of angular module or coffeescript not allowing cross-file object access. Thanks in advance.

Edit

Compiled js after the suggested answer:

main.js.coffee:

(function() {
 'use strict';
 var copassApp, root;
 copassApp = angular.module('copassApp', ['copassApp.SearchCtrl']);
 root = $('html');
 angular.bootstrap(root, ['copassApp']);
}).call(this);

search_strl.js.coffee:

(function() {
 angular.module('copassApp.SearchCtrl', ['$scope', 'Cospace', 'Copasser', '$location', function($scope, Cospace, Copasser, $location) {}]);
}).call(this);

Answer 1

It would be helpful to see the resulting javascript. My initial thought is that perhaps the search_ctrl.js is loading before main.js. You should also try to avoid declaring copassApp as a global variable and then accessing it from other files. The best practice is to use angular.module() in the separate files to access an existing module.

I don't know coffeescript, but an example in js would be...

main.js:

(function() {
 'use strict';
 var copassApp = angular.module('copassApp', []);
})();

search_ctrl.js:

(function() {
 'use strict';
 angular.module('copassApp').controller('SearchCtrl', function($scope)) {
 ...more code...
 });
})();

And then of course main.js needs to load before search_ctrl.js as stated above.

Another option is to use separate modules and require them in main.js so that file loading order doesn't matter.

main.js:

(function() {
 'use strict';
 var copassApp = angular.module('copassApp', ['copassApp.SearchCtrl']);
})();

search_ctrl.js:

(function() {
 'use strict';
 angular.module('copassApp.SearchCtrl', []).controller('SearchCtrl', function($scope)) {
 ...more code...
 });
})();

• James Klein: Looks like that helped but now seeing this and I tried playing with the loading order again. Uncaught Error: [$injector:modulerr] Failed to instantiate module copassApp due to: Error: [$injector:modulerr] Failed to instantiate module copassApp.SearchCtrl due to: Error: [$injector:modulerr] Failed to instantiate module $scope due to: Error:...<omitted>...1)
• James Klein: In debugging I found that I should remove ng-app and instead bootstrap to manually load. Check my edit for compiled js now, thanks.
• Augustin Riedinger: So file order matters or not?

Answer 2

Okay all is working now. Syntactically I would like to thank @theJoeBiz because my previous code was improperly composed. I have the same file structure but here are the changes to the files.

main.js.coffee:

copassApp = angular.module 'Copass', ['Factories', 'Controllers', 'Directives']
factories = angular.module 'Factories', ['Cospace', 'Copasser', 'HtmlViewService']
...

search_ctrl.js.coffee

angular.module('Search', []).controller('Search', [... ->

I was thinking of angular.module as a getter and setter but is really only for initializing. I hope this answers questions of other people too.