CC BY
9
ОБРАЗОВАНИЕ
Козлов А.А., Батищев А.В.
ОБЗОР ВОЗМОЖНОСТЕЙ БИБЛИОТЕКИ СОЗДАНИЯ КОМПОНЕТОВ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА С ПОМОЩЬЮ СРЕДСТВ ANGULARJS 1.X
Орловский государственный университет им. И. С. Тургенева
Ключевые слова: пользовательский интерфейс, библиотека, фреймворк, web-приложение, компонент.
Key words: user interface, library, framework, web application, component.
Аннотация: в статье рассматриваются возможности библиотеки создания компонентов пользовательского интерфейса AngularJS 1.x. Авторами приводится описание основных инструментов и особенностей библиотеки, а также приводятся основные принципы построения web-приложения с помощью средств обозреваемой библиотеки.
Abstract: The article considers the capabilities of the AngularJS 1.x user interface component creation library. The authors describe the basic tools and features of the library, as well as the basic principles of building web application using the tools of the AngularJS 1.x library.
AngularJS - фреймворк для динамических веб-приложений. Он позволяет использовать HTML в качестве языка шаблонов и расширять синтаксис HTML, чтобы ясно и кратко выражать компоненты приложения. Связывание данных и внедрение зависимостей позволяют устранить большую часть кода, который в противном случае пришлось бы писать. И все это происходит в браузере, что делает данный фреймворк идеальным дополнением для любой архитектуры приложения.
AngularJS предоставляет возможность использовать декларативный подход к разработке, когда речь идет о создании интерфейсов и соединении компонентов программного обеспечения, в то время как императивный подход отлично подходит для выражения бизнес -логики.
AngularJS использует следующие основные принципы:
- Связывание данных. Большинство систем связывают данные только в одном направлении: они объединяют компоненты шаблона и модели вместе в представление. При изменении данных не происходит
изменений в представлении данных. Хуже того, любые изменения, которые пользователь вносит в представление, не отражаются в модели. Это означает, что разработчик должен написать код, который постоянно синхронизирует представление с моделью и модель с представлением. AngularJS работает по-другому. Сначала шаблон (который является не компилированным HTML вместе с любой дополнительной разметкой или директивами) компилируется в браузере. Любые изменения в представлении немедленно отражаются в модели, а любые изменения в модели распространяются на представление. Модель является единственным источником состояния приложения, значительно упрощающим разработку. Можно сказать, что представление является простой проекцией модели.
- Использование контроллеров. В AngularJS контроллер является функцией JavaScript (типа/класса), использующейся для расширения экземпляров областей действий, за исключением корневой области.
- Использование сервисов. Сервисы AngularJS являются заменяемыми объектами, которые связаны друг с другом с помощью внедрения зависимостей (DI). Использовать сервисы необходимо для организации и совместного использования кода в разрабатываемом приложении. Экземпляр сервиса создается только при появлении зависимости компонента от сервиса. Таким образом реализовано «ленивое» создание экземпляра сервиса. Также сервис является «синглтоном», т.е. каждый компонент, зависящий от сервиса, получает ссылку на один экземпляр, сгенерированный фабрикой сервисов.
- Области действия. Область действия - это объект, который относится к модели приложения. Область действия является контекстом выполнения для выражений. Области действий располагаются в иерархической структуре, которая имитирует структуру DOM приложения. Области действий могут «наблюдать» выражения и распространять события.
- Использование шаблона разработки «Внедрение зависимостей». Внедрение зависимостей (DI) - это шаблон разработки программного обеспечения, в котором рассматривается то, как компоненты получают свои зависимости. Подсистема инжекторов AngularJS отвечает за создание компонентов, разрешение их зависимостей и предоставление их другим компонентам по запросу.
- Шаблоны AngularJS. В AngularJS шаблоны создаются с использованием HTML, который содержит специфичные для AngularJS элементы и атрибуты. AngularJS объединяет шаблон с информацией из модели и контроллера для визуализации динамического представления, которое пользователь видит в браузере.
- Выражения AngularJS. Выражения AngularJS - это JavaScript-подобные фрагменты кода, которые в основном помещаются в интерполяционные привязки, а также используются непосредственно в атрибутах директив.
- Интерполяция и связывание данных. Разметка интерполяции со встроенными выражениями используется AngularJS для обеспечения привязки данных к текстовым узлам и значениям атрибутов.
- Использование фильтров. Фильтры форматируют значение выражения для отображения пользователю. Их можно использовать в шаблонах представления, контроллерах или сервисах. AngularJS поставляется с набором встроенных фильтров, но также легко определить и свой собственный.
- Использование форм. Элементы управления (input, select, textarea) - это способы ввода данных пользователем. Форма - это набор элементов управления с целью группировки связанных элементов управления. Форма и элементы управления предоставляют функционал проверки корректности данных, так что пользователь может быть уведомлен о неверном вводе перед отправкой формы. Это обеспечивает лучшее взаимодействие с пользователем, чем только проверка на стороне сервера, поскольку пользователь получает мгновенный ответ содержащий способ исправления ошибки. Необходимо иметь в виду, что, хотя проверка на стороне клиента играет важную роль в обеспечении хорошего пользовательского опыта, ее можно легко обойти и, таким образом, полностью ей доверять нельзя. Проверка корректности данных на стороне сервера необходима для надежного приложения.
- Использование директив. Директивы являются маркерами элемента DOM (атрибута, имени элемента, комментария или класса CSS), которые сообщают HTML-компилятору AngularJS «присоединить» указанное поведение к элементу DOM.
- Использование компонентов. В AngularJS компонент - это особый вид директивы, которая использует более простую конфигурацию, подходящую для структуры приложения на основе компонентов. Это облегчает написание приложения способом, аналогичным использованию веб-компонентов или новому стилю архитектуры приложений Angular. Компоненты в AngularJS предоставляют следующие преимущества:
1. Более простая конфигурация, чем обычные директивы;
2. Возможность использования лучших практик разработки;
3. Оптимизация под компонентную архитектуру приложения;
4. Более простое обновление до более новых версий фреймворка.
- Маршрутизатор компонентов. При разработке приложения на AngularJS следует придерживаться строгой иерархии компонентов. Каждый компонент является изолированной частью приложения, которая отвечает за свой собственный пользовательский интерфейс и имеет четко определенный программный интерфейс с компонентом, который его содержит.
- Модульность. У большинства приложений есть основной метод, который создает экземпляры и связывает воедино различные части приложения. Приложения AngularJS не имеют основного метода. Вместо этого модули декларативно указывают, как приложение должно быть загружено. У этого подхода есть несколько преимуществ:
1. Декларативный процесс легче для понимания;
2. Код приложения может быть представлен в виде повторно используемых модулей;
3. Модули могут быть загружены в любом порядке (или даже параллельно), так как модули задерживают выполнение;
4. Модульные тесты загружают только соответствующие модули, что увеличивает скорость работы тестов;
5. Сквозные тесты могут использовать модули для переопределения конфигурации.
- HTML-компилятор. HTML-компилятор AngularJS позволяет разработчику «обучить» браузер новому синтаксису HTML. Компилятор позволяет «присоединять» поведение к любому элементу или атрибуту HTML и даже создавать новые элементы или атрибуты HTML с настраиваемым поведением. Компилятор - это сервис AngularJS, который исследует DOM в поисках атрибутов. Процесс компиляции происходит в два этапа:
1. Исследовать DOM и собрать все директивы. Результатом является функция связывания;
2. Объединить директивы с областью действия и создать представление в реальном времени. Любые изменения в модели области отражаются в представлении, а любые взаимодействия пользователя с представлением отражаются в модели области.
Исследовав основные компоненты и принципы, использующиеся в AngularJS, можно сделать следующие выводы:
- разрабатываемое приложение должно быть компонентно-ориентированным, что позволит разделить ответственность по отображению многих частей пользовательского интерфейса между набором обособленных компонентов;
- код приложения должен быть разделен на модули;
- для соблюдения строгой иерархии компонентов приложения должен быть применен маршрутизатор компонентов, что позволит приложению быть более структурированным и отображать в один момент времени только те компоненты, которые действительно необходимы;
- для повторного использования некоторых частей кода приложения должны использоваться сервисы;
Представленные выводы являются основой надежного web-приложения, реализованного с помощью средств AngularJS.
Список литературы
1. Современный учебник JavaScript [Электронный ресурс]. - Режим доступа: https://learn.javascript.ru/ (дата обращения 10.02.2020)
2. Учебник JavaScript [Электронный ресурс]. - Режим доступа: https://javascript.ru/tutorial (дата обращения 10.02.2020)
3. AngularJS: Developer Guide [Электронный ресурс]. - Режим доступа: https://docs.angularjs.org/guide (дата обращения 10.02.2020)
4. JQuery учебник [Электронный ресурс]. - Режим доступа: http://www.wisdomweb.ru/JQ/jquery-first.php
Колесникова С.Г.
СОЦИОКУЛЬТУРНЫЕ АСПЕКТЫ ИНФОРМАТИЗАЦИИ СИСТЕМЫ ВЫСШЕГО ОБРАЗОВАНИЯ
Воронежский экономико-правовой институт
Ключевые слова: Социокультурные аспекты информатизации, информационная культура человека, профессионально-социальная адаптация в постоянно обновляющихся информационных условиях.
Keywords: Socio-cultural aspects of informatization, human information culture, professional and social adaptation in a constantly updated information environment.
Аннотация: В данной статье предпринимается попытка выделения основных социокультурных аспектов процесса информатизации ВПО и анализа их влияния на подготовку современных специалистов.
Abstract: This article attempts to highlight the major socio-cultural aspects of the process of informatization of HPE and the analysis of their impact on the training of modern specialists.
Огромный прогресс в компьютерной технике и информационных технологиях (ИТ), начавшийся в 90-х годах прошлого века, создал
