Javascript Angular和Coffeescript无法在单独的文件中访问应用程序模块

我正试图在一个rails项目中使用coffeescript创建多个文件来管理和重构我的angular代码。我认为coffeescript使我的角度对象在文件之间无法访问，但不确定。 文件结构：

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

在application.js中：

/=require_tree./angular

在main.js.coffee中：

"严格使用",；
copassApp=angular.module'copassApp'，[]

在search\u ctrl:

copassApp.controller（'SearchCtrl'，['scope'，'Cospace'，'Copasser'，'location'，（$scope，Cospace，Copasser，$location）->…更多代码…

控制台错误：未捕获引用错误：未定义copassApp

不确定这是一个必需的文件问题，还是angular module或coffeescript的滥用，不允许跨文件对象访问。请提前感谢

编辑

在建议答案之后编译js：

main.js.coffee：

(function() {
  'use strict';
  var copassApp, root;

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

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

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

搜索_strl.js.coffee：

(function() {
  'use strict';
  var copassApp, root;

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

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

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

---

查看生成的javascript会很有帮助。我最初的想法是，可能在main.js之前加载search_ctrl.js。您还应该尝试避免将copassApp声明为全局变量，然后从其他文件访问它。最佳做法是在单独的文件中使用angular.module（）来访问现有模块

我不知道coffeescript，但是js中的一个例子是

main.js：

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

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

搜索\u ctrl.js：

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

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

当然，main.js需要在如上所述的搜索之前加载

另一种选择是使用单独的模块，并在main.js中要求它们，这样文件加载顺序就不重要了

main.js：

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

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

搜索\u ctrl.js：

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

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

---

好了，现在一切都正常了。从语法上来说，我要感谢@theJoeBiz，因为我以前的代码编写得不正确。 我有相同的文件结构，但这里是对文件的更改

main.js.coffee：

(function() {
  'use strict';
  var copassApp, root;

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

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

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

搜索\u ctrl.js.coffee

angular.module（'Search'，[]）.controller（'Search'，[…->

---

我曾想将

angular.module

作为一个getter和setter，但实际上只用于初始化。我希望这也能回答其他人的问题。

看起来很有帮助，但现在看到了这一点，我再次尝试使用加载顺序。

未捕获错误：[$injector:moduler]未能实例化模块copassApp，原因是：错误：[$injector:modulerr]未能实例化模块copassApp.SearchCtrl，原因是：错误：[$injector:modulerr]未能实例化模块$scope，原因是：错误：……1）

在调试过程中，我发现我应该删除

ng app

，而不是手动引导加载。现在请检查我对已编译js的编辑，谢谢。那么文件顺序是否重要？