Вступ в AngularJS (1)
Я почав писати цей конспект від початку 2015-го, за цей час вийшов AngularJS 2, напевне варто переписати. Хоча другий Angular написаний на TypeScript, тому він напевне вже не JS. Або вивчити React і написати конспект для нього. Вибір безмежний. 🙂
Написано на основі шикарного курсу від Code School. Просто щоб не передивлятись кожного разу перед тим як знову засвербить щось написати для фронт-енду.
Angular.js дозволяє писати шаблони прямо в HTML, розширюючи його своїми директивами, а потім автоматично заповнюючи даними.
Директива – це маркер (атрибут тегу) чи тег HTML що каже Angular-у запустити якийсь JavaScript код.
Єдиний файл що потрібен для початку роботи – angular.js.
Модулі
Код в Angular.js поміщається в модулі. Модулі містять код і описують залежності.
Щоб створити модуль пишемо:
var app = angular.module('store', []);
Перший аргумент – назва модуля, другий – список залежностей (якщо без залежностей – то порожній).
Тоді в html пишемо:
<html ng-app="store">
І це запустить наш модуль коли документ завантажиться.
І хоча наш модуль нічого не робить, але його включення вже допомагає розглядати код html який ми пишемо як директиви Angular.
Після чого можна писати на сторінці вирази. Як от
<p>2 + 2 = {{2 + 2}}</p>
Контролери
Щоб передати дані з JS в HTML, потрібно використати контролер:
var gem = {
name: 'Dodecahedron',
price: 10,
};
app.controller('StoreController', function() {
this.product = gem;
});
Важливо щоб контролери називались КемелКейсом і останнім словом завжди було Controller.
Далі, в html, пишемо
<div ng-controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>{{store.product.price}}</h2>
</div>
store – аліас який ми описали і що використовується всередині виразів. Доступний лише всередині елементу для якого описаний контролер.
Директиви
ng-show – покаже елемент лише коли значення виразу істинне.
<div ng-controller="StoreController as store"> <button ng-show="store.product.canPurchase">Add to Cart</button> </div>
ng-hide – навпаки, сховає елемент коли значення істинне.
ng-repeat – повторить елемент ітеруючи по якомусь списку.
ng-click – виконає код написаний всередині значення директиви при кліку по ньому.
ng-init – виконає код написаний всередині значення директиви при відображенні сторінки. Не користуйтесь ним, покладіть код який хочете покласти туди, всередину контролера.
<div ng-controller="StoreController as store"> <div ng-repeat="product in store.products"> <button ng-show="product.canPurchase">Add to Cart</button> </div> </div>
ng-src – директива що встановлює значення атрибуту src в тегу на зразок img. Тому що встановлення його значення через <img src="{{value}}">, призведе, перед тим як спрацює Angular, до спроби браузера завантажити файл “{{value}}“, і помилки 404. А цього ми не хочемо.
ng-class="{ 'class1': condition1, class2: condition2 }" – дозволяє додавати і забирати класи з елемента залежно від значення виразів умов.
Фільтри
При виводі даних в шаблонах, їх можна пропускати через фільтри. Загальний синтаксис:
<p>2 + 2 = {{вираз|фільтр:опції}}</p>
<!-- або так: -->
<li ng-repeat="product in store.products | limitTo:3 | orderBy:'-price'">
Форми
Директива ng-model прив’язує значення елемента форми до моделі (атрибута контролера). Вони оновлюються автоматично.
Щоб якийсь код виконувався коли форма відправляється, ми додаємо цей код в значення директиви ng-submit. І дописуємо директиву novalidate, щоб вимкнути стандартну валідацію HTML.
<form name="reviewForm"
ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)"
novalidate
>
Angular автоматично додає до полів класи – ng-pristine – до поля до якого ще не додавали код, ng-dirty – до зміненого поля, і ng-invalid – до поля що не проходить валідацію, та ng-valid – до того що проходить.
Поля валідуються по атрибуту type. Може бути наприклад email, url, number (додатково є атрибути min, max).
Далі в курсі (ось слайди) ще йдеться про те як
- включати розмітку з інших файлів
- писати власні директиви і власні html елементи
- завантажувати дані через XHR
Щоправда, цього не треба щоб написати застосунок який я хочу написати. Але Про нього пізніше, бо github лежить, і вже трохи пізно. 🙂
І як тобі після Python всі ці джаваскрипти з ангуларами і реактами?
misterioss
20 Лютого, 2016 at 16:12
Ну не зовсім після, бо джаваскрипти я мав і до того. Розбираюсь потроху.
bunyk
22 Лютого, 2016 at 15:08
[…] Про те як це все прив’язується до шаблону – читайте в коротенькому вступі до AngularJS. […]
Як швидко розпочати писати SPA на AngularJS (1) | Блоґ одного кібера
1 Червня, 2017 at 14:01