AngularJS — JavaScript фреймворк, созданный разработчиками Google и призванный упростить front-end app разработку. И даже, если вам чужда разработка одностраничных приложений, я уверен, вы слышали о нём. Я большой поклонник AngularJS (даже написал о нём книгу), и в этой статье я собираюсь изложить пять причин, почему я на столько его люблю.
#1 Даёт структуру вашему приложению
Обычно, когда вы пишите ваш JavaScript, структура написания кода чётко не определена. В то время как это может работать для не больших приложений, это, очевидно, не подходит для крупномасштабных проектов. Используя AngularJS вы структурируете исходный код по MVC (Model-View-Controller) или MVVM (Model-View-Viewmodel) шаблону. AngularJS — это MVW-фреймворк, где буква W ознозает «Whatever works for you». Вы можете организовать свой код по модулям, что улучшит «testability» и «maintainability» вашего приложения.
#2 Двусторонняя привязка данных
Привязка данных является, безусловно, одной из лучших черт AngularJS. Вы можете декларативно привязывать модели к HTML-элементам страницы. При изменении модели, интерфейс автоматически обновляется, что работает в обе стороны. Это чрезвычайно снижает количество шаблонного кода, который используется, чтоб поддерживать связь между моделью и пользовательским интерфейсом.
#3 Директивы
AngularJS-директивы дают возможность обучать браузер новому синтаксису. Вы можете создавать многократно использующееся пользовательские компоненты с помощью directive API. К примеру, вы хотите создать виджет выбора даты, просто сделайте собственную директиву <data-picker/>. Или хотите причудливый file uploader с индикатором прогресса, создайте <file-upload/> директиву и используйте её где угодно в вашем HTML-коде. Круто, не так ли?
#4 Шаблонизирование с помощью HTML
AngularJS использует HTML для создания шаблонов. Это не только ускоряет процесс разработки, но и позволяет дизайнерам и разработчикам трудиться над одним проектом одновременно. Дизайнеры могут создавать интерфейсы в обычном порядке, в то время как разработчики могут использовать декларативный синтаксис, для связывания пользовательского интерфейса с моделями данных.
#5 Embeddable, Injectable, and Testable
Самое лучшее в AngularJS, это то, что он — хороший командный игрок. Он никогда не требует полной отдачи. Как сообщает официальный сайт, вы можете использовать AngularJS в вашем проекте на столько часто/редко, на сколько вам это нужно. Если вам требуется двусторонние связывание, просто подключите Angular и используйте только эту функцию.
AngularJS поддерживает внедрение зависимостей из коробки. Если вам что-то потребовалось, просто попросите Angular подключить это для вас. Всё так просто!
AngularJS был создан с учётом возможности тестирования ваших приложений. Система зависимостей очень сильно упрощает данный процесс. Кроме того, AngularJS предлагает инструмент под названием «Protractor». Таким образом, код, который вы разрабатывает всегда будет «testable and maintainable».
И это ещё не все! AngularJS также предлагает множество других полезных функций, таких как маршрутизация, фильтры и анимации, которые делают его единственным в своем роде. Но, как по мне, вышеупомянутых пунктов уже достаточно, чтоб полюбить AngularJS всем сердцем!
Комментарии (13)
ingumsky
10.12.2015 02:17+4Простите, а что такого уникального в сочетании «тестируемый и поддерживаемый», что вы решили оставить этот эпитет не переведённым на русский?
erlyvideo
10.12.2015 02:48+4старая и неактуальная хвалебная заметка, лишенная анализа и опыта.
tytar
10.12.2015 04:54+3Прошу прощения за офф.топ и рискуя быть заминусованым, но скажу, в последнее время большенство статей на Хабре\Гиктаймсе в несколько абзацев и с «полужелтыми кричащими заголовками» и не более, а толковый материал, как это было раньше, все реже и реже публикуется.
sim-dev
10.12.2015 07:52+1Между качеством статей (а значит, уровнем авторов) и рьяностью минусования комментариев прослеживается четкая связь.
vintage
10.12.2015 07:55+4#1 Даёт структуру вашему приложению
Зачастую приложение на ангуляре — хтмл-ина, содержащая всю вёрстку, к которой сбоку приклеены директивы. Если у вас и получится в таких условиях хорошая структура, то явно не благодаря фреймворку.
#2 Двусторонняя привязка данных
Зачастую ввод пользователя требуется обрабатывать более хитро, так что двусторонняя привязка тут мало чем помогает. А на helloworld-ах всё красиво, да :-)
#3 Директивы
Да-да, и прокидывайте все параметры этих директив через хтмл или упаси боже через скоуп.
#4 Шаблонизирование с помощью HTML
Программирование с помощью ХТМЛ, точнее :-) Дизайнеры не знают хтмл, а те, что знают — лучше бы не знали. ХТМЛ знают верстальщики, но за ними всё-равно приходится всё переделывать при добавлении поведения, так как у них не хватает компетенции для расстановки директив, биндинга данных и навешивания колбэков.
> Самое лучшее в AngularJS, это то, что он — хороший командный игрок.
Который любезно прячет исключения при вычислении значения биндинга, чтобы не засорять консоль. Ути какой хороший :-) А документация — просто чудо.
omickron
10.12.2015 08:23+1Опасаюсь начать holy war, но очень хочется понять вас лучше.
Поясните, пожалуйста, свои тезисы:
— Зачастую ввод пользователя требуется обрабатывать более хитро, так что двусторонняя привязка тут мало чем помогает.
— прокидывайте все параметры этих директив через хтмл или упаси боже через скоуп.
По первому пункту я безусловно с вами согласен. Никакой фреймворк не научит писать хороший код.
Шаблонирование на html, на мой взгляд, не преимущество, но и недостатком его я бы не назвал. Не знаю, почему автор сделал на нём акцент. То, что после вёрстки нужно разделять код по директивам и вешать обработчики — тоже не понимаю, как может быть иначе.
Подключать AngularJS только ради двустороннего связывания или только ради модулярности я бы не стал. Для этих целей есть специальные инструменты, более лёгкие по весу. Преимущество AngularJS в том, что он объединяет в себе все эти возможности, не требуя других библиотек.
Прятать исключения при вычислении значения, на мой взгляд, правильно.
Представьте себе форму, с привязкой к scope.data.name, scope.data.birthday и т.п. Если data не определён в scope, будет много не нужных исключений.
Специально определять все объекты в scope значит подстраиваться под фреймворк, мне это кажется не удобным.
В то же время, если нужно в каком-то месте залогировать исключение, оберните вычисляемое значение в функцию и пишите в ней в консоль всё, что требуется.
Доки по AngularJS действительно отличные, тут я тоже с вами согласен.vintage
10.12.2015 09:17+1— Зачастую ввод пользователя требуется обрабатывать более хитро, так что двусторонняя привязка тут мало чем помогает.
Валидация, нормализация, троттлинг
— прокидывайте все параметры этих директив через хтмл или упаси боже через скоуп.
Представьте себе директиву с десятком параметров, большая часть из которых вёрстки вообще не касается. При этом эти параметры всё-равно нужно предварительно подготовить в JS, поместив в скоуп. Я не вижу тут преимуществ перед созданием компоненты в самом JS без захламления вёрстки перекладыванием параметров из родительского скоупа во вложенный.
Есть два подхода:
1. шаблон — это вьюшка. этакий декларативный язык программирования, с циклами, условиями и прочими не относящимися к выходному формату вещами
2. вьюшка — это программный код, который может использовать и шаблоны. В шаблонах при этом нет никакой логики — только идентификаторы.
Так вот, разделить программера и верстальщика можно лишь используя второй подход. Первый же приводит к постоянной толкотне вокруг одних исходников. И речь не только о конфликтах при слиянии, но и о банальных «верстальщик боится залазить в код после программера ибо ничего не понятно и всё сломает и с трикороба накопипастит не туда» и «верстальщик опять сделал новый шаблон, надо его опять натягивать».
Очень правильно, особенно заниматься по пол дня отладкой, не понимая что там пошло не так. Ангуляр устроен куда мудрёнее, выражение scope.data.name он распарсит и добавит необходимые проверки так что исключения исключены, а вот выражение scope.getData() он выполнит внутри try {… } catch(e){ 'счастливой отладки, суки' }
То есть специально оборачивать все подряд методы в try-catch — это не подстраиваться под фреймворк, а обеспечить консистентность внутреннего состояния — это подстраиваться?
> Доки по AngularJS действительно отличные, тут я тоже с вами согласен.
Это был сарказм.
ajaxtelamonid
10.12.2015 08:15+2Самое интересное, что если составлять список «почему вам НЕ следует использовать ангуляр», первые три пункта будут неизменными. Ненужная на фронте концепция MVC, часто ненужное, а часто просто вредное двойное связывание и директивы с кошмарным синтаксисом.
StGeass
10.12.2015 08:47Посмотрел на статью, протёр глаза, посмотрел на календарь, снова на статью. Я бы понял такую статью (при её содержательности) в 2012ом, но сейчас? Сейчас это выглядит как призыв слезать с лошадей и смотреть в сторону двигателя внутреннего возгорания, когда вокруг все давно на летающих электрокарах :)
Нет, я конечно сам люблю Ангуляр и использовал в продакшене последние года три, но вот как раз за эти годы продакшена вроде как показали, что многие его плюсы со временем могут обратиться против вас.
igordata
10.12.2015 09:15Пора смириться, что AngularJS либо просто ложится кому-то на душу, либо нет. Конец.
artifex
Понимаю, что «каждая свинья свое болото хвалит», но посмотрите на Redux + React, например. Angular слишком переоценён вами.
rixaman
«Каждый кулик», но тогда смотрите и на Laravel + Vue, например.
aparamonov
Автор — индус. Учитывая аховое состояние подавляющего большинства инженеров в Индии, мне кажется нам стоит порадоваться, что некоторые из них открыли для себя хотя бы ангуляр. И лучше разбирать лапшу на нем, чем на jquery :)