Question

我正在寻找一种方法，可以在应用程序生命周期内随时只使用一个指令加载模块（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停靠栏或Ubuntu的统一侧边栏），动态添加图标，当一个点击这个图标它应该运行模块。但我不知道在网页上启动哪个应用程序应该能够启动这个启动器，我需要动态添加更多应用程序。由于每个应用程序都有自己的指令和服务，我使用角度模块作为应用程序。

<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>

Answer 1

我不确定你是不是在试图抽象代码。

你应该做什么：

制作模块
在包含联系人列表的模块中添加指令
将模块注入页面。并使用联系人列表。

Answer 2

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

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

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

动态加载模块角度

2 个答案: