TL; DR

Question

我一直在写一个angularjs应用程序，我有一些控制器，我放在1 JS文件中。我希望有一些更模块化的东西，并将我的控制器分成自己的文件。

我想到了RequireJS，但这是推荐的方法吗？或者angularjs是否提供了其他内容以及解释它的任何线索？

同样拥有所有这些文件非常适合调试，但是一旦需要生产构建，angularJS会将模块合并到一个文件中并最小化结果吗？

如果有人能解释最好的方法，那将会非常有帮助。

由于

Answer 1

Angular依赖注入非常棒，你应该创建很多小模块。

说到文件组织，很容易有很多小文件（每个模块可能有一个），但是你面对的问题是：我怎么处理所有这些文件？如何加载它们？

值得一看这两个来源：Brian Ford's blog和this Github repo。它帮助我改进了我的工作流程并更好地理解/使用Angular模块。< / p>

TL; DR

我为我的项目做的是使用 Grunt 到 concat （缩小，如果需要）所有js文件（和方式更多：减少css编译，资产管理，javascript模板编译）在上面的Github回购中给出了一个很好的例子。

我不建议将RequireJS与AngularJS一起使用。虽然这肯定是可能的，但我还没有看到任何RequireJS在实践中有益的实例。 [Brian Ford]

文件组织

我的app文件夹如下所示：

www
|-dist/         = Created by Grunt. Generated files (served by my web server).
|-node_modules/ = node modules (ie. Grunt modules. Grunt is based on NodeJS)
|-src/          = My workspace
|-test/         = Some tests
|-vendor        = External libraries (AngularJS, JQuery, Bootstrap, D3, ... Whatever you need)
|-gruntFile.js  = The Grunt configuration file: contains all the jobs for Grunt.
|-package.json  = App infos + dependencies (Grunt modules) I use (concat, uglify, jshint, ...)

所以我处理的所有不同文件都在src文件夹中，然后看起来像这样：

www/src
|-app              = Folder for my controllers
| |-Controller1.js
| |-Controller2.js
| |-...
|-assets           = Folder for the static assets (img, css, ...)
| |-img/
| |-css/
| |-favicon.ico
|-common           = Folder for the shared modules (directives, resources, services, ...)
| |-directives
| | |-chart.js
| | |-map.js
| | |-...
| |-resources
| | |-users.js
| | |-another-cool-resource.js
| | |-...
| |-services
| | |-service1.js
| | |-...
|-views            = Folder for my templates
| |-profile.tpl.html
| |-search.tpl.html
| |-...
|-index.html       = The main and unique html file.

咕噜

然后我使用Grunt将所有内容“编译”到dist文件夹中可以找到gruntFile的示例here。我有一次性的部署工作和一些观察者的发展。

您需要更多解释吗？

Answer 2

Angular允许您定义可以注入控制器的模块，请参见此处：

http://docs.angularjs.org/api/angular.module

这些模块可以依赖于可以像这样注入的其他模块：

app.factory('module2', ['module1', function (module1) {
   var functions = {
       myModule2Function: function (variable) {
          return  module1.testfunction(variable);
       }
   }
    return functions;
}]);

然后在控制器中：

function MyController($scope, module2) { 
      $scope.aControllerFunction = function (variable) {
         return module2.myModule2Function(variable);
     }

}

Answer 3

按需加载模块是我们真正需要的巨大应用程序，例如交易应用程序。我认为至少在移动设备上处理行为是一种聪明的方式，我们不希望在3G连接上加载整个应用程序。在这些情况下，RequireJS最合适。

Answer 4

将RequireJS与AngularJS一起使用是有意义的，但前提是你理解它们如何处理依赖注入，因为虽然它们都注入依赖关系，但它们会注入非常不同的东西。

AngularJS有自己的依赖系统，允许您将AngularJS模块注入新创建的模块，以便重用实现。假设您创建了一个实现AngularJS过滤器“greet”的“第一个”模块：

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

现在让我们假设您想在另一个名为“second”的模块中使用“greet”过滤器来实现“再见”过滤器。您可以将“第一”模块注入“第二”模块：

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

问题是，为了在没有RequireJS的情况下正常工作，您必须确保在创建“第二个”AngularJS模块之前在页面上加载“第一个”AngularJS模块。引用文档：

取决于模块意味着需要加载所需的模块在加载需求模块之前。

从这个意义上说，这里是RequireJS可以帮助你的地方，因为RequireJS提供了一种向页面注入脚本的简洁方法，可以帮助你组织彼此之间的脚本依赖。

回到“第一个”和“第二个”AngularJS模块，这里是你如何使用RequireJS分离不同文件上的模块以利用脚本依赖性加载：

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});

// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});

你可以看到我们依赖于要在需要执行RequireJS回调的内容之前注入的“firstModule”文件，需要加载“第一个”AngularJS模块来创建“第二个”AngularJS模块。

附注：为了在RequireJS回调函数中使用AngularJS，需要在“firstModule”和“secondModule”文件上注入“angular”，并且必须在RequireJS配置上配置它以将“angular”映射到图书馆代码。你也可以用传统的方式将AngularJS加载到页面（脚本标记），尽管会损害RequireJS的好处。

关于在我的博客文章中从2.0版本获得AngularJS核心的RequireJS支持的更多细节。

根据我的博客帖子“了解使用AngularJS的RequireJS”，这里是link。

AngularJS - 使用RequireJS或内置的模块化开发？

4 个答案:

TL; DR

文件组织

咕噜

您需要更多解释吗？