Вступ в 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