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

Question

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

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

编辑

有用的参考资料：

score 60 · Accepted Answer

这些只是一般建议。

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

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

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

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

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

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

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

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

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

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

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

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

隔离范围，将依赖项保持在必要的最低限度。请参阅 Misko 的有关 Angular 最佳实践的视频

Brian Ford 还写了一篇关于在 Angular 中编写大型应用程序的文章

score 17 · Accepted Answer

这个问题对我来说也很重要。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 获取内容。

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

2 回答 2

Related

Reference