6

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

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

拥有所有这些文件也非常适合调试，但是一旦需要生产构建，angularJS 是否提供某种将模块合并到一个文件中并最小化结果？

如果有人可以解释最好的解决方法，那将非常有帮助。

谢谢

4

4 回答 4

12

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

在文件组织方面，拥有很多小文件（每个模块可能一个）要容易得多，但是您会遇到您正在谈论的问题：我该如何处理所有这些文件？我如何加载它们？

值得看看这两个来源：Brian Ford 的博客和这个 Github repo。它帮助我改善了工作流程并更好地理解/使用 Angular 模块。

TL;博士

我为我的项目所做的是使用Grunt来连接（如果需要则缩小）所有 js 文件（以及更多：更少的 css 编译、资产管理、javascript 模板编译）。
上面的 Github repo 给出了一个很好的例子。

我不建议将 RequireJS 与 AngularJS 一起使用。虽然这当然是可能的，但我还没有看到任何 RequireJS 在实践中有益的例子。[布赖恩福特]

文件组织

我的应用程序文件夹如下所示：

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文件夹中。可以在此处
找到 a 的示例。我有一份一次性的部署工作和一些开发观察员。 gruntFile

您需要更多解释吗？

于 2013-03-28T12:13:44.950 回答
3

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);
     }

}
于 2013-03-12T11:04:58.237 回答
2

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

于 2013-04-23T23:16:43.243 回答
0

将 RequireJS 与 AngularJS 一起使用是有意义的，但前提是您了解它们各自在依赖注入方面的工作原理，因为尽管它们都注入依赖项，但它们注入的东西却截然不同。

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

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

现在假设您想在另一个名为“second”的模块中使用“greet”过滤器，该模块实现了“goodbye”过滤器。您可以将“第一个”模块注入“第二个”模块：

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 模块。

旁注：需要在“firstModule”和“secondModule”文件上注入“angular”作为依赖项，以便在 RequireJS 回调函数中使用 AngularJS，并且必须在 RequireJS 配置中配置它以将“angular”映射到库代码。您可能也以传统方式（脚本标记）将 AngularJS 加载到页面，尽管这会破坏 RequireJS 的好处。

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

根据我的博文“用 AngularJS 理解 RequireJS”，这里是链接。

于 2014-03-04T04:06:16.143 回答