Блоґ одного кібера

Історія хвороби контуженого інформаційним вибухом

Вступ в AngularJS (1)

with 2 comments

Я почав писати цей конспект від початку 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 лежить, і вже трохи пізно.🙂

Written by bunyk

Лютий 18, 2016 at 00:02

Оприлюднено в Кодерство, Павутина

Tagged with

Відповідей: 2

Subscribe to comments with RSS.

  1. І як тобі після Python всі ці джаваскрипти з ангуларами і реактами?

    misterioss

    Лютий 20, 2016 at 16:12

    • Ну не зовсім після, бо джаваскрипти я мав і до того. Розбираюсь потроху.

      bunyk

      Лютий 22, 2016 at 15:08


Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: