Question

所有

我对browserify和commonjs模式很新。当我尝试使用Angular进行broserify时，我使用了一个非常简单的例子：

//main.js

require("angular");
var app = angular.module("app", []);

和

// controller.js
require("angular");
angular.module("app");
        .controller("main", function($scope){
            $scope.message = "Hello";
        });

对于Gulp我使用：

// gulpfile.js

var gulp = require("gulp");
var browserify = require('browserify');
var source = require('vinyl-source-stream');


gulp.task('browserify', function() {
    // Grabs the app.js file
    return browserify('./app/main.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('bundle.js'))
        // saves it the dest/ directory
        .pipe(gulp.dest('./dest/'));
})

但这不起作用（我肯定知道这一点，但不知道怎么做），我尝试添加require("./controller");但没有运气。

我想知道如何将控制器.js添加为commonjs所需的模块并对其进行浏览，或者无论如何（如果我们不需要添加它）只需使它在commonjs模式下工作。

我发现有一篇文章在讨论这个问题：http://ardeibert.com/modularizing-an-angularjs-app-with-browserify/ 但它的方式只是导出所有控制器函数，我仍然需要在main.js中注册它们，如果是这样，我想知道如何在controller.js中使用其他服务/工厂，如依赖注入？

我认为使用browserify的原因是它可以帮助找出依赖结构，但我想知道如何让它知道app模块和主控制器之间的关系？

谢谢

Answer 1

您的控制器文件应该在您需要时导出您希望可用的值。在这种情况下，您可以导出控制器功能。

// controller.js
module.exports = function($scope){
  $scope.message = "Hello";
}

然后在主应用程序文件中要求它。

//main.js

var angular = require("angular");
var MainController = require("./controller");

var app = angular.module("app", []);

app.controller("main", MainController);

就个人而言，随着我的项目变得越来越大，我喜欢将每个文件作为一个模块，以便它们可以包含多个提供者和指令。然后导出/需求模式会略有不同。

// my-module.js
var angular = require('angular');

angular.module('MyModule', [])
  .service('MyService', function() { ... })
  .directive('MyDirective', function() { ... });

然后你需要模块并注入你的应用程序的主模块。

// main.js
var angular = require('angular');
require('./my-module');

angular.module('MyApp', ['MyModule'])
  .controller('MyController', function(MyService) {
    // injected service from MyModule
  });

Answer 2

Angular 1.x本身对commonjs模块不太友好 - 它有自己的模块系统，它与DI容器混合在一起。

我发现使用commonjs或其他模块系统进行角度1.x的最佳方法如下：

每个模块声明都应导出模块名称
对角度模块的所有调用都应放在模块声明文件中（.controller，.factory等）。
所有服务实现应该在单独的文件中（每个控制器，指令或服务应该放在单独的文件中），并且应该只导出一个实现

关于控制器 - 在控制器文件中，您将导出控制器构造函数，并将其导入到您的模块文件中，如下所示：

// MainController.js
module.exports = function(service1){...}


// service1.js
module.exports = function(...){}

和模块文件：

// module.js
var angular = require('angular');
angular.module('app', [require('some-angular-module'), ....])
       .service('service1', require('./service1.js'))
       .controller('MainController', require('./MainController.js'));
module.exports = 'app';

您可以在此处查看以这种方式构建的应用示例：http://github.com/zxbodya/angular-webpack-seed

它是用webpack构建的，但通常结构是相同的

如何编写AngularJS

2 个答案: