使用动态模块开发AngularJS应用程序
使用动态模块开发AngularJS应用程序
我有一个布局复杂的应用程序，用户可以将小部件（通过从预定义的100多个小部件中选择并拖放）放置在其中，每个小部件都是一个自定义实现，以特定的方式显示一组数据（使用REST调用获取）。我已经阅读了大量的博客文章，stackoverflow问题和官方的AngularJS文档，但我无法弄清楚应该如何设计我的应用程序来处理这些要求。看了一些演示应用程序，有一个单独的模块（ng-app），在.js文件中构建它时，依赖模块被声明为其依赖项，但是我有一个大量的小部件，以某种方式将它们全部描述在那里是不可取的。我需要以下问题的建议：
- 我应该如何设计我的应用程序和小部件 - 是应该有一个单独的AngularJS模块还是每个小部件应该是主模块的一个指令？
- 如果我将我的小部件设计为指令，是否有一种方法在指令内部定义依赖关系。例如，说我的指令在其实现中使用了ng-calender？
- 如果我将每个小部件设计为单独的模块，是否有一种方法将小部件模块动态地添加为主模块的依赖项？
- 我应该如何设计控制器 - 可能是每个小部件一个控制器？
- 如果视图中有多个相同类型的小部件，我应该如何分离状态（作用域）？
- 有没有关于使用AngularJS设计可重用小部件的最佳实践？
编辑
有用的参考资料：
- ocLazyLoad - 用于AngularJS的出色的延迟加载库
- 种子项目 - 模块+按路由更改时的延迟加载（ES6，systemjs，ocLazyLoad）
- AngularJS中的延迟加载
- 使用AngularJS和RequireJS动态加载控制器和视图
- 在应用程序引导之后使用RequireJS加载AngularJS组件
- GitHub上关于延迟加载AngularJS资源的演示项目
- 按需加载项目
- 只在需要时动态注入模块
- 另一篇关于Angular中的延迟加载的文章
- 在大型AngularJS和JavaScript应用程序中组织代码
问题的原因是：开发人员想要设计一个具有动态模块集的AngularJS应用程序，并且想要找到一种合适的方法来处理这些模块和小部件之间的依赖关系、控制器和作用域。
问题的解决方法是：
1. 对于小部件和模块的设计，可以考虑将它们拆分为多个模块。一些小部件可能具有更多的共同之处，而其他小部件则更具特定性。通过使用指令来创建小部件是Angular的自然选择。
2. 对于指令之间的依赖关系，可以在模块级别上进行定义。如果一个指令依赖于另一个指令，可以将它们定义在同一个模块中，或者在模块级别上创建依赖关系。
3. 对于将每个小部件设计为单独的模块的情况，可以通过在主模块加载后动态添加小部件模块作为依赖关系来实现。这样可以在应用程序加载时快速加载，并且只有在需要时才加载脚本。但是，第一次加载新指令时可能会有一定的延迟。
4. 控制器的设计通常是每个小部件一个控制器。如果控制器变得很大，可以考虑将某些功能放入服务中。
5. 对于具有相同类型的多个小部件的状态（作用域）的分离，应该为每个小部件使用独立的作用域（在指令配置中使用scope:{ ... }）。
6. 设计可重用小部件的最佳实践是隔离作用域，并将依赖关系保持在必要的最小范围内。
参考链接：
- Misko的关于Angular最佳实践的视频：链接
- Brian Ford关于在Angular中编写大型应用程序的文章：链接
问题的出现原因是作者想要开发一个使用动态模块集的AngularJS应用程序，但是对于如何实现这个目标感到困惑。他在AngularJS官方网站上查看了一些示例代码，想要了解它们是如何分离各个小部件的。
文章中提到的解决方法是，作者发现AngularJS官方网站在加载应用程序时并没有使用"ng-app"属性，而是使用了一个名为"bootstrap()"的函数来确保一切正确加载。在这个函数中，作者使用了"angular.bootstrap()"方法来创建一个新的应用程序。另外，作者还发现可以通过"app-run"指令来加载模块，如下所示：
还有一个名为"fetchCode"的函数，它是一个工厂函数，用于获取代码。作者计划对这个函数进行修改，以便使用AJAX来获取代码。
作者得出的结论是，AngularJS官方网站似乎对于每个示例/小部件都使用了一个完全独立的Angular应用程序（ng-app）。作者决定按照相同的方式来开发自己的应用程序。
希望这篇文章能对你有所帮助。你还可以在这里找到一个类似的问题：stackoverflow.com/questions/17557088/…。另外，作者还分享了一个实现"hasModule"函数的代码段。