Что такое AngularJS? Архитектура и архитектура Функции

Содержание:

Anonim

Что такое AngularJS?

AngularJS - это фреймворк Model-View-Controller с открытым исходным кодом, который похож на фреймворк JavaScript.

Angular JS, вероятно, является одним из самых популярных современных веб-фреймворков, доступных сегодня. Эта структура используется в основном для разработки одностраничных приложений. Этот фреймворк был разработан группой разработчиков из самого Google.

Благодаря полной поддержке Google и идеям широкого форума сообщества, структура всегда обновляется. Кроме того, он всегда учитывает последние тенденции развития рынка.

В этом руководстве вы узнаете:

  • Возможности AngularJS
  • Архитектура Angularjs
  • Преимущества AngularJS

Возможности AngularJS

Angular имеет следующие ключевые особенности, которые делают его одним из мощных фреймворков на рынке.

  1. MVC - фреймворк построен на известной концепции MVC (модель-представление-контроллер). Это шаблон проектирования, используемый во всех современных веб-приложениях. Этот шаблон основан на разделении уровня бизнес-логики, уровня данных и уровня представления на отдельные разделы. Разделение на разные разделы сделано для того, чтобы с каждым из них было легче справиться.

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

  3. Написание меньшего количества кода - при выполнении манипуляций с DOM требовалось написать много JavaScript для разработки любого приложения. Но с Angular вы будете поражены меньшим объемом кода, который вам нужно написать для манипуляций с DOM.

  4. Готовность к модульному тестированию - дизайнеры в Google не только разработали Angular, но и разработали среду тестирования под названием «Karma», которая помогает в разработке модульных тестов для приложений AngularJS.

Архитектура AngularJS

Angular.js следует архитектуре MVC, диаграмма структуры MVC показана ниже.

Схема архитектуры Angularjs

  • Контроллер представляет собой уровень с бизнес-логикой. Пользовательские события запускают функции, которые хранятся внутри вашего контроллера. Пользовательские события являются частью контроллера.

  • Представления используются для представления уровня представления, который предоставляется конечным пользователям.

  • Модели используются для представления ваших данных. Данные в вашей модели могут быть такими же простыми, как простые объявления. Например, если вы обслуживаете приложение студента, ваша модель данных может иметь только идентификатор студента и имя. Или это также может быть сложно из-за наличия структурированной модели данных. Если вы поддерживаете приложение для владения автомобилем, у вас могут быть структуры для определения самого транспортного средства с точки зрения его мощности двигателя, количества сидячих мест и т. Д.

Преимущества AngularJS

  • Поскольку это среда с открытым исходным кодом, вы можете ожидать, что количество ошибок или проблем будет минимальным.

  • Двусторонняя привязка - Angular.js поддерживает синхронизацию уровня данных и представления. Теперь вам не нужно писать дополнительный код JavaScript, чтобы данные в вашем HTML-коде и ваши данные в дальнейшем синхронизировались. Angular.js автоматически сделает это за вас. Вам просто нужно указать, какой элемент управления привязан к какой части вашей модели.

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

  • Angular поддерживает тестирование, как модульное, так и интеграционное тестирование.

  • Он расширяет HTML, предоставляя собственные элементы, называемые директивами. На высоком уровне директивы - это маркеры на элементе DOM (например, атрибут, имя элемента и комментарий или класс CSS), которые сообщают компилятору HTML AngularJS прикрепить указанное поведение к этому элементу DOM. Эти директивы помогают расширить функциональность существующих элементов HTML, чтобы дать больше возможностей вашему веб-приложению.