Введення в Angular JS. Приклади

23

Від автора: у цьому уроці ми вивчимо основи AngularJS, і на простих прикладах AngularJS розкриємо міць двосторонньої прив’язки даних, а також архітектуру AngularJS в цілому, як фреймворка. Приклади AngularJS з даної статті Ви цілком можете використовувати на практиці.

Введення в Angular JS. ПрикладиВведення в Angular JS. Приклади

Введення

AngularJS — що це? AngularJS це монстр серед JS-фреймворків, з допомогою величезного набору інструментів можна створювати дійсно потужні, прості в обслуговуванні і структуровані програми. Даний фреймворк істотно полегшує розробку динамічних додатків, завдяки своєму синтаксису, простої візуальної маніпуляції об’єктами, а також двосторонньої прив’язку даних. Сьогодні ми з вами з головою зануримося в самі основи Angular і продемонструємо легкість і міць фреймворка.

Перед тим, як продовжити, необхідно ознайомитися з термінологією. Вище я вже згадував «двосторонню прив’язку даних», а що це взагалі значить? Прив’язка даних означає зв’язок між моделлю (бізнес модель) та видом (UI), і при зміні одного, змінюється і друге. У Angular дані зв’язані між собою в обох напрямках. Це значить, якщо у базі даних щось оновилося, то вид автоматично оновиться для відображення нових даних, і навпаки. При такому підході маніпуляція DOM’ом сторінок стає дуже простий, а ще це і є одна з особливостей, чому багато використовують Angular.

Angular також застосовує контролери, принцип дії яких схожий з посиланнями на види. З-за двосторонньою прив’язки даних в Angular дуже легко створювати і підтримувати контролери, що в підсумку очищає код і робить його читабельним. Можна в будь-який момент отримати дані з DOM і відіслати їх назад. Також прив’язка даних робить непотрібним велику кількість коду, пов’язаного з маніпуляцією DOM в JS, ще більше очищаючи код і надаючи модульність контролерам.

Останній термін і найголовніший – «директиви». Директиви допомагають структурувати повторно використовувані компоненти за допомогою ваших власних імен. У цьому уроці ми не будемо показувати, як створити свої власні директиви. Але я все-таки наведу кілька з них, так як в Angular є вбудовані директиви. Зазвичай, вони починаються з ng і дуже корисні. Без зайвих слів, давайте робити красиво.

Запуск програми

Для завантаження будь-якого Angular програми необхідно викликати директиву ng-app. Цю директиву можна прописати в будь-якому HTML тегу, вона використовується для автозавантаження додатків Angular. Ng-app являє з себе корінь Angular програми, і на одній веб-сторінці може бути запущено лише одне Angular додаток. В основному майже завжди виклик директиви можна зустріти в тегу html:

Зауважте, що ми дали нашому додатком ім’я app. Подивимося, як воно себе поведе, додамо трохи JS коду. Але перед тим як продовжити необхідно підключити саму бібліотеку Angular, а наш код буде знаходитися у файлі app.js. Для додавання Angular в наш проект я використовував менеджер Bower, я налаштував його зберігати свої компоненти в папку /lib. Файл app.js я зберіг у папці /app. Наш файл index.html виглядає так:

Далі ми будемо працювати у файлі app.js. Щоб Angular зрозумів, що ми готові з ним працювати, необхідно задати початкове стан програми. Нижче код JS:

‘use strict’;
/**
* angular
* Description: Angular!
*/
angular
/**
* app
* Description: Встановлюємо первісний стан додатки
*/
.module(‘app’, [])
})();

Код вище можна розбити на 3 частини:

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

Оголошення Angular

.module(‘app’, []) – встановлює первісний стан програми і задає йому ім’я app

Якщо цікаво, то квадратні дужки в інсталяторі відповідають за завантаження будь-яких залежностей, які нам можуть знадобитися в шаблоні впровадження залежностей. У цьому уроці ми не будемо розповідати про впровадження залежностей, але, якщо ви будете далі вивчати Angular, то це одна з найважливіших тем, так що вам потрібно з нею ознайомитися самостійно! Зараз наш додаток не робить абсолютно нічого, давайте створимо і додамо перший контролер і як-небудь його прив’яжемо до DOM.

Створення першого контролера

Для оголошення нового контролера в Angular, ми просто прикріплюємо рядок .controller до нашого модулю (конструктор контролера). В нашому випадку, так як ми пишемо весь JS код в одному файлі, ми можемо просто дописати так:

