Особливості фреймворку AngularJS

Сьогодні поговоримо про фреймворк AngularJS та всі його переваги у розробці Single Page Applications. Для чого використовують фреймворк, історія створення фреймворка – у даній статті.

Що таке AngularJS?

AngularJS – фреймворк, розроблений developer’ами з компанії Google, що використовується, в основному, для створення складних SPA(Single Page) інтернет-програм, з використанням технології AJAX.

Основні переваги використання Angular

1. Декларативний стиль коду
2. Використання спеціальних директив
3. Модульність
4. Простота тестування
5. Завчасно готові рішення, які спрощують розробку

Директиви, що використовуються в фреймворку

Директивами в Ангулярі називаються додаткові атрибути, що розширюють стандартний HTML-код та містять у собі приставку ng-. Серед найбільш використовуваних і основних:

• ng-app – “обгортає” додаток Angular, розпочинає його.
• ng-init – ініціалізує дані програми
• ng-model – вносить додаткові дані в програму шляхом зв’язування даних.

Приклад роботи AngularJS

<div ng-app="" ng-init="firstName='John'">

<p>Введіть своє ім'я: <input type="text" ng-model="firstName"></p>
<p>Ви ввели: {{ firstName }}</p>

</div>

Директива ng-app передає інформацію AngularJS, що блок є “обгорткою” додатка AngularJS.

Зв’язування даних

Як Ви помітили, зверху в коді поміщений вираз {{FirstName}}. Він в AngularJS використовується для зв’язування даних. Зв’язування даних використовується для створення “містка” між ng-model та виводом.

Модулі в AngularJS

Формою організації усіх процесів в Angular є модулі. Модуль – це певне середовище для окремої інформації, такої як директиви, контроллери, фільтри тощо. Описується директивою ng-module.

Контроллери в AngularJS

Длиректива ng-controller визначає контроллер додатку. Саме організувавши роботу контроллера ми встановлюємо контроль над даними в програмі.