Modularize Angular template

Question

Мой шаблонный файл становится большим и слишком сложным (~ 200 (длинных) строк кода, 9 уровней отступа), и поэтому он тоже становится склонным к ошибкам. Я ищу простое решение, которое позволяет мне получить доступ к переменным и функциям $scope без слишком большой головной боли.

Моя первая идея состояла в том, чтобы использовать ngInclude, но поскольку я видел, что он становится взломанным, если я хочу получить доступ к переменным.

Другая идея заключалась бы в использовании директив, но это тоже не похоже на то, как я не хочу добавлять отдельные директивы для каждого шаблона.

Моя последняя идея - написать общую директиву, которая использует его родителей $scope и может получить доступ к ее функциям. Это считается хорошей практикой? Каковы возможные подводные камни/недостатки трансклюзии?

Answer 1

Написать свой угловой в маленьких модулей кода

Эти модули должны быть, вероятно, страница специфичны. Взгляните на этот простой шаблон, который я собрал, чтобы сохранить ваш угловой код читаемым и функциональным. here - это ссылка на репозиторий github.

Файловая структура

В приложение у вас есть 2 основных модулей, один, который приносит все это вместе «module.js»

И один, что контролирующая ваши маршруты «routes.js»

Существует также раздел компонентов, в нем содержатся отдельные модули для каждой страницы, разделяющие проблемы. у нас есть файл для самого модуля и контроллера, а также отдельный для фабрик и сервисов.

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

Дополнительное чтение

Я следую this руководство для угловой структуры приложения, точки, сделанные в статье, очень хорошо, и всегда держал свой код в чистоте.

Answer 2

Моя рекомендация по проектам, которые получают этот комплекс, двояка. Они - две из больших точек от превосходного Джона Папы Angular Style Guide.

Во-первых, подумайте об использовании вместо $scope в вашем коде вместо синтаксиса controller as. Синтаксис controller as предлагает немало преимуществ, главным из которых является то, что он позволяет вам легко распознавать цепочку зависимостей переменной. Как только вы определили свою цепочку зависимостей, гораздо проще идентифицировать части вашего кода, которые могут быть модульными.

После того, как у вас есть идея кода, который может быть модульным, вы можете разбить модули на директивы. При использовании синтаксиса controller as вам будет намного проще создавать директивы, в которых вся директива отвечает за один объект, и избегать ловушки наличия директивы, которая принимает слишком много параметров и берет на себя более чем одну ответственность.

В краткосрочной перспективе может показаться, что создание многих директив - это больше работы, чем просто наличие нескольких шаблонов, но на практике ваш код становится намного более проверяемым и поддерживаемым.

Лучшие модульные директивы могут функционировать независимо друг от друга, то есть они могут быть единственным компонентом на странице при наличии единого объекта данных. Чем ближе вы можете перейти к директиве, которая может соответствовать объекту, то меньше сложный код.

Answer 3

На мой взгляд, использование директив для модуляции углового шаблона может быть хорошим вариантом, чем ng-include. Но вам нужно структурировать свой шаблон таким образом, чтобы мы не закончили создавать слишком много директив. Вы можете рассмотреть ниже подход к этому

1. Divide шаблону в сегментах, как заголовок, колонтитул, слева направо навигация и т.д.

2. Создание контроллеров, которые будут содержать возможности для смежных областей в шаблоне.

3. Создать директиву для каждого раздела шаблона и ввести в него связанный с ним контроллер.

4. Создайте общую директиву, которая будет загружать соответствующий каталог по требованию. Например. если вы хотите сохранить скрытую скрытую навигацию в течение некоторого времени, выполните здесь такое условие.

5. Уменьшить код до минимальных строк и загрузить их при необходимости.

Таким образом, вы можете разделить нагрузку DOM на различные столбы, такие как директивы. Надеюсь это поможет. Счастливое кодирование!