Angular.js

Ця стаття про AngularJS 1.x. Про Angular див. Angular (фреймворк).

AngularJS — JavaScript-фреймворк з відкритим програмним кодом, який розробляє Google. Призначений для розробки односторінкових додатків, що складаються з одної HTML сторінки з CSS і JavaScript. Його мета — розширення браузерних застосунків на основі шаблону Модель-вид-контролер (MVC), а також спрощення їх тестування та розробки.

AngularJS

Тип	бібліотека JavaScript, Односторінковий застосунок
Розробник	Google Inc. та спільнота.
Перший випуск	20 жовтня 2010; 13 років тому (2010-10-20)
Стабільний випуск	1.8.0 (1 червня 2020; 4 роки тому (2020-06-01))
Версії	1.8.3 (7 квітня 2022)^[3]^[4]
Платформа	Веб платформа
Операційна система	багатоплатформена
Мова програмування	TypeScript, JavaScript
Розмір	144 KB мінімізована версія 1 MB версія для розробки
Стан розробки	Активний
Ліцензія	MIT License
Репозиторій	github.com/angular/angular.js
Вебсайт	www.angularjs.org
Медіафайли у Вікісховищі

Фреймворк працює зі сторінкою HTML, що містить додаткові атрибути і пов'язує області вводу або виводу сторінки з моделлю, яка є звичайними змінними JavaScript. Значення цих змінних задаються вручну або отримуються зі статичних або динамічних JSON-даних.

За даними служби аналізу JavaScript для Libscore, AngularJS використовується на вебсайтах Wolfram Alpha, NBC, Walgreens, Intel, Sprint, ABC News та близько 12,000 інших сайтів з 1 мільйона протестованих у жовтні 2016 року. AngularJS наразі входить до трійки проектів, що набрали найбільшу кількість зірок на GitHub.

AngularJS — це фронтенд частина стеку MEAN, що складається з бази даних MongoDB, програмного каркаса для розробки вебдодатків Express.js, самого Angular.js та платформи Node.js.

AngularJS

AngularJS побудований на переконанні, що декларативне програмування слід використовувати для створення користувацьких інтерфейсів та підключення компонентів програмного забезпечення, тоді як імперативне програмування краще підходить для визначення бізнес-логіки додатка. Фреймворк адаптує та розширює традиційний HTML, щоб представити динамічний вміст через двостороннє зв'язування даних, що дозволяє автоматично синхронізувати моделі та перегляди. Як результат, AngularJS зменшує значення явної DOM-маніпуляції з метою покращення тестування та продуктивності.

Конструктивні цілі AngularJS включають:

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

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

Область видимості

AngularJS використовує термін «область видимості» у схожій манері до основ комп'ютерних наук.

Область видимості у комп'ютерних науках описує, коли конкретна прив'язка у програмі є валідною. Специфікація ECMA-262 визначає область видимості як лексичне середовище, в якому об'єкт функції виконується в клієнтському вебсценарії.

Як частина архітектури MVC, область видимості формує «Модель». Всі змінні, які визначені в області видимості, можуть також бути доступні у «Контроллері» та «Представленні». В AngularJS «область видимості» є свого роду об'єктом, який сам може бути в або поза областтю видимості в будь-якій частині програми, відповідно до звичайних правил області видимості змінних в JavaScript, як і будь-який інший об'єкт. Область видимості здійснює роль клею, який зв'язує «Контроллер» і «Представлення».

Популярність

Найбільшу популярність використання AngularJS має в Україні.

Історія розвитку

AngularJS було розроблено Miško Hevery у 2009 році в компанії Brat Tech LLC як програмне забезпечення для онлайн-зберігання JSON, що вимірюються мегабайтами, для полегшення розробки корпоративних додатків. Сервіс був розміщений на вебдомені «GetAngular.com» і мав декілька передплатників, перш ніж вони вирішили відмовитися від бізнес-ідеї та випустити Angular як бібліотеку з відкритим вихідним кодом.

До версії було 1.6 додано багато концепцій Angular-AngularJS, включаючи концепцію компонентної архітектури додатків. Цей реліз серед інших виключив Sandbox, що, на думку багатьох розробників, забезпечило додаткову безпеку, незважаючи на численні вразливі місця, які було виявлено. Поточна (станом на лютий 2018 р.) стабільна версія AngularJS — 1.6.9.

У січні 2018 року був оголошений графік поступового скасування AngularJS: після версії 1.7.0, активний розвиток AngularJS триватиме до 30 червня 2018 року. Після цього 1.7 буде підтримуватися до 30 червня 2021 року як довгострокова підтримка.

Дзен AngularJS

Angular створений з упевненістю в тому що, декларативний код краще імперативного коли потрібно створити UI і зв'язати компоненти між собою, з іншого боку імперативний код прекрасно підходить для вираження бізнес-логіки.

Гарна ідея — розділити маніпуляції з DOM і логіку програми. Такий поділ дозволяє спростити тестування коду. Складність тестування багато в чому залежить від структурованості коду.

Дуже корисно те, що фреймворк направляє розробників протягом усієї побудови програми: починаючи з дизайну UI, через написання бізнес-логіки, до тестування.

Завжди добре робити рутинні завдання тривіальними, а складні — можливими.

Angular звільняє від рутини:

Реєстрація колбеків: Реєстрація функцій зворотного виклику засмічує код. Видалення шаблонного коду (такого, як функції зворотного виклику) — завжди добре. Це значно зменшує кількість коду, який потрібно написати і покращує читання і розуміння коду застосунків написаних на AngularJS.

