Использование технологии angularjs для разработки веб-приложений

AngularJS – JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель – расширение браузерных приложений на основе MVC («model-view-controller», «модель-представление-контроллер») шаблона, а также упрощение тестирования и разработки.

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

Для описания интерфейса используется декларативное программирование, а бизнес-логика отделена от кода интерфейса, что позволяет улучшить тестируемость и расширяемость приложений.

Кроме того, AngularJS поддерживает такие функциональности, как Ajax, управление структурой DOM, анимация, шаблоны, маршрутизация и так далее. Мощь фреймворка, наличие богатого функционала во многом повлияла на то, что он находит свое применение во все большем количестве веб-приложений, являясь на данный момент наверное одним из самых популярных JavaScript-фреймворков [2].

Философия Angular

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

Цели разработки: отделение DOM-манипуляции от логики приложения, что улучшает тестируемость кода; отношение к тестированию как к важной части разработки, сложность тестирования напрямую зависит от структурированности кода; разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.

Двустороннее связывание данных

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

Модули

Основной формой организации приложений в AngularJS являются модули. Модуль представляет хранилище различной информации: директив, фильтров, контроллеров. При этом одно приложение может иметь несколько модулей.

Модули позволяют ассоциировать определенный участок html-страницы с приложением AngularJS. Кроме того, модульность архитектуры приложения повышает тестируемость, и мы можем использовать различные части-модули приложения в других приложениях.

Для создания модуля используется метод angular.module(). Этот метод принимает три параметра, два из которых являются обязательными: название модуля, согласно соглашениям о наименовании, набор других модулей в виде строкового массива, от которых данный модуль зависит, конфигурационные настройки модуля.

Контроллеры

Для создания контроллера используется метод controller (name, constructor), который определен у объекта Module. Первый параметр передает имя контроллера, а второй – функцию, которая выполняет настройку контроллера. Эту функцию еще называют конструктором.

AngularJS предоставляет ряд встроенных сервисов, название которых начинается с символа $. В функции контроллера в качестве параметра передается сервис $scope, через который контроллер передает данные в представление (рисунок 1).

 

Рисунок 1 – Схема MVC шаблона

Источник: собственная разработка автора на основании данных [1, c. 51].

 

Чтобы применить контроллер к определенному участку разметки html, надо использовать директиву ng-controller. После этого данный кусок разметки html будет обозначать представление контроллера.

Директивы AngularJS

В AngularJS определено более 50 встроенных директив. Они охватывают широчайший спектр функциональностей, которые востребованы во многих веб-приложениях: привязка данных, валидация форм, генерация шаблонов, обработка событий, управление html-элементами.

В AngularJS присутствуют следующие директивы:

  1. директива ng-repeat;
  2. директивы стилизации и управления элемента (ng-style, ng-class, ng-class-even, ng-class-odd, ng-hide, ng-show, ng-if);
  3. директивы обработки событий (ng-submit, ng-copy, ng-dbclick, ng-click, ng-mousedown, ng-mouseup, ng-mouseleave, ng-keydown, ng-keyup).

Фильтры

Фильтры позволяют провести некоторую предобработку перед выводом данных на страницу, например, отсортировать или как-то изменить набор данных.

Общий способ использования фильтров: {{expression | filter}}.

Для изменения данных можно воспользоваться фильтрами: изменения регистра, форматирование чисел, форматирование валюты, форматирование дат.

Работа со структурой DOM

Подобно ряду многих других JS-фреймворков и библиотек AngularJS позволяет работать со структурой DOM (Document Object Model, «объектная модель документа») html-страницы: то есть добавлять, удалять, изменять html-элементы. Подобная функциональность реализована с помощью специального API. Данное API реализовано в виде методов, которые позволяют управлять html-элементом.

Сервисы

