Angular + Browserify

Angular + Browserify

本文关键字：Browserify Angular      更新时间：2023-09-26

我目前正在尝试使用Browserify + Angular，我遇到了一个奇怪的问题。我在控制器的子目录中创建了一个名为controllers/start-controller.js的文件。

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

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

在controllers/中是一个index.js文件，它引用start-controller:

require('./start-controller');

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

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

问题:

在当前的设置下，StartController不能被识别，Angular会抛出这个错误。但是，如果我将局部变量更改为直接包含start-controller:

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

那么这工作很好，但这不是我真正想要的。我希望能够在控制器/index.js中引用控制器。app.controller是否在调用StartController时丢失了一些东西，这就是为什么它不能识别它?

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

试着在你的controllers/index.js 

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

James Halliday (substack, browserify的创建者)一直在努力编写browserify手册:https://github.com/substack/browserify-handbook

这个资源很好。它深入探讨了需求是如何工作和解决依赖关系的。这是迄今为止我所见过的关于这个主题的最好的资料。也许如果你(或任何遇到类似问题的人)读一下，答案就会跳出来。

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

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

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, ) {
    }
  ]);

现在当你想测试start控制器时，你已经把它隔离在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">
相关文章：