Огляд архітектури AngularJS

AngularJS - це основа, розроблена для розширення можливостей HTML від простої статичної мови до більш динамічної інтуїтивно зрозумілої мови на стороні клієнта. AngularJS - це 100% JavaScript. Це допомагає написати більш керований код на стороні клієнта. Це надає розробнику більше можливостей контролю над кодом та маніпуляційними даними на самій стороні клієнта. Для цього AngularJS має належну схему дизайну. Це називається схемою MVC. Розберемося докладніше про це в наступному розділі. У цій темі ми дізнаємось про AngularJS Architecture .

Архітектура

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

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

Шаблон MVC означає модель контролера перегляду моделі.

  • Модель

Це найнижчий рівень архітектури. Він несе відповідальність за зберігання та збереження даних програми. Дані зберігаються протягом життєвого циклу сторінки, а іноді навіть між сторінками. Модель оновлює себе на основі інструкцій, отриманих від контролера.

  • Вид

Вид - це передня панель програми. Це презентаційний шар архітектури, відповідальний за показ даних користувачеві. Він містить повний код для сторінок інтерфейсу користувача будь-якою мовою, сумісною з браузером, зазвичай HTML. Перегляд спрацьовує відповідний контролер. Перегляд надсилає запити до свого контролера на основі взаємодії користувача з додатком. Потім контролер відновлює подання на основі відповіді, отриманої від сервера.

  • Контролер

Контролер - це обробний мозок, що стоїть за видом і моделлю. Він приймає рішення для створення, відновлення або руйнування поглядів і моделі. Усі бізнес-операції та логіка коду записуються всередину контролера. (Деякі розробники вважають за краще писати бізнес-логіку в самій Моделі). Контролер також відповідає за надсилання запитів на сервер і отримання відповіді. Потім він оновлює вигляд і модель на основі відповіді. Словом, контролер все контролює.

Архітектуру MVC можна графічно представити за допомогою зображення нижче.

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

MVC в AngularJS

Це стосувалося MVC та його принципів. Як ці принципи реалізовані в AngularJS? Давайте розберемося.

  • Область застосування - Область застосування - це модель, яка містить дані програми. Змінні області прикріплені до 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). Dependency Injection - це модель дизайну програмного забезпечення, яка стосується того, як створюються об'єкти та як вони отримують власні залежності. Все в AngularJS, від директив до контролерів до служб і майже все, передається через DI.

Веселий факт архітектури AngularJS

AngularJS був названий AngularJS через кутові дужки в тегах HTML. Проект був розроблений, щоб зробити HTML більш динамічним та зрозумілим для даних, і тому розробники вирішили назвати його за кутовими дужками в HTML.

Висновок - AngularJS Architecture

У статті висвітлюються всі важливі поняття архітектури AngularJS. Це хороший початок для розуміння роботи різних елементів вашої програми AngularJS. Наступним кроком є ​​створення повністю функціонального багатоконтролерного додатка AngularJS, який також отримує дані з бекенда. Це допоможе вам отримати практичну практику щодо концепцій AngularJS.

Рекомендовані статті

Це путівник по AngularJS Architecture. Тут ми обговорюємо архітектуру, MVC у angularjs та концептуальний огляд. Ви також можете ознайомитися з іншими запропонованими нами статтями, щоб дізнатися більше -

  1. Кар'єра в AngularJS
  2. Запитання щодо інтерв'ю AngularJS
  3. Що таке Backbone.js?
  4. Програмне забезпечення для майнінгу даних

Категорія:

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