Програмне маніпулювання DOM: Декларативно описуючи як повинен змінюватися UI в залежності від зміни стану програми, ви звільняєтесь від низькорівневих маніпуляцій з DOM. Більшості застосунків, написаних за допомогою Angular, ніколи не доведеться програмно маніпулювати DOM, хоча ви це можете це робити якщо захочете.

Потік даних з/в UI: Більшість операцій в AJAX застосунках складають CRUD-операції. Потік даних від сервера до внутрішнього об'єкту, а потім до HTML-форми, що дозволяє користувачам змінювати форму, перевіряти коректність даних і показувати помилки валідації, потім, повертаючись у внутрішню модель і потім на сервер, створює забагато шаблонного коду. Angular позбавляє від більшої частини такого коду, залишаючи код, що описує загальний потік даних в додатку, а не деталі реалізації.

Написання тонни коду тільки для того що б щось працювало: Зазвичай вам необхідно написати багато додаткового коду для того, щоб отримати простий «Hello World» AJAX застосунок. За допомогою Angular можна швидко створити додаток використовуючи сервіси, які автоматично вбудовуються в додаток в Guice-подібному dependency-injection стилі. Це дозволяє швидко приступити до розробки вашого додатка. Як бонус ви отримаєте повний контроль над ініціалізацією в автоматизованих тестах.

Філософія Angular

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

Важливі директиви

Див. також: Директива (програмування)

Директиви AngularJS дозволяють розробнику модифікувати поведінку деяких елементів, чи описати власні елементи.

ng-app

Оголошує елемент кореневим елементом застосунку, дозволяючи змінювати поведінку за допомогою спеціальних тегів.

ng-bind

Змінює текст елемента на значення виразу. <span ng-bind="name"></span> відобразить значення змінної name всередині тегу span. Будь-які зміни змінної будуть миттєво відображені в DOM, де б змінна не використовувалась.

ng-init

Ініціалізує/визначає дані/змінні вашого додатку.

ng-model

Подібна до ng-bind, але дозволяє двостороннє зв'язування даних між (зміни в DOM будуть змінювати змінну).

ng-class

Дозволяє динамічно додавати та забирати класи елемента.: <div class="{'active': activeDiv}"></div>

ng-controller

Вказує клас JavaScript контролера.

ng-repeat

Створює кілька екземплярів елемента, для кожного об'єкта колекції.

ng-show & ng-hide

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

ng-disabled

Встановлює атрибут disabledдля елемента (кнопка, поле вводу, тощо), якщо вираз в середині ng-disabled вірний.

<input ng-model='name' ng-disabled='name.length > 15'> (встановить атрибут disabled для поля вводу при введенні рядка більше 15 символів)

ng-click/ngDblclick

Виконує описаний вираз при кліку/подвійному кліку на елемент. <button ng-click='submitForm()'></button> (Виконує функцію submitForm при кліку на кнопку)

ng-mousedown/ng-mouseup

Подібні до ng-click, спрацьовують при натисканні/відпусканні лівої кнопки миші на елементі.

ng-if

Видаляє чи створює елемент в DOM дереві. <div ng-if='showBlock'>...</div> Директива дуже подібна до директиви ng-show. Для того щоб запобігти втрат у швидкодії, рекомендується застосовувати директиву ng-show для приховування великої кількості елементів у зв'язку повільної роботи DOM дерева.

Розширення Chrome

У липні 2012 року команда Angular випустила розширення для браузера Google Chrome під назвою Batarang, що покращує налагодження вебпрограм, створених за допомогою Angular. Розширення має на меті забезпечити легке визначення вузьких місць роботи та пропонує графічний інтерфейс для налагодження додатків. З кінця 2014 р. та початку 2015 р. розширення не сумісне з останніми випусками (після v1.2.x) з Angular. Останнє оновлення для цього розширення відбулося 4 квітня 2017 року.

Швидкодія

AngularJS визначає парадигму циклу дайджестів. Цей цикл можна розглядати як цикл, під час якого Angular перевіряє, чи є якісь зміни у всіх змінних, за якими спостерігають усі $scopes. Якщо $scope.myVar оголошена в контроллері, і ця змінна була відмічена для перегляду, то Angular буде слідкувати за змінами myVar на кожній ітерації циклу.

Такий підхід потенційно може сповільнити рендеринг, коли AngularJS перевіряє надто багато змінних в $scopes на кожній ітерації циклу.

Для покращення швидкодії рекомендується дотримуватись цих правил:

• не використовувати подвійний data-binding, де це не потрібно (в статичних таблицях для відображення даних)
• для відображення даних використовувати дерективу ng-bind
• використовувати односторонній біндиг
• зменьшити кількість фільтрів (translate, lowercase …)
• для рендерингу великої кількості елементів списку або таблиці — використовувати пагінацію (посторінкову або при скролінгу)

Джерела

1. . Архів оригіналу за 29 липня 2017. Процитовано 15 вересня 2016.
2. . GitHub. 22 липня 2016. Архів оригіналу за 3 жовтня 2021. Процитовано 10 серпня 2016.
3. Release 1.8.3 — 2022.
4. 1.8.3 ultimate-farewell (2022-04-07)
5. . Архів оригіналу за 2 жовтня 2015. Процитовано 1 жовтня 2015.{{}}: Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title ()
6. What Is Angular?. Архів оригіналу за 20 травня 2013. Процитовано 12 лютого 2013.

Посилання

• Буник, Тарас (18 лютого 2016). . Блоґ одного кібера. Архів оригіналу за 13 березня 2016. Процитовано 11 березня 2016.