Що таке AngularJS? ArchiТекстура, особливості та переваги

Що таке AngularJS?

AngularJS це фреймворк Model-View-Controller з відкритим кодом, написаний на JavaScriptAngularJS був одним із найпопулярніших веб-фреймворків 2010-х років, і його використовують для розробки...ping здебільшого односторінкові програми. Цей фреймворк був розроблений групою розробників з Google себе.

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

Варто одразу врегулювати один термінологічний момент. AngularJS широко описується як MVC-фреймворк, що є корисною відправною точкою. Однак сама команда AngularJS віддала перевагу терміну MVW (Модель-Вид-Будь-Що), оскільки середовище виконання поводиться ближче до Model-View-ViewModel, ніж до класичного MVC. Офіційний Документація AngularJS називає це структурним фреймворком для динамічних вебзастосунків. Після того, як це вирішено, ось як ці частини поєднуються між собою.

AngularJS Archiтектура

AngularJS дотримується архітектури MVC. Діаграма фреймворку MVC показана нижче:

AngularJS Archiдіаграма текстури

Кожен із трьох шарів має чітке завдання:

• Контролер представляє рівень, який має бізнес-логіку. Події користувача запускають функції, які зберігаються у вашому контролері. Події користувача є частиною контролера.
• Представлення використовуються для представлення рівня презентації, який надається кінцевим користувачам.
• Моделі використовуються для представлення ваших даних. Дані у вашій моделі можуть бути такими ж простими, як просто мати примітивні оголошення. Наприклад, якщо ви підтримуєте студентську програму, ваша модель даних може містити лише ідентифікатор студента та ім’я. Або це також може бути складним через наявність структурованої моделі даних. Якщо ви підтримуєте програму володіння автомобілем, ви можете мати структури для визначення самого автомобіля з точки зору об’єму двигуна, кількості місць тощо.

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

Особливості AngularJS

AngularJS має такі ключові особливості, що робить його одним із найпотужніших фреймворків на ринку:

1. MVC – Фреймворк побудований на відомій концепції MVC (Model-View-Controller). Це шаблон дизайну, який використовується в усіх сучасних веб-додатках. Цей шаблон заснований на поділі рівня бізнес-логіки, рівня даних і рівня представлення на окремі секції. Поділ на різні секції зроблено для того, щоб кожною з них було легше керувати.
2. Прив'язка моделі даних – Вам не потрібно писати спеціальний код для прив’язки даних до HTML-елементів керування. Це можна зробити за допомогою AngularJS, просто додавши кілька фрагментів коду.
3. Написання менше коду – Під час виконання багатьох маніпуляцій DOM JavaScript було потрібно написати для розробки будь-якої програми. Але з AngularJS ви будете вражені меншою кількістю коду, який потрібно написати для маніпулювання DOM.
4. Блок Тестування готові – Дизайнери в Google не тільки розробили AngularJS, але й розробили фреймворк для тестування під назвою «Karma», який допомагає в розробці модульних тестів для застосунків AngularJS.
5. інструкції – Маркери, такі як ng-app, ng-model і ng-repeat додавати поведінку до звичайних елементів HTML.

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

Як налаштувати AngularJS та створити свій перший застосунок

Читати про зв'язування даних – це одне, а спостерігати за його роботою – зовсім інше. AngularJS не потребує ні менеджера пакетів, ні блендера, ні компілятора, тому ваш перший застосунок – це один HTML-файл, який запускається безпосередньо з вашого жорсткого диска.

Крок 1) Додайте бібліотеку AngularJS

Завантажте бібліотеку з CDN за допомогою одного тегу скрипта. Версія 1.8.3 — це фінальний реліз AngularJS, тому закріпіть свою сторінку саме до цієї версії, а не до плаваючої.

Крок 2) Позначте корінь програми за допомогою ng-app

Директива ng-app повідомляє компілятору AngularJS, яка частина сторінки йому належить. Розміщення її в тегу html передає весь документ фреймворку, а значення, яке ви їй надаєте, називає модуль, який ви збираєтеся створити.

Крок 3) Зв'язування даних з ng-моделлю та виразом

Директива ng-model прив'язує елемент input до властивості в області видимості, а вираз у подвійних дужках виводить ту саму властивість в іншому місці сторінки. Оскільки прив'язка є двосторонньою, typing у полі оновлює заголовок негайно, без власного обробника подій.

