使用动态模块集开发 AngularJS 应用程序

Question

我有一个具有复杂布局的应用程序，用户可以在其中放置（拖放）小部件（通过从预定义的 100 多个小部件中选择），其中每个小部件都是显示一组数据的自定义实现（使用REST 调用）以特定方式。我已经阅读了大量的博客文章、stackoverflow 问题和官方 AngularJS 文档，但我无法弄清楚我应该如何设计我的应用程序来处理这些要求。查看演示应用程序，有一个模块（ng-app），当在 .js 文件中构建它时，依赖模块被声明为它的依赖项，但是我有一大堆小部件，不知何故不建议全部描述它们那里。我需要以下问题的建议：

• 我应该如何设计我的应用程序和小部件 - 我应该有一个单独的 AngularJS 模块还是每个小部件都应该是主模块的指令？
• 如果我将小部件设计为指令，有没有办法在指令中定义依赖关系。 IE。说我的指令在其实现中使用了 ng-calender？
• 如果我将每个小部件设计为单独的模块，有没有办法将小部件模块作为依赖项动态添加到主模块？
• 我应该如何设计控制器 - 每个小部件可能需要一个控制器？
• 如果视图中有多个相同类型的小部件，我应该如何分隔状态（范围）？
• 是否有使用 AngularJS 设计可重用小部件的最佳实践？

编辑

有用的参考资料：

• ocLazyLoad - great lazy loading lib for AngularJS
• Seed project - modules + lazy loading on route change (ES6, systemjs, ocLazyLoad)
• Lazy loading in AngularJS
• Dynamically Loading Controllers and Views with AngularJS and RequireJS
• Loading AngularJS Components With RequireJS After Application Bootstrap
• Demo project about lazy loading of AngularJS resources on GitHub
• Load On Demand project
• Inject module dynamically only if required
• Another lazy loading in Angular article
• Code Organization in Large AngularJS and JavaScript Applications

Answer 1

这些只是一般建议。

我应该如何设计我的应用程序和小部件 - 我应该有一个单独的 AngularJS 模块还是每个小部件都应该是主模块的指令？

您说的是数百个小部件，将它们分成几个模块似乎很自然。一些小部件可能比其他小部件有更多共同点。有些可能非常笼统，适合其他项目，有些则更具体。

如果我将小部件设计为指令，有没有办法在指令中定义依赖关系。 IE。说我的指令在其实现中使用了 ng-calender？

对其他模块的依赖是在模块级别完成的，但是如果模块A 依赖于模块B 并且A 和B 都依赖于模块C 则没有问题。指令是在 Angular 中创建小部件的自然选择。如果一个指令依赖于另一个指令，您要么在同一个模块中定义它们，要么在模块化级别上创建依赖关系。

如果我将每个小部件设计为单独的模块，有没有办法将小部件模块作为依赖项动态添加到主模块？

我不确定您为什么要这样做，也不知道该怎么做。在 Angular 中使用指令和服务之前，它们不会被初始化。如果您有一个庞大的指令库（小部件）并且知道您可能会使用其中的一些，但不是全部 - 但您不知道在应用程序初始化时会使用哪些指令，您实际上可以“懒惰”在你的模块被加载后加载”你的指令。我创建了一个示例here

这样做的好处是即使您有很多代码，您也可以让您的应用程序快速加载，因为您不必在需要脚本之前加载它们。缺点是第一次加载新指令时可能会有相当大的延迟。

我应该如何设计控制器 - 每个小部件可能需要一个控制器？

小部件可能需要自己的控制器。控制器通常应该很小，如果它们变大，您可以考虑是否有任何功能更适合服务。

如果视图中有多个相同类型的小部件，我应该如何分隔状态（范围）？

需要范围变量的小部件无疑应该有自己的隔离范围（指令配置中的scope:{ ... }）。

是否有使用 AngularJS 设计可重用小部件的最佳实践？

隔离范围，将依赖项保持在必要的最低限度。See Misko's video about best practices in Angular

Brian Ford 还写了一篇关于writing a huge application in Angular的文章

Answer 2

这个问题对我来说也很重要。 AngularJS 主页上有一些示例（您可以将它们称为小部件），因此我查看了它们的源代码以尝试了解它们是如何分离小部件的。

首先，它们从不声明“ng-app”属性。他们使用

function bootstrap() {
      if (window.prettyPrint && window.$ && $.fn.popover && angular.bootstrap &&
          hasModule('ngLocal.sk') && hasModule('ngLocal.us') && hasModule('homepage') && hasModule('ngResource')) {
            $(function(){
              angular.bootstrap(document, ['homepage', 'ngLocal.us']);
            });
      }
    }

以确保所有内容都正确加载。好主意，但奇怪的是他们将 ng-app 属性推给你这么多，然后甚至不自己使用它。无论如何，这里是他们使用应用程序加载的主页模块 - http://angularjs.org/js/homepage.js

里面有一个指令叫appRun

  .directive('appRun', function(fetchCode, $templateCache, $browser) {
    return {
      terminal: true,
      link: function(scope, element, attrs) {
        var modules = [];

        modules.push(function($provide, $locationProvider) {
          $provide.value('$templateCache', {
            get: function(key) {
              var value = $templateCache.get(key);
              if (value) {
                value = value.replace(/\#\//mg, '/');
              }
              return value;
            }
          });
          $provide.value('$anchorScroll', angular.noop);
          $provide.value('$browser', $browser);
          $locationProvider.html5Mode(true);
          $locationProvider.hashPrefix('!');
        });
        if (attrs.module) {
          modules.push(attrs.module);
        }

        element.html(fetchCode(attrs.appRun));
        element.bind('click', function(event) {
          if (event.target.attributes.getNamedItem('ng-click')) {
            event.preventDefault();
          }
        });
        angular.bootstrap(element, modules);
      }
    };
  })

我将使用 ToDo 列表作为示例。对于 html，他们有

<div app-run="todo.html" class="well"></div>

然后在他们的页面底部

<script type="text/ng-template" id="todo.html">
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <span>{{remaining()}} of {{todos.length}} remaining</span>
    [ <a href="" ng-click="archive()">archive</a> ]
    <ul class="unstyled">
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="addTodo()">
      <input type="text" ng-model="todoText"  size="30"
             placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</script>

他们也有

<style type="text/css" id="todo.css"> //style stuff here </style>
<script id="todo.js"> //controller stuff here </script>

使用了代码，但这些脚本上的 id 属性对于运行应用程序并不重要。这只是应用左侧的源代码显示。

基本上，他们有一个名为 appRun 的指令，它使用函数 fetchCode

  .factory('fetchCode', function(indent) {
    return function get(id, spaces) {
      return indent(angular.element(document.getElementById(id)).html(), spaces);
    }
  })

获取代码。然后他们使用 angular.bootstrap() 创建一个新的应用程序。他们还可以通过 app-run 加载模块。 JavaScript 项目示例的初始化方式如下：

<div app-run="project.html" module="project" class="well"></div>

希望这会有所帮助。我仍然不确定什么是“最佳”技术，但 AngularJS 主页似乎只是为每个示例/小部件使用了一个完全独立的 Angular 应用程序（ng-app）。我想我也会这样做，只是将 fetchCode 函数更改为使用 AJAX 获取内容。