Каков наилучший способ импорта компонента из другого модуля, в AngularJS?

Question

У меня есть 2 подмодуля в моем приложении AngularJS (v1.7), давайте назовем их A и B. Я пытаюсь импортировать компонент (с шаблоном html и контроллером) из модуля B (componentB), для использования внутри шаблона компонента в модуле A (componentA).

После прочтения Повторное использование AngularJS Компонент в другом модуле (внедрение зависимостей) , я сначала попытался сделать это, указав componentB как зависимость для componentA, а затем использовать его внутри componentA template.

componentA. js

angular.module('A', ['componentB']).component('componentA', {...});

componentA. html

<div>
   <componentB></componentB>
</div>

К сожалению, это не сработало, даже если componentB правильно определен и успешно используется в модуле B. Я также попытался указать модуль B как зависимость модуля A, изменив app.js, как показано ниже:

angular.module('A', ['B'])
.config(...

В обоих случаях я получаю

Uncaught Error: [$ инжектор: modulerr]

Мне трудно найти похожие вопросы / статьи, которые относятся к AngularJS в отличие от более новых Angular. Я также довольно ржавый с AngularJS, поэтому любая помощь будет признательна, спасибо заранее.

Answer 1

Это довольно просто:

angular.module("moduleB",[])
.component("componentB", {
     template: "<div>This is Component B from Module B</div>"
});

angular.module("moduleA",["moduleB"])

<div ng-app="moduleA">
    <component-b></component-b>
</div>

moduleA импортирует компоненты из moduleB, объявив moduleB в качестве зависимости.

---

Модуль Создание против извлечения

Только для первого объявления модуля должны быть указаны зависимости.

ERRONEOUS

angular.module('moduleA', [])
.controller('ctrl', /* ... */) 

angular.module('moduleA', ['moduleB'])
.service('serviceA', /* ... */)

Повторное объявление зависимостей приведет к тому, что контроллер будет незарегистрированный.

Лучше

angular.module('moduleA', ['moduleB'])

angular.module('moduleA')
.controller('ctrl', /* ... */) 

angular.module('moduleA')
.service('serviceA', /* ... */)

Для получения дополнительной информации см.

• AngularJS Руководство разработчика - Создание модуля и поиск
• AngularJS angular. Модуль API Reference