Angular + 浏览器答案

【问题标题】：Angular + BrowserifyAngular + 浏览器
【发布时间】：2014-06-28 12:10:11
【问题描述】：

我目前正在试验 Browserify + Angular，我偶然发现了一个奇怪的问题。我在一个名为 controllers/start-controller.js 的控制器的子目录中创建了一个文件。`

在我的 app.js 文件中，我有一个引用控制器的局部变量：

var controllers = require('./controllers/');

controllers/ 内是一个 index.js 文件，它引用了启动控制器：

require('./start-controller');

然后回到我的 app.js，调用控制器，我有以下内容：

app.controller('StartController', ['$scope', controllers.StartController]);

问题：

在当前设置下，无法识别 StartController，Angular 会抛出 this error。但是，如果我将局部变量更改为直接包含 start-controller：

var controllers = require('./controllers/start-controller');

然后这很好用，但这并不是我真正想要的。我希望能够在 controllers/index.js 中引用控制器。 app.controller 在对 StartController 的调用中是否缺少某些内容，这就是它无法识别的原因？

【问题讨论】：

“无法识别 StartController”是否意味着 controllers.StartController 未定义？你能创建一个小例子吗？我无法重现我这边的任何问题。
我相信@RickvanMook 的答案是正确的解决方案，但发布index.js 会更有帮助。

标签： javascript angularjs browserify

【解决方案1】：

不确定您的 index 和 start-controller 文件的内容，但您似乎需要在索引文件中导出 StartController。

在您的 controllers/index.js 中尝试此操作

exports.StartController = require('./start-controller');

【讨论】：

【解决方案2】：

James Halliday（子栈，browserify 的创建者）一直在努力编写 browserify 手册：https://github.com/substack/browserify-handbook

这个资源很好。它深入探讨了如何工作和解决依赖关系。这是迄今为止我在这个主题上见过的最好的资源。也许如果您（或遇到类似问题的其他人）阅读它，答案可能会突然出现。

我知道这不是您问题的直接答案，但我最近才发现这个资源，我希望我早点知道它存在。

关于 browserify 的介绍，我推荐观看这个 tagtree 视频：http://tagtree.tv/browserify-an-intro?share_code=uncoopered-inspirer

【讨论】：

虽然这是一个很好的参考并且很有帮助，但它并不能回答问题。

【解决方案3】：

Angular 最棒的一点是它在设计上的模块化程度。模块化还有助于对每个模块进行单元测试。

在你的 index.js 文件中，你可以建立一个 Angular 模块：

module.exports = angular.module('app.controllers', [
  require('./start-controller').name
]);

然后在你的 start-controller.js 文件中：

  module.exports = angular.module('app.controllers.startController', [])

  .controller('StartCtrl', ['$scope',

    function($scope, ) {

    }
  ]);

现在，当您只想测试启动控制器时，您已经将它隔离在 angular 内部。

此时，如果您想将此模块添加到更大的应用程序，例如您的根应用程序，您将在顶层执行完全相同的过程：

 module.exports = angular.module('app', [
    'ui.router', // Third party library that we've pulled in with an earlier require()
    require('./controllers').name
  ]);

然后在你的 index.html 文件中：

<html lang="en" ng-app="app" class="no-js">

【讨论】：