(function() {
‘use strict’;
angular
.module(‘app’, [])
/**
* AppController
* Description: Sets up a controller
*/
.controller(‘AppController’, [‘$scope’, function($scope) {
}]);
})();

Варто звернути увагу на кілька речей. Перше – ми назвали наш контролер AppController, схожим чином ми назвали наш базовий модуль. Друге – ми використовували рядкове підключення, щоб дати зрозуміти, що змінна $scope це залежність від нашого контролера. І третє, на вхід безіменній функції подається змінна $scope, тобто ми робимо цю змінну доступною всередині функції, а тобто і для всього контролера. А що це взагалі за змінна $scope?

У Angular scope це об’єкт, пов’язаний з моделлю програми, і працює, як сполучна ланка між контролером і виглядом. Первісний стан scope можна задати, причепивши до об’єкту різні властивості. Також до об’єкта $scope можна чіпляти методи. Всі властивості об’єкта $scope будуть доступні в DOM оголошення на рівні контролера. Але як же оголосити сам контролер?

В html коді нам потрібен якийсь розділ DOM, який буде пов’язаний з контролером таким чином, щоб ми дійсно могли застосувати двосторонню прив’язку даних і, нарешті, почати працювати з Angular. Нагадаємо, що наш контролер називається AppController, так що оголосити контролер в HTML можна так:

Зараз ми використовували вже другу директиву, ng-controller. Тепер наш AppController пов’язаний з DOM. Тепер ми повністю готові! Подивимося на кілька основних можливостей Angular в дії. Весь код, будемо вважати, що буде всередині функції контролера.

Рекомендується використовувати в імені контролера слово controller, щоб було чітко зрозуміло, до якого контролера ви звертаєтеся в поточному шаблоні. У цьому уроці ми так і поступимо.

Дуже проста двостороння прив’язка даних

У нашому HTML висновок властивостей можна робити за допомогою двох дужок:

Hello, {{ username }}!

Як можна помітити, на екрані мінлива usename нічого не відображає, так як username не додана в простір змінних:

/**
* username
* Опис: The default username to attach to the scope
*/
$scope.username = ‘Nick’;

Поновіть сторінку і вуаля! Тільки що ви стали свідком двосторонньої прив’язки даних в нашому додатку. Підемо ще далі, подивимося, чи зможемо ми змінити ім’я по кліку.

Зміна значення властивостей з допомогою ng-click

У Angular є ще одна директива під назвою ngClick, з допомогою якої встановити поведінку елемента при натисканні на нього. Ось ми поступово дізнаємося про міць Angular, ми можемо обійти всі обробники подій і використовувати директиву ngClick. За основу візьмемо наш приклад вище, змінимо його так, щоб можна було змінювати username:

/**
* changeUsername
* Description: Updates the scope username
*/
$scope.changeUsername = function(username) {
$scope.username = username;
};

Тепер в нашому шаблоні можна безпосередньо скористатися директивою ngClick і подати на вхід потрібне значення. Нижче код HTML:

Hello, {{ username }}!

Hello Bob?
Hello Adam?
Hello Elena?

При натисканні на кнопку, буде оновлюватися ім’я! Знову ми бачимо двосторонню прив’язку даних. Все, що ми зробили, це оновили значення властивості в контролері, а відповідне значення вже відображається в DOM. Замітка: Всі директиви Angular використовують горбатий регістр (тобто ngClick), а при використанні безпосередньо в HTML змінюється на ng-click.

Проходимо в циклі по масиву з допомогою ng-repeat

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

/**
* usersArray
* Description: A generic list of users, possibly pulled from a database, in
* array notation.
*/
$scope.usersArray = [
[‘BB’, ‘King’],
[‘Ray’, ‘Charles’],
[‘Muddy’, ‘Waters’],
[‘Lightnin’, ‘Hopkins’],
[‘Howlin’, ‘Wolf’]
];

В шаблоні HTML можна просто підключити директиву ngRepeat до того елементу, вміст якого необхідно пройти в циклі:

First Name Last Name
{{ user[0] }} {{ user[1] }}

Ми підключили директиву ngRepeat до тегу tr з рядком user in usersArray. Це означає, що тег tr буде циклічним, а змінна user буде замінюватися значенням на поточній ітерації. Наш масив це просто набір подмассивов, і на першій ітерації user[0] відобразить «BB», user[1] відобразить «King» (тобто на нульовому кроці).

