Обзор архитектуры AngularJS

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

Архитектура

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

MVC - модель, вид, контроллер

Шаблон MVC расшифровывается как шаблон Model View Controller.

  • модель

Это самый низкий уровень архитектуры. Он отвечает за хранение и поддержание данных приложения. Данные хранятся в течение всего жизненного цикла страницы, а иногда даже между страницами. Модель обновляется сама на основании инструкций, полученных от контроллера.

  • Посмотреть

Представление является лицевой стороной приложения. Это уровень представления архитектуры, отвечающий за отображение данных пользователю. Он содержит полный код страниц пользовательского интерфейса на любом языке, совместимом с браузером, обычно HTML. Вид запускается соответствующим контроллером. Представление отправляет запросы своему контроллеру на основе взаимодействия пользователя с приложением. Затем контроллер регенерирует представление на основе ответа, полученного от сервера.

  • контроллер

Контроллер - это мозг обработки, стоящий за представлением и моделью. Требуются решения для генерации, регенерации или разрушения представления и модели. Все бизнес-операции и логика кода написаны внутри контроллера. (Некоторые разработчики предпочитают писать бизнес-логику в самой модели). Контроллер также отвечает за отправку запросов на сервер и получение ответа. Затем он обновляет представление и модель на основе ответа. Короче, контроллер все контролирует.

Архитектура MVC может быть графически представлена ​​через изображение ниже.

MVC является надежным, потому что он основан на принципе разработки программного обеспечения разделения интересов. Существует несколько контроллеров, которые управляют определенными наборами данных и управляют соответствующими представлениями и моделями. Таким образом, логика приложения отделена от уровня пользовательского интерфейса.

MVC в AngularJS

Это все о MVC и его принципах. Как эти принципы реализованы в AngularJS? Дай нам понять.

  • Scope - Scope - это модель, которая содержит данные приложения. Переменные области прикрепляются к DOM, а свойства переменных доступны через привязки.
  • HTML с привязкой данных - представление в AngularJS не является обычным HTML. Это HTML с привязкой к данным. Привязка данных помогает отображать динамические данные в тегах HTML. Таким образом, модель регулярно обновляет DOM.
  • ngController - директива ngController отвечает за взаимодействие между моделью, представлением и бизнес-логикой. Класс контроллера, указанный в директиве ngController, управляет областью действия и представлением.

Концептуальный обзор

Итак, теперь мы понимаем, что AngularJS построен на архитектуре MVC. В том, что все? В игре больше ничего нет? Конечно, есть.

Есть несколько важных понятий, которые нужно понять, чтобы понять поведение приложений AngularJS. Давайте разберемся с ними.

  • Шаблоны

Шаблоны - это элементы HTML, а также специфичные для AngularJS элементы и атрибуты. Динамичность в приложениях AngularJS достигается путем объединения шаблона с данными из модели и контроллера.

  • Директивы

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

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

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

  • Маршрутизация

Приложения AngularJS, являющиеся одностраничными приложениями (SPA), уделяют большое внимание маршрутизации между страницами. AngularJS имеет надежный механизм маршрутизации, который выполняет сопоставление URL-адресов из списка маршрутов, указанных в маршрутизаторе, связанном с компонентом. Это означает, что всякий раз, когда браузер запрашивает URL-адрес, отображается связанный дочерний компонент, а не целая страница.

  • Сервисы

Контроллер связан с представлением. Это означает, что хорошей практикой является написание только того кода внутри контроллера, который логически полезен для его представления. Независимая от вида логика может быть перемещена в другое место, чтобы ее можно было использовать и другими контроллерами.

Сюда приходят Услуги в действии. Сервисы отделяют повторно используемую бизнес-логику от конкретной логики. В этом случае конкретная логика представления находится внутри определенных контроллеров, тогда как общая бизнес-логика является общей для всех контроллеров.

Как общее правило большого пальца, код для доступа к внутренним данным также написан в сервисах.

  • Внедрение зависимости

Теперь, когда мы переместили независимые от представления логики в общее местоположение, как мы контролируем разрешения для доступа к общим службам? Это делается с помощью внедрения зависимостей (DI). Внедрение зависимостей - это шаблон разработки программного обеспечения, который имеет дело с тем, как создаются объекты и как они получают свои зависимости. Все в AngularJS, от директив до контроллеров и сервисов, и почти все, подключено через DI.

Интересный факт архитектуры AngularJS

AngularJS был назван AngularJS из-за угловых скобок в тегах HTML. Проект был разработан, чтобы сделать HTML более динамичным и удобным для данных, и поэтому разработчики решили назвать его в угловых скобках в HTML.

Заключение - AngularJS Architecture

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

Рекомендуемые статьи

Это руководство по архитектуре AngularJS. Здесь мы обсуждаем архитектуру, MVC в angularjs и концептуальный обзор. Вы также можете просмотреть наши другие предлагаемые статьи, чтобы узнать больше -

  1. Карьера в AngularJS
  2. AngularJS Интервью Вопросы
  3. Что такое Backbone.js?
  4. Программное обеспечение Data Mining

Категория:

Разработка программного обеспечения