Angular JS - лучшая практика для панели инструментов

Я новичок в Angular JS и работаю над созданием панели управления Angular JS в расширенном приложении Django. Я много читал в Angular, но все еще имею несколько вопросов о том, как лучше всего структурировать приложение Angular, в котором будет много независимых виджетах.

Я понимаю, что может быть только 1 приложение на документ HTML вместе с типичным вызовом 1 ng-view на странице, мой вопрос в том, должен ли я настраивать каждый отдельный виджет как свое собственное приложение или есть способ визуализации и управления несколько модулей в одном приложении?

В настоящее время я объявляю ng-app в верхней части моего документа

<html lang="en" ng-app="dashboard">

Не знаете, как я буду отображать оставшиеся виджеты, если я могу использовать только ng-view?

Я знаю, что этот вопрос довольно субъективен и, вероятно, нет идеального ответа, просто ищет некоторые рекомендации или функциональные советы.

Спасибо!

ОТВЕТЫ

Ответ 1

Это довольно субъективно, но использование нескольких контроллеров или директив, если выполнено правильно, может дать вам эффект, который вы ищете.

Например,

<html ng-app="my-dashboard">
  <body>
    <div class="Some structuring thing">
      <ng-include src="my-header.html"></ng-include>
    </div>
    <div class="Some other thing">
      <ng-include src="my-sidebar.html"></ng-include>
    </div>

    etc...

  </body>
</html>

Затем каждый раздел может быть его собственным автономным компонентом. Оттуда вы можете разбить его на контроллеры...

<div ng-controller="my-header-text">
  <p ng-bind="title">

  etc...
</div>
<div ng-controller="my-header-login">
  <p ng-click="login()">Login</p>

  etc...

</div>

И еще дальше с директивами.

<my-custom-directive words="user.name"></my-custom-directive>

Этот пример действительно переполнен, но точка остается; у вас есть много способов контролировать гранулярность, как вам нравится.

Лично это правила, которые мне нравятся.

  • Один app для каждого документа (как указано, а также потому, что он имеет смысл.)
  • Новый контроллер для каждого дерева DOM, который может стоять в одиночестве; поэтому мой логин и панель инструментов имеют разные цели, и если бы я хотел детализации, я мог бы разбить каждый на свой собственный контроллер и использовать services для правильной обработки связи с корнем моего приложения. Я мог бы входить в систему на любой странице, а не только на панели управления, и пользователь мог бы использовать панель инструментов даже без возможности входа в систему и выхода из нее (при условии, что у некоторых пользователей есть случай по умолчанию), поэтому эти разделы могут стоять в одиночестве и достойны кандидатов для собственного контроллера.
  • Мне нравятся настраиваемые директивы для нетривиальных кусков HTML. Это помогает читать и повторно использовать; просто попробуйте использовать область isolate, и если вы не можете, задайте вопрос, действительно ли то, что вы делаете, является директивой. Напишите свою директиву, предполагая, что она может использоваться не только вашим приложением, но и любым аналогичным приложением, которое включило его и соответствовало правильному API.

Ответ 2

Существует проект, реализующий функции widgets/dashboard с помощью AngularJS.

Особенности:

  • Добавление/удаление виджетов
  • Перетаскивание виджета
  • Любая директива может быть виджетами

Live Demo http://nickholub.github.io/angular-dashboard-app

Демо-исходный код https://github.com/nickholub/angular-dashboard-app

Директива панели мониторинга https://github.com/nickholub/angular-ui-dashboard