Проходимо в циклі по масиву об’єктів за допомогою ng-repeat

Часто в JS потрібно працювати з колекцією об’єктів. Зазвичай, дані в такому форматі повертаються з баз даних або з API. Створимо типову колекцію об’єктів:

$scope.usersObject = [
{
firstname: ‘BB’,
lastname: ‘King’
},
{
firstname: ‘Ray’,
lastname: ‘Charles’
},
{
firstname: ‘Muddy’,
lastname: ‘Waters’
},
{
firstname: ‘Lightnin’,
lastname: ‘Hopkins’
},
{
firstname: ‘Howlin’,
lastname: ‘Wolf’
}
];

За такою ж логікою можна пробігтися в циклі з колекції об’єктів:

First Name Last Name
{{ user.firstname }} {{ user.lastname }}

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

Простий спосіб зв’язку з введеними даними

Часто в додатках нам доводиться працювати з даними з форм. У Angular є вкрай зручний спосіб зв’язати введені дані зі значенням властивостей, зробити це можна за допомогою директиви ngModel. Створимо в нашій моделі випадкову рядок, і створимо функцію, яка буде відображати цю рядок через alert:

/**
* randomUserModel
* Description: Initializes the random user model username
*/
$scope.randomUserModel = ‘random user’;
/**
* randomUserModelAlert
* Description: Alerts the random username available from the ng model.
*/
$scope.randomUserModelAlert = function() {
alert($scope.randomUserModel);
};

В HTML шаблону можна зв’язати дані з форми з моделлю, тим самим відкриваючи з’єднання прив’язки даних:

alert my random name!

При будь-якій зміні значення поля input, значення змінної також автоматично оновиться. При виклику alert функції (за допомогою ngClick) з’явиться вже оновлений значення.

Відображення або приховування елементів DOM з допомогою ng-show і ng-hide

ngShow і ngHide – дві досить акуратні директиви в тому сенсі, що вони безпосередньо маніпулюють елементами DOM. DOM елементи показуються і ховаються на основі порівняння на true/false. Іншими словами, якщо встановити для тега ng-show=»true», то він буде відображатися. Відповідно, якщо встановити ng-hide=»true», елемент буде приховано. Щоб показати роботу директив нам навіть не потрібно JavaScript. Створимо елемент checkbox , і подивимося, яким чином Angular обробляє значення true/false. Нижче HTML код:

Show box1!

Hide box2!

I am box 1

woo woo!

I am box 2

woo woo!

Коли «Show box 1» обраний, властивість checkboxModel.box1 встановлюється в true. Тобто при Angular підставляє ng-show=»checkboxModel.box1″. Таким же чином при виборі другого чекбокса, checkboxModel.box2 встановлюється в true, і блок 2 ховається.

Зміна імені класу з допомогою ng-class

Наш введення в Angular ми закінчимо на одній з моїх улюблених директив, ngClass, вона дозволяє динамічно присвоювати класи тегами HTML. Можете почитати про різні способи використання ngClass, а в нашому прикладі обійдемося дуже простим кодом. Задамо пусте ім’я класу і створимо функцію, яка зможе змінювати це значення.

/**
* textClass
* Description: A generic class name to attach to a string of text
*/
$scope.textClass = «;
/**
* changeTextClass
* Description: Changes the text class
*/
$scope.changeTextClass = function(name) {
$scope.textClass = name;
}

Присвоїмо значення textClass до атрибуту ng-class. А також прив’яжемо до кнопки функцію changeTextClass:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere molestias explicabo aspernatur inventore nam fugit, nihil numquam distinctio totam hic, iure porro, magnam consequuntur nemo deleniti dicta amet quo assumenda.

Add a pink class

При натисканні на кнопку, буде викликатися функцію, яка оновлює значення властивості, а відповідно і ім’я класу. І ось так от просто наш текст став рожевим, магія!

Висновок

Підведемо підсумки! У цьому уроці «Введення в AngularJS. Приклади» ми розглянули приклади AngularJS, пройшли тільки основи, але вони вже можуть вас зацікавити для подальшого вивчення Angular. Angular це просто звір, і до нього варто підходити акуратно. У майбутньому, сподіваюся, знайду час на нові статті за Angular. Так що стежте за новинами!