动态加载模块角度

Dynamically load modules angular

本文关键字：模块 加载 动态      更新时间：2024-02-02

我正在寻找一种方法，在应用程序生命周期中的任何时候只需一个指令即可加载模块（js、css和html）。

<my-module id="contacts"></my-module>

该指令的模板生成

<my-module id="contacts">
  <link type="stylesheet" href="modules/contacts/contacts.css">
  <script type="text/javascript" src="modules/contacts/contacts.js"></script>
  <ng-include src="modules/contacts/contacts.html"></ng-include>
</my-module>

.js文件创建一个新的角度模块

// modules/contacts/contacts.js
angular.module('my-contacts', [])
.controller(ContactsCtrl, function($scope) { ... });

".html"在这个模块中使用了一个控制器

// modules/contacts/contacts.html
<ul ng-controller="ContactsCtrl">
  <li ng-repeat="contact in contacts">{{ contact.name }}</li>
</ul>

它不会工作，因为页面的模块<html ng-app="my-app">不依赖于my-contacts模块。因此，我希望每个模块都将自己作为my-app依赖项注入。

我发现每个模块（angular.module返回的对象）都包含一个requires数组及其依赖项。我已经将my-contacts注入到该数组中，这很有效：

// modules/contacts/contacts.js
angular.module('my-app').requires.push('my-contacts');
angular.module('my-contacts', [])
.controller(ContactsCtrl, function($scope) { ... });

但我在文件上找不到这处房产。它是标准的还是随时可以更改？有人知道吗？

更新

需要明确的是，这不是用单个组件加载单个模块，而是加载整个应用程序，想象一下它就像一个带有动态添加图标的启动器（比如MacOS的dockbar或Ubuntu的统一侧边栏），当点击其中一个图标时，它应该运行该模块。但我不知道在网页启动时，这个启动器应该能够启动哪些应用程序，我需要动态添加更多的应用程序。由于每个应用程序都有自己的指令和服务，所以我使用angular模块作为应用程序。

<body ng-app="my-app">
  <ul>
    <li ng-repeat="module in modules">
      <button ng-click="selectedApp = module.id">{{ module.name }}</button>
    </li>
  </ul>
  <my-module id="{{ selectedApp }}"></my-module>
</body>

我不确定你是否试图对代码进行如此多的抽象。

你应该能做什么：

  1. 制作模块
  2. 将指令与联系人列表一起放入模块中
  3. 将模块插入页面。并使用联系人列表

依赖项通常是模块定义的第二个参数。即：

angular.module('my-app', ['my-contacts']);

这就是你所指的吗？依赖关系以及如何正确地注入它们？

相关文章：