Как разделить одну Директиву по нескольким модулям в AngularJS

Насколько я знаю об AngularJS, сегодня это одна из интересных библиотек. Я медленно понимаю силу Angular, и я серьезно ее люблю. У меня есть несколько сомнений, и я надеюсь, что я их выясню. Даже после некоторых фоновых работ я не могу понять, как их можно сделать

  • Например, у меня есть модуль в моем приложении, и у меня есть директивы, написанные для него, и я хочу добавить еще несколько модулей в свое приложение, а также хочу повторно использовать существующие директивы, написанные для другого модуля. Как я могу это достичь. Не только модули, которые применяются к фильтрам, config и т.д.

  • Могу ли я иметь вспомогательные модули, определенные внутри модуля?

  • Как я могу добавить контроллер в элемент динамически, он не должен быть статическим, то есть через html разметку ng-controller.

  • Если я хочу поделиться вещами во всех модулях, как я могу это сделать. Например, у меня есть переменная, определенная вне всех модулей в моем приложении, и я просто хочу получить к ним доступ внутри модулей. Это возможно, у меня есть это сомнение, потому что оно полностью работает на отдельных областях, общих масштабах и rootScope и т.д.

Любая помощь будет оценена по достоинству.

Ответы

Ответ 1

Q: Например, у меня есть модуль в моем приложении, и у меня есть директивы, написанные для этого, и я хочу добавить еще несколько модулей в свое приложение, а также хочу повторно использовать существующие директивы, написанные для другого модуля. Как я могу достичь этого. Не только модули, которые применяются к фильтрам, config и т.д.

Когда вы объявляете модуль, вы указываете его зависимости. Поэтому, если у вас есть такая директива:

angular.module( 'moduleA', [] )

.directive( 'myDirective', function () {
  // ...
});

Вы можете потребовать этот модуль из другого модуля:

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

Аргумент массива angular.module - это список зависимостей.

В: Могу ли я иметь вспомогательные модули, определенные внутри модуля?

Модули технически все независимы, но они очень распространены для подделки. Поэтому мы можем определить moduleA с ним "подмодули" следующим образом:

angular.module( 'moduleA.one', [] );
angular.module( 'moduleA.two', [] );

angular.module( 'moduleA', [
  'moduleA.one',
  'moduleA.two'
]);

И понятно разработчику/читателю, что moduleA.one и moduleA.two являются частью moduleA, но также в любое время, когда другой модуль зависит от moduleA, его два подмодуля также будут включены.

Но технически все они независимы, поэтому moduleB также может потребовать moduleA.two, если он захочет сделать это.

Q: Как я могу добавить контроллер в элемент динамически, это не должно быть статический, то есть через html-разметка ng-контроллера.

Это, вероятно, не очень хорошая идея. "Просмотр" - официальная запись. Какой ваш вариант использования?

В: Если я хочу поделиться вещами во всех модулях, как я могу это сделать.. Для Например, у меня есть переменная, определенная вне всех модулей в моем приложении и Я просто хочу получить доступ к ним внутри модулей. Возможно ли, у меня есть это сомнение, поскольку оно полностью работает на отдельных областях, scope и rootScope и т.д.

Я не уверен, что понимаю, о чем вы спрашиваете. Но когда вы определяете что-то в модуле, вы можете получить к нему доступ из любого другого, просто потребовав его, как обсуждалось выше. Но в приложении AngularJS должно быть что угодно "вне всех модулей" - все должно быть в модуле, потому что иначе оно определено в глобальной области (например, window), и это просто плохая практика.

Чтобы лучше понять, как модули могут быть структурированы с большой пользой, ознакомьтесь с моим ngBoilerplate kickstarter: http://ngbp.github.io/ngbp/. Структура модуля специально разработана для повторного использования кода и демонстрирует многие из этих концепций на практике.

Не стесняйтесь рассказывать об одном из них, и я буду пересматривать ответы.

Ответ 2

Самый простой способ

Самый простой способ - добавить все общие директивы и другие части в модуль ng.

angular
    .module("ng")
    .directive("myDirective", function() {
        ...
    })
    .filter("MyFilter", function() {
        ...
    });

Это самый простой способ (своего рода набор и забыть), так как вы легко можете просто отбросить свою директиву script в свой HTML и забыть об этом при разработке новых модулей, которые, естественно, также требуют этого.

Что еще полезно в этой технике

Почему добавление разделяемого материала в модуль ng разумно? Поскольку в вашем приложении могут быть простые страницы, которые не определяют конкретный модуль ngApp, а просто устанавливают ng-app на HTML/BODY и запускают только директивы angular.

Когда вы добавляете свою директиву в модуль ng, эти страницы также могут использовать вашу директиву.

<html>
    <body ng-app>
        <div my-directive>
        ...
        </div>
    </body>
</html>

Ответ 3

Разве вы не можете создать div в начале вашего приложения, чтобы его объем был таким большим, насколько вам это нужно?

<div ng-controller="uberController as uber">

    ....

    other controllers and html code here

    ....
</div>

Все, что находится внутри div uber, могут использовать uber-контроллер.