Javascript

AngularJS: Подход Angular

Управление сложностью — сущность программирования.
Брайан Керниган. Инструментальное ПО (1976)

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

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

Сам факт существования этих правил не означает, что вы не можете сделать что-то так, как хочется именно вам. Сделать можно что угодно. Но не все решения будет легко реализовать и уж тем более интегрировать с остальным стеком компонентов Angular. Итак, к делу…

Основные принципы

  1. Никаких манипуляций с DOM внутри контроллеров!Делайте что угодно с DOM внутри директив и в очень редких случаях внутри сервисов. Но не в контроллерах.
  2. Все действия не-из-Angular должны быть переведены в «мир Angular» с помощью $scope.$apply (а не $digest)!
  3. Минимум логики внутри контроллеров — они для того, чтобы «склеивать» части приложения вместе.
    Бизнес логику приложения размещайте в сервисах.
  4. Минимизируйте вложенность $scope.
  5. Старайтесь не использовать $parent.$scope.
  6. Лучше не используйте напрямую $scope контроллеров внутри директив.
    Компоненты должны знать о всех других $scope. Используйте атрибуты и binding’и для связи различных частей приложения.
  7. Минимизируйте применение $scope.on, $scope.emit, $scope.broadcast. Вместо этого на поля и getter’ы лучше ставьте $watch.
  8. Создавайте функционально-минимальные компоненты.
  9. Используйте внедрение зависимостей для связи между компонентами.

На пути к масштабируемой и поддерживаемой архитектуре

Есть еще несколько принципов, которые помогут вам с проектированием архитектуры:

  • Следуйте функциональному разделению в структуре проекта:
    • Angular.module на каждый функциональный модуль
    • Отдельная директория для каждого функционального модуля
    • Все компоненты внутри директории расположены друг за другом. Смотри как пример такой организации кода NGBP
  • Структура проекта должна соответствовать его архитектуре.
    Один компонент на файл.
  • Связные компоненты старайся делать с максимальной инкапсуляцией.
  • Максимальная гранулярность компонентов (что-то вроде Unix-way).
  • Разделяй поведение от состояния (бездумные представления и анемичные модели это хороший тон).

Перевел Роман Спиридонов.

Автор:
Alexey Migutsky
Full Stack EngiNerd.
I use magic to make IT things work.

Ссылка на оригинал

Оставь комментарий!

Добавить комментарий