Крок 4) Додайте контролер для логіки

Контролер — це звичайний JavaФункція скрипта, яка отримує об'єкт $scope та встановлює для нього початкові значення. Реєстрація його в модулі робить його доступним для директиви ng-controller.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Крок 5) Запустіть сторінку та перевірте результат

Збережіть файл як index.html та відкрийте його в будь-якому браузері. Спочатку заголовок буде «Hello World!», і файл перезаписуватиметься при кожному натисканні клавіші. Веб-сервер і етап збірки не задіяні.

Якщо нічого не відображається, відкрийте консоль браузера та переконайтеся, що скрипт CDN завантажено, і що назва модуля всередині ng-app точно відповідає назві, переданій до angular.module, оскільки невідповідність призводить до помилки. Ця невелика сторінка вже демонструє сильні сторони, описані далі.

Переваги AngularJS

Ось переваги AngularJS:

• Оскільки це фреймворк з відкритим кодом, можна очікувати, що кількість помилок або проблем буде мінімальною.
• Двостороннє зв'язування – AngularJS синхронізує дані та рівень представлення. Вам не потрібно писати додаткові коди. JavaКод скрипта для синхронізації даних у вашому HTML-коді та на рівні даних. AngularJS зробить це автоматично. Вам просто потрібно вказати, який елемент керування пов'язаний з якою частиною вашої моделі.
• Маршрутизація – AngularJS може подбати про маршрутизацію, тобто перехід від одного вигляду до іншого. Це ключовий фундамент односторінкових застосунків; ви можете переходити до різних функцій у вашому вебзастосунку на основі взаємодії з користувачем, але все одно залишатися на тій самій сторінці.
• AngularJS підтримує тестування, як Unit Testing та Інтеграційне тестування.
• Він розширює HTML, надаючи власні елементи, які називаються директивами. На вищому рівні директиви – це маркери на елементі DOM (такі як атрибут, назва елемента та коментар або клас CSS), які повідомляють компілятору HTML AngularJS про необхідність додавання певної поведінки до цього елемента DOM. Ці директиви допомагають розширити функціональність існуючих елементів HTML, щоб надати вашому вебзастосунку більше можливостей.

Переваги AngularJS

Збалансований погляд важливий не менш важливо, тому компроміси викладено далі.

Недоліки та обмеження AngularJS

Кожен фреймворк чимось жертвує, і AngularJS не є винятком. Ось обмеження, про які найчастіше повідомляють команди, що підтримують застосунки AngularJS:

• Немає власного рівня безпеки – AngularJS не забезпечує ні автентифікації, ні авторизації, тому обидві функції мають бути застосовані на сервері.
• Повна залежність від JavaScript – Якщо відвідувач вимикає JavaСкрипт, сторінка повертається до голої розмітки та не відображатиметься.
• Продуктивність циклу дайджесту – Зміни виявляються шляхом багаторазового порівняння відстежуваних значень, тому сторінки з кількома тисячами прив’язок можуть здаватися млявими.
• Крута крива навчання – Області застосування, директиви, фабрики, сервіси та постачальники перетинаються, і часто існує кілька способів досягнення одного й того ж результату.
• Видимість пошукової системи – Представлення збираються у браузері, тому потрібна додаткова робота, така як попередня візуалізація, перш ніж пошукові роботи надійно індексуватимуть сторінки.
• Без подальших оновлень – З 31 грудня 2021 року офіційних патчів не існує, тому щойно виявлена ​​вразливість залишається невиправленою, якщо комерційний постачальник не надасть виправлення.

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

AngularJS проти Angular: у чому різниця?

AngularJS та Angular часто плутають, оскільки назви дуже близькі, але це окремі фреймворки з різними мовами програмування, архітектурами та лінійками випусків. AngularJS стосується лише серії 1.x, описаної на цій сторінці. Angular означає версію 2 та кожну наступну версію, повністю перероблену версію, випущену у 2016 році, яка досі активно розробляється. Code не переміщується між ними без цілеспрямованої міграційної роботи.

Практичний наслідок полягає в тому, що контролер AngularJS не можна просто вставити в проект Angular. Міграція означає переписування кожного контролера як компонента, тому плануйте її як справжню інженерну роботу, а не як оновлення. Коротше кажучи, ставтеся до AngularJS як до навичок підтримки, а до Angular як до платформи для нової розробки.

Поширені запитання