Для чего нужен angular

AngularJS
Тип	фреймворк , библиотека JavaScript и библиотека функций
Разработчик	Google
Написана на	JavaScript[1]
Первый выпуск	20 октября2010
Аппаратная платформа	Web Platform[d]
Последняя версия	1.7.8 ( 11 марта2019 ) [2]
Лицензия	лицензия MIT[3][4]
Сайт	angularjs.org
Медиафайлы на Викискладе

AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений [5] . Его цель — расширение браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.

Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.

Содержание

История разработки [ править | править код ]

AngularJS разработан в 2009 году Мишко Хевери и Адамом Абронсом в Brat Tech LLC как программное обеспечение позади сервиса хранения JSON-данных, измеряющихся мегабайтами, для облегчения разработки корпоративных приложений. Сервис располагался на домене «GetAngular.com» и имел нескольких зарегистрированных пользователей, прежде чем они решили отказаться от идеи бизнеса и выпустить Angular как библиотеку с открытым исходным кодом.

Абронс покинул проект, но Хевери, работающий в Google, продолжает развивать и поддерживать библиотеку с другими сотрудниками Google Игорем Минаром и Войта Джином.

В марте 2014 было объявлено о начале разработки AngularJS 2.0 [6] . Новая версия писалась с нуля на TypeScript и очень сильно отличалась от предыдущей, поэтому позже было решено развивать её как отдельный фреймворк с названием Angular. Angular 2 был выпущен 15 сентября 2016 года [7] , тогда как первая версия продолжила развиваться отдельно как AngularJS.

Философия Angular [ править | править код ]

AngularJS спроектирован с убеждением, что декларативное программирование лучше всего подходит для построения пользовательских интерфейсов и описания программных компонентов [8] , в то время как императивное программирование отлично подходит для описания бизнес-логики [9] . Фреймворк адаптирует и расширяет традиционный HTML, чтобы обеспечить двустороннюю привязку данных для динамического контента, что позволяет автоматически синхронизировать модель и представление. В результате AngularJS уменьшает роль DOM-манипуляций и улучшает тестируемость.

Цели разработки [ править | править код ]

• Отделение DOM-манипуляции от логики приложения, что улучшает тестируемость кода.
• Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода. [10][11]
• Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.
• Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.

Angular придерживается MVC-шаблона проектирования и поощряет слабую связь между представлением, данными и логикой компонентов. Используя внедрение зависимости, Angular переносит на клиентскую сторону такие классические серверные службы, как видозависимые контроллеры. Следовательно, уменьшается нагрузка на сервер и веб-приложение становится легче.

Популярные встроенные Angular-директивы [ править | править код ]

С помощью директив AngularJS можно создавать пользовательские HTML-теги и атрибуты, чтобы добавить поведение некоторым элементам. [12]

ng-app Объявляет элемент корневым для приложения. [13] ng-bind Автоматически заменяет текст HTML-элемента на значение переданного выражения. ng-model То же, что и ng-bind, только обеспечивает двустороннее связывание данных. [14] Изменится содержимое элемента — ангуляр изменит и значение модели. Изменится значение модели — ангуляр изменит текст внутри элемента. ng-class Определяет классы для динамической загрузки. ng-controller Определяет JavaScript-контроллер для вычисления HTML-выражений в соответствии с MVC. [15] ng-repeat Создает экземпляр DOM для каждого элемента из коллекции. [16] ng-show и ng-hide Показывает или скрывает элемент, в зависимости от значения логического выражения. ng-switch Создаёт экземпляр шаблона из множества вариантов, в зависимости от значения выражения. ng-view Базовая директива, отвечает за обработку маршрутов [17] , которые принимают JSON перед отображением шаблонов, управляемых указанными контроллерами. ng-if Удаляет или создаёт часть DOM-дерева в зависимости от значения выражения. Если значение выражения, назначенного ngIf, равно false, элемент удаляется из DOM, иначе — вновь клонированный элемент вставляется в DOM. [18]

