Если вы еще не пробовали Angular, вам не хватает того, почему люди говорят, что JavaScript — самый гибкий язык в мире.
Angular — единственная структура, которая не делает MVC похожей на помаду для свиньи.
В настоящее время большинство фреймворков представляют собой просто набор существующих инструментов. Они представляют собой интегрированный набор инструментов, но не очень элегантный. Angular — это фреймворк следующего поколения, в котором каждый инструмент был разработан для совместной работы с любым другим инструментом.
Вот 10 причин, почему вы должны использовать Angular сегодня.
1. MVC сделано правильно
Большинство фреймворков реализуют MVC, предлагая вам разделить ваше приложение на компоненты MVC, а затем требуют написать код, чтобы снова связать их вместе. Это много работы. Angular реализует MVC, предлагая вам разделить ваше приложение на компоненты MVC, а затем просто позволить Angular сделать все остальное. Angular управляет вашими компонентами за вас, а также служит конвейером, который их соединяет.
Поскольку Angular выступает в роли посредника, разработчики также не будут испытывать искушение писать ярлыки между компонентами, которые нарушают абстракции, чтобы облегчить их подгонку.
2. Декларативный пользовательский интерфейс.
Angular использует HTML для определения пользовательского интерфейса приложения. HTML является декларативным языком, который является более интуитивным и менее сложным, чем процедурное определение интерфейса в JavaScript. HTML также менее хрупок для реорганизации, чем интерфейс, написанный на JavaScript, что означает, что вещи с меньшей вероятностью сломаются. Кроме того, вы можете привлечь гораздо больше разработчиков пользовательского интерфейса, когда представление написано в HTML.
HTML также используется для определения исполнения приложения. Специальные атрибуты в HTML определяют, какие контроллеры использовать для каждого элемента. Эти атрибуты определяют, «что» загружается, а не «как». Этот декларативный подход значительно упрощает разработку приложений в некотором роде WYSIWYG (что вы видите, то и получаете). Вместо того, чтобы тратить время на то, как программа движется и что должно быть загружено в первую очередь, вы просто определяете, что вы хотите, и Angular позаботится о зависимостях.
3. Модели данных POJO
Модели данных в Angular являются простыми старыми объектами JavaScript (POJO) и не требуют посторонних функций получения и установки. Вы можете добавлять и изменять свойства непосредственно на нем и циклически перемещаться по объектам и массивам по желанию. Ваш код будет выглядеть намного чище и интуитивно понятнее, чем задумано матерью-природой.
Традиционные модели данных являются привратниками данных и отвечают за постоянство данных и синхронизацию сервера. Эти модели данных ведут себя как интеллектуальные поставщики данных. Но поскольку модели данных Angular представляют собой простые объекты, они ведут себя скорее как пробковая доска. Пробковая доска — это не что иное, как временное хранилище, где люди могут размещать и извлекать данные. Однако пробковые доски Angular работают в тесном контакте с контроллером и представлением. Чтобы отличить его от традиционного смысла моделей данных, Angular называет их «областями видимости».
Все свойства, найденные в объекте области действия, автоматически привязываются к представлению Angular. То есть Angular спокойно следит за изменениями этих свойств и автоматически обновляет представление.
Область действия не имеет данных для начала и полагается на контроллер для подачи данных в соответствии с потребностями бизнес-логики.
4. Поведение с директивами
Директивы — это способ Angular привнести дополнительную функциональность в HTML. Представьте себе мир, в котором HTML имеет так много богатых элементов (например, <accordion></accordion><grid></grid><lightbox></lightbox> Все, что нужно нашему приложению, — это назначать атрибуты элементам, чтобы получить любую функциональность из коробки.
Директивы достигают этого, позволяя нам изобретать наши собственные элементы HTML. Поместив весь наш код манипулирования DOM в директивы, мы можем отделить их от нашего приложения MVC. Это позволяет нашему приложению MVC заниматься только обновлением представления новыми данными. Как ведет себя впоследствии представление, зависит от директив.
Директивы приходят в виде пользовательских элементов HTML
<myticker></myticker>
пользовательские атрибуты
<div data-myticker></div>
и пользовательские имена классов
<div class="myticker"></div>
позволяя использовать их как обычные элементы HTML.
Директивы предназначены для использования в качестве отдельных элементов многократного использования отдельно от вашего приложения. Фактически, если конкретный элемент становится принятым в стандарте HTML5, это должно быть так же просто, как удалить вашу пользовательскую директиву, и ваше приложение должно вести себя точно так же, без необходимости менять свое приложение.
Помните, как правило, ваш контроллер не должен напрямую манипулировать DOM. Все манипуляции с DOM должны выполняться директивами.
5. Гибкость с фильтрами
Фильтры фильтруют данные до того, как они достигают представления, и могут включать в себя что-то простое: форматирование десятичных разрядов в числе, изменение порядка массива, фильтрацию массива на основе параметра или реализацию разбиения на страницы. Фильтры предназначены для автономных функций, которые отделены от вашего приложения, аналогичны директивам, но касаются только преобразования данных.
Фильтры настолько изобретательны, что можно создать сортируемую таблицу HTML, используя только фильтры, без написания JavaScript.
6. Напишите меньше кода
Все пункты до сих пор означают, что вы пишете меньше кода. Вам не нужно писать свой собственный конвейер MVC. Представление определяется с использованием HTML, что является более кратким. Модели данных проще писать без методов получения / установки. Привязка данных означает, что вам не нужно вводить данные в представление вручную. Поскольку директивы отделены от кода приложения, они могут быть написаны другой командой параллельно с минимальными проблемами интеграции. Фильтры позволяют вам манипулировать данными на уровне представления без смены контроллеров. Да, это своего рода сводный пункт, но написание меньшего количества кода является большой проблемой!
7. DOM манипуляции, где они принадлежат
Традиционно представление модифицирует DOM для представления данных и манипулирует DOM (или вызывает jQuery) для добавления поведения. В Angular код манипулирования DOM должен быть внутри директив, а не в представлении. Angular видит представление как просто еще одну HTML-страницу с заполнителями для данных. Этот способ взглянуть на представление прекрасно сочетается с разработчиками пользовательского интерфейса.
Абстрагируясь от манипуляций с DOM и вызовов jQuery, разработчики пользовательского интерфейса могут сосредоточиться на представлении без этих отвлекающих факторов.
Сделав ваше MVC-приложение исключительно для представления бизнес-данных в виде, и не нужно беспокоиться о манипулировании DOM, разработка веб-приложений неожиданно стала более увлекательной.
8. Поставщики услуг, где они принадлежат
Контроллеры в Angular — это простые функции, которые имеют только одно задание — манипулировать областью действия. Например, вы можете использовать его, чтобы предварительно заполнить данные в области с сервера или реализовать проверки бизнес-логики. В отличие от других сред, контроллеры не являются объектами и не наследуются ни от чего.
Если контроллеры настолько просты, то где выполнять всю тяжелую работу? Angular представляет Сервисы именно для этого.
Услуги это именно то, на что они похожи. Они не связываются с MVC вашего приложения, а просто предоставляют внешний API для предоставления того, что вы хотите, чтобы оно было представлено. Большую часть времени он синхронизируется с сервером для поддержки автономного хранилища данных и предоставляет методы для отправки и извлечения данных на сервер и с сервера. Или его можно использовать для создания службы совместного использования ресурсов, которая позволяет нескольким контроллерам совместно использовать одни и те же ресурсы.
Сервисы предназначены для того, чтобы быть отдельными объектами, отделенными от вашего приложения, и позволяют вашему контроллеру оставаться экономным и выделенным для вида и области действия, которым он назначен. Конечно, внедрение сервисов не требуется, и вполне допустимо сделать небольшой подъём внутри вашего контроллера, чтобы избежать чрезмерной сложности.
9. Контекстная связь
Система PubSub — довольно распространенный инструмент, позволяющий отделить коммуникацию. Большинство реализаций PubSub в сети не учитывают контекст. Иногда требуется, чтобы сообщение PubSub было доступно для чтения только дочерним элементам определенного узла или только для предков конкретного дочернего элемента. Другими словами, иногда вы не хотите, чтобы не связанные компоненты MVC читали ваши сообщения.
Система PubSub в Angular — это как раз то. broadcast()emit()
Но PubSub — не единственный способ связи между контроллерами. На самом деле, если все, что вы делаете, это говорите другим контроллерам обновить их представления при изменении свойства, вы должны полагаться на привязку данных. Мы уже знаем, что представление может быть привязано к свойствам в текущей области. Но я не сказал вам, что области наследуют свойства своих родительских областей. Это означает, что если свойство существует в родительской области, а дочерняя область изменяет его, то все другие области, наследуемые от того же родительского элемента, также увидят ту же модификацию, и их представления будут автоматически обновлены Angular! Этот автоматический способ превосходит использование PubSub в любой день.
10. Модульное тестирование готово
Какое описание Angular будет полным, не говоря уже о готовности к юнит-тестированию? Весь Angular связан между собой инъекцией зависимостей (DI). Это то, что он использует для управления вашими контроллерами и областями действия. Поскольку все ваши контроллеры зависят от DI для передачи этой информации, модульные тесты Angular способны узурпировать DI для выполнения модульного тестирования, вводя фиктивные данные в ваш контроллер и измеряя выход и поведение. На самом деле, у Angular уже есть фиктивный HTTP-провайдер для внедрения поддельных ответов сервера в контроллеры.
Это превосходит более традиционный способ тестирования веб-приложений, создавая отдельные тестовые страницы, которые вызывают один компонент, а затем взаимодействуют с ним, чтобы увидеть, работает ли он.
Эти 10 причин должны дать вам представление о том, почему Angular такой мощный. Не все веб-приложения должны использовать Angular. Например, если вы пишете игру или математически сложную математическую программу, нет никаких причин, по которым Angular будет соответствовать вашей конкретной проблемной области. Но для универсальных веб-приложений оно должно служить жизнеспособной основой для дальнейшего развития.
Комментарии к этой статье закрыты. У вас есть вопрос об Angularjs? Почему бы не спросить об этом на наших форумах ?