Ввод данных презентации в угловой контроллер?

Question

Получил webapp Я строию в Угловом.

Это приложение позволяет пользователю авторизовать учетные записи, представляя конкретные инструкции на основе выбора пользователей.

Я реализовал это как HTML, который отображается или скрывается на основе значений в модели, поэтому для 3 разных вариантов у меня есть 3 разных набора разделов HTML, которые похожи, но с разными текстами.

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

Делает ли данные презентации в контроллер нарушением принципов Углового?

Answer 1

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

• нг-связывания - Put это на span/div. Простой & работает, чтобы связать модель с дисплеем

• нг-переключателя, нг-если, нг скрывать, нг-шоу - Работа условно показать элемент

• пользовательские директивы - - используйте это, если вы хотите изменить поведение элемента или, если вы хотите изменить dom на основе шаблона. Если вы используете «ng-transclude», то содержимое элемента, в который вы попадете, будет включен в результат. Это может быть очень элегантно, но лучше всего работает, когда у вас есть один формат. Я могу привести примеры, но документация углов также имеет отличные примеры.

• service - Обычно я использую это только для предоставления данных. Это может быть через успокоительный api и $ resource или через $ http calls. В любом случае, я бы не рекомендовал делать гораздо больше, чем загружать/сохранять данные здесь.

• $ Метод Объем - Другими словами:

  $ scope.myMethod = функция (х, у, г) {/ * код решения решений на основе модели * /}

  Затем вы можете вызвать этот метод из одного из предыдущих либо с помощью предварительно созданной директивы (ng-show, и т. Д.), Либо с помощью настраиваемой директивы, которая управляет dom для того, как вы ожидаете.

• нг-связывать-HTML - Последний вариант я знаю, чтобы предложить, чтобы использовать эту директиву в сочетании с $sce службы, чтобы связать все, что вы хотите, чтобы DOM. Если вы привязываете что-то с угловым кодом, обязательно используйте службу $compile. Я вообще не одобряю этот подход, кроме как в крайнем случае, потому что ему сложно найти, где происходят элементы в DOM, и он может сделать отладку + тестирование реальной боли. Тем не менее, эти инструменты не существовали бы, если бы люди не нуждались в них.

Я уверен, что это не полно, а, возможно, у других есть предложения, но именно с этого я и начну. Удачи!

Answer 2

Я бы поместил текстовые данные в отдельный угловой сервис. В этой статье приведен пример: http://joelhooks.com/blog/2013/04/24/modeling-data-and-state-in-your-angularjs-application/

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