Также существует возможность создавать настраиваемые директивы, используя в том числе шаблоны в теге script. [19] [20]

Двустороннее связывание данных [ править | править код ]

Двустороннее связывание данных в AngularJS является наиболее примечательной особенностью, и уменьшает количество кода, освобождая сервер от работы с шаблонами. Вместо этого, шаблоны отображаются как обычный HTML, наполненный данными, содержащимися в области видимости, определённой в модели. Сервис $scope в Angular следит за изменениями в модели и изменяет раздел HTML-выражения в представлении через контроллер. Кроме того, любые изменения в представлении отражаются в модели. Это позволяет обойти необходимость манипулирования DOM и облегчает инициализацию и прототипирование веб-приложений [21] .

Плагин для Chrome [ править | править код ]

В июле 2012 года команда Angular выпустила плагин для браузера Google Chrome под названием Batarang [22] , который облегчает отладку веб-приложений, построенных на Angular. Расширение позволяет легко обнаруживать узкие места и предлагает графический интерфейс для отладки приложений [23] .

Версии [ править | править код ]

Последняя стабильная на данный момент версия AngularJS — 1.7.6, выпущенная в январе 2019 года [24] .

Почитал в интернете, но так и не понял, что он из себя представляет и какова сфера его применения. Для взаимодействия с сервером использую Node.js для клиента jQuery. Но в каждой второй вакансии обязательно знание Ангуляра, а значит, что зачем-то он таки нужен. Собственно вопрос, как лично вы на практике используете Ангуляр и в чём заключается его важность и незаменимость ?

Объяснения из вкипедий, аля "для построения одностраничных веб-приложений" вообще ни о чём мне не говорят.

Закрыт по причине того, что вопрос слишком общий участниками Grundy, aleksandr barakin, user194374, Kromster says support Monica, Denis 9 дек ’16 в 6:42 .

Пожалуйста, исправьте вопрос так, чтобы он описывал конкретную проблему с достаточной детализацией для определения адекватного ответа. Не задавайте сразу несколько вопросов. См. «Как задать хороший вопрос?» для прояснения ситуации. Если вопрос можно переформулировать согласно правилам, изложенным в справке, отредактируйте его.

2 ответа 2

На счет ангуляра в вакансиях — это на самом деле очень смешно. В моём опыте был очень забавный случай, когда меня пригласили устраиваться на работу, где в требованиях был Angular. Работодатель мне и говорит:

— Мы тут разрабатываем сайты на битриксе нашим клиентам

— Зачем? Ты что не знаешь что такое битрикс? Многостраничные, конечно

— Подождите, какие сайты, какой битрикс? У вас в вакансии было написано знание angular js

— А ты что, не знаешь? Ну ничего, научим

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

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

jQuery — библиотека, т.е. набор возможностей для разработки. jQuery был создан для облегчения взаимодействия с DOM документа посредством запросов, похожих на css-селекторы и в дальнейшем развился в толстую библиотеку. Но в нынешних реалиях существуют одностраничные приложения, в которых происходит очень много запросов в DOM и использовать jQuery для создания архитектуры такого приложения — нерационально, иначе придётся делать крепкую оптимизацию взаимодействия в DOM’ом, что усложнит код, и не сильно его ускорит.

Angular это фреймворк, т.е. он предоставляет фундамент для веб-разработки. В одностраничных приложениях он может оказаться очень кстати, и упрощает это самое взаимодействие с DOM’ом, потому что, грубо говоря, часть его кода находится в самом html-документе. Лично моё отношение к такому подходу больше отрицательное, чем положительное, хоть и MVC люблю. Но это скорее дело вкуса. Для одностраничных приложений я использую React (еще одна модная библиотека), который кстати, сейчас так же требуют в вакансиях (вместе с Angular и jQuery, ага)

В какой-то момент вы решаете написать веб-приложение, в котором абсолютно все работает на AJAX запросах, страница никогда не перезагружается, а интерфейс напоминает полноценное настольное приложение, а не традиционный сайт. Вы попытаетесь сделать все при помощи простого JavaScript и пары десятков jQuery плагинов, и очень быстро написанный код станет невозможно поддерживать, невозможно читать и невозможно править.

Чтобы избежать такой катастрофической ситуации, вам понадобится инструмент, предоставляющий жесткую структуру кода и соглашения о написании приложений, а также готовые решения для известных проблем (например, для двусторонней связи переменной в коде и текста на странице, выводящего значение этой переменной). Этот инструмент – JavaScript MVC (или аналоги MVC) фреймворки.

Есть большая вероятность, что вам не придётся использовать JS фреймворки ближайшие месяцы иили годы. Область их применения довольно специфична: так называемые одностраничные приложения (Single Page Applications, SPA). Типичные примеры: Google Drive, Gmail, Evernote. Но даже в тех случаях, когда стоит задача написать одностраничное приложение, не всегда имеет смысл использовать полноценный JavaScript фреймворк: всё зависит от того, насколько динамичный и сложный UI вы пытаетесь построить.

Тем не менее популярность подобных инструментов как никогда высока, и, как минимум, знать об их существовании стоит. Рассказать обо всех доступных варинтах за раз невозможно, поэтому в этой серии статей мы рассмотрим фреймворк Angular.js. Если вас интересуют альтернативные решения, то вы можете посмотреть на них на сайте http://todomvc.com/ – авторы этого проекта реализуют одно и тоже приложение на разных фреймворках, чтобы разработчикам было легче выбрать наиболее подходящий для них.

Почему Angular.js?

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

Angular.js на данный момент является самым популярным фреймворком, разработка которого поддерживается парнями из Google. Помимо богатой стандартной библиотеки, для "ангуляра" написано много пользовательских расширений, с частью которых мы познакомимся в пределах этой серии статей. Есть даже специальный фреймворк поверх Angular.js, который значительно облегчает написание кроссплатформенных мобильных приложений: http://ionicframework.com.

Что насчёт Angular.js 2.0?

Текущая версия Angular.js, на которой будет основан этот цикл статей – 1.3. Разработчики заявили, что версия 2.0, которая выйдет неизвестно когда (но не раньше чем через год-полтора), будет несовместимой с текущей версией фреймворка, но при этом сохранит большинство концепций, заложенных в него. Так же разработчики обещают поддерживать версии 1.x на протяжении нескольких лет после релиза 2.0.

Это означает, что ещё как минимум 2 года Angular.js 1.x будет по-прежнему доминировать, на нём по-прежнему написаны тысячи приложений и множество вакансий (особенно в Европе) указывают именно этот фреймворках в требованиях. Конечно, в какой-то момент вам придётся потратить пару часов на то, чтобы разобраться с новой версией 2.0 и, скорее всего, пару дней на переход с 1.x на 2.0. Тем не менее, знания Angular.js не будут выброшены на помойку, ведь, как вы уже знаете, это вопрос не конкретной технологии, а умения разобраться в любой из них и применять для своей задачи 😉

Так что же мы будем делать?

В этой серии статей мы будем писать небольшой менеджер финансов: начнём с настройки рабочего окружения и структуры проекта и закончим работой с API. По пути познакомимся с основными концепциями Angular.js, роутингом, некоторыми сторонними библиотеками и несколькими важными инструментами современной фронтенд-разработки. Под конец серии вы должны уметь писать простые приложения на Angular.js и знать куда смотреть, чтобы научиться разрабатывать более сложные вещи.

Мы рассказываем, как стать более лучшим разработчиком, как поддерживать и эффективно применять свои навыки. Информация о вакансиях и акциях эксклюзивно для более чем 8000 подписчиков. Присоединяйся!

• mkdev
• Менторы
• Специализации
• Статьи

• О проекте
• Что такое менторство
• Как проходит обучение
• Цены
• FAQ
• Impressum

• Аккаунт
• Записаться
• Войти

• Соцсети
• 
• 
• 
• 

© Copyright 2014 — 2019 mkdev | Privacy Policy | Lang: Russian