Сервисы AngularJS представляют специальные объекты или функции, выполняющие некоторые общие для всего приложения задачи. В AngularJS имеются ряд встроенных сервисов, такие как $http, $q и ряд других. Кроме того, имеется возможность создавать свои сервисы для выполнения специфических задач.

Потенциально опасные данные

При работе с данными какая-то часть может представлять набор кода html/javascript, что может нести потенциальные риски для пользователей. Но в AngularJS существуют механизмы, которые позволяют уменьшить риск, который несут в себе подобные данные. Главную роль в данном случае будут играть два сервиса: $sce: удаляет потенциально опасные элементы и атрибуты из кода html и $sanitize: заменяет потенциально опасные символы эскейп-последовательностями.

По умолчанию AngularJS использует такую функциональность, как SCE (strict contextual escaping), которая защищает от привязки к потенциально опасному коду html [1, c. 39].

Экономическая эффективность. Преимущества технологии AngularJS

На сегодняшний день, сложно представить разработку одностраничных приложений без AngularJS. После запуска в 2009 году, эта технология быстро стала популярной и в настоящее время не уступает остальным технологиям и фреймворкам. Рассмотрим преимущества этой технологии для разработчика.

  1. декларативный стиль кода (при создании шаблонов в AngularJS используется декларативная парадигма программирования, это делает код более легковесным, облегчает его чтение и поддержку);
  2. использование директив (директивы позволяют сконцентрироваться на проработке логики и работать более продуктивно, их можно использовать повторно, что повышает читабельность кода);
  3. высокая скорость разработки (при правильном подходе с помощью AngularJS можно быстро разрабатывать даже большие приложения);
  4. модульность (в AngularJS можно организовать приложение из отдельных модулей, они могут как зависеть друг от друга, так и быть автономными; благодаря встроенному механизму зависимостей AngularJS сам распознает ситуацию, когда нужно предоставить объекты, предоставляет их и связывает объекты между собой);
  5. наличие готовых решений (что важно, для AngularJS существует огромное количество готовых решений, которые позволяют решать довольно разнообразные задачи, используя уже готовые модули; из-за отсутствия жесткой структуры проекта в AngularJS можно создавать приложения с достаточно разнообразной структурой, также можно использовать AngularJS для мобильной разработки);
  6. простота тестирования (части приложения располагаются внутри модулей AngularJS, которыми легко манипулировать, такая разбивка на модули позволяет загружать только нужные службы и эффективно выполнять автоматическое тестирование) [2].

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

Примеры использования технологии AngularJS

  1. The Guardian

Сайт британской газеты существует уже шесть лет и по состоянию на сентябрь 2015 года занимает третье место по посещаемости среди новостных изданий, которые доступны онлайн. Интерфейс представляет собой AngularJS приложение, написанное в соответствии с ES 2015, последним стандартом JavaScript (рисунок 2).

 

 

Рисунок 2 – Сайт британской газеты The Guardian

Источник: собственная разработка автора на основании данных [2].

 

  1. YouTube для PS3

YouTube – видеохостинг, принадлежащий компании Google, стоимость которого оценивают в 70 миллиардов долларов США. У сервиса один миллиард пользователей, что составляет треть пользователей Интернета в мире. Приложение для PS3 написано с использованием JS-фреймворка AngularJS (рисунок 3).

 

 

Рисунок 3 – Приложение PS3 видеохостинга YouTube

Источник: собственная разработка автора на основании данных [2].

 

Список литературы

 

  1. Козловский, П. Разработка веб-приложений с использованием AngularJS / П. Козловский. – М.: ДМК Пресс, 2014. – 394 с.
  2. AngularJS [Электронный ресурс] – Режим доступа: https :/ / ru. wikipedia. org /wiki/AngularJS – Дата доступа: 02.03.2016.

 

The article considers the main features of technology of AngularJS. Investigated its main advantages for development of web applications. Gave examples of web application and dynamic websites, which were created by means of this technology.

 

Дударевич Евгений Сергеевич