Я ищу способ загрузки модуля (js, css и html) только с одной директивой в любое время в течение жизни приложения.Динамически загружать модули угловые
И шаблон этой директивы создает
<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) { ... });
Но я не могу найти это свойство документации. Является ли он стандартным или он может меняться в любое время? кто-нибудь знает?
Update
Чтобы было ясно, что это не загружать один модуль с одним компонентом, это предназначается, чтобы загрузить все приложение, представьте его как пусковой (например, MacOS dockbar или единство врезке в 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>
См. Update :) (случайный текст для заполнения 15 символов) –