Обв'язування даних
Ви ходите робити свою веб-сторінку і продовжуєте вводити {{data bindings}}, коли відчуваєте, що матимете динамічні дані. Тоді Angular надасть вам обробник діапазону $, який ви можете заповнити (статично або за допомогою дзвінків на веб-сервер).
Це добре розуміння прив'язки даних. Я думаю, що ти це знищив.
DOM Маніпуляція
Для простої маніпуляції з DOM, яка не передбачає маніпулювання даними (наприклад: зміни кольору на миші, приховування / показ елементів при натисканні), jQuery або js old school є достатнім та чистішим. Це передбачає, що модель у mvc кутового кута - це все, що відображає дані на сторінці, а отже, властивості css, такі як колір, відображення / приховування тощо, зміни не впливають на модель.
Я можу побачити ваше уявлення про те, що "прості" маніпуляції з DOM є більш чистими, але лише рідко, і це повинно бути справді "простим". Я думаю, що маніпуляція з DOM - це одна з областей, подібно до прив'язки даних, де Angular справді світить. Розуміння цього також допоможе вам побачити, як Angular розглядає свої погляди.
Почну з порівняння кутового способу з підходом vanilla js до маніпуляції з DOM. Традиційно ми думаємо, що HTML не "робить" нічого і пишемо його як таке. Отже, вбудовані js, такі як "onclick" тощо, є поганою практикою, оскільки вони ставлять "робити" в контексті HTML, який не "робить". Кутова перевертає цю концепцію на голові. Коли ви пишете свій погляд, ви думаєте про HTML як про те, що можна "зробити" багато речей. Ця можливість обмежена в кутових директивах, але якщо вони вже існують або ви їх написали, вам не доведеться враховувати "як" це робиться, ви просто використовуєте потужність, доступну вам у цьому "доповненому" HTML, який кутовий дозволяє використовувати. Це також означає, що ВСІ ваші логіки перегляду справді містяться у поданні, не у ваших файлах javascript. Знову ж таки, міркування полягають у тому, що директиви, написані у ваших файлах javascript, можна вважати підвищенням можливості HTML, тож ви дозволяєте DOM турбуватися про маніпулювання собою (так би мовити). Продемонструю на простому прикладі.
Це розмітка, яку ми хочемо використовувати. Я дав йому інтуїтивну назву.
<div rotate-on-click="45"></div>
По-перше, я просто хотів би прокоментувати, що якщо ми надали цьому HTML цю функціональність за допомогою спеціальної кутової директиви, ми вже готові . Це подих свіжого повітря. Детальніше про це за мить.
Реалізація з jQuery
тут демонстрація (натисніть).
function rotate(deg, elem) {
$(elem).css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
}
function addRotateOnClick($elems) {
$elems.each(function(i, elem) {
var deg = 0;
$(elem).click(function() {
deg+= parseInt($(this).attr('rotate-on-click'), 10);
rotate(deg, this);
});
});
}
addRotateOnClick($('[rotate-on-click]'));
Реалізація з Angular
тут демонстрація (натисніть).
app.directive('rotateOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var deg = 0;
element.bind('click', function() {
deg+= parseInt(attrs.rotateOnClick, 10);
element.css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
});
}
};
});
Дуже легкий, ДУЖЕ чистий, і це просто проста маніпуляція! На мою думку, кутовий підхід виграє у всіх аспектах, особливо в тому, як функціональність відбирається і маніпуляція з куполом оголошується в DOM. Функціональність підключена до елемента за допомогою атрибута html, тому немає потреби запитувати DOM за допомогою селектора, і у нас є два приємних закриття - одне закриття для фабрики директив, де змінні поділяються у всіх сферах використання директиви , і одне закриття для кожного використання директиви у link
функції (або compile
функції).
Двостороння прив'язка даних та директиви щодо маніпуляції з DOM - це лише початок того, що робить Angular дивним. Angular сприяє тому, що весь код є модульним, багаторазовим і легко перевіряється, а також включає систему маршрутизації додатків на одній сторінці. Важливо зазначити, що jQuery - це бібліотека загально необхідних зручних / перехресних браузерних методів, але Angular - це повнофункціональна структура для створення програм для однієї сторінки. Кутовий скрипт насправді включає в себе власну "Lite" версію jQuery, так що доступні деякі найважливіші методи. Тому ви можете стверджувати, що для використання Angular IS використовується jQuery (злегка), але Angular забезпечує набагато більше "магії", щоб допомогти вам у створенні додатків.
Це чудовий пост для отримання додаткової інформації: Як я можу "подумати в AngularJS", якщо у мене є фон jQuery?
Загальні відмінності.
Вищезазначені моменти спрямовані на конкретні проблеми ОП. Я також дам огляд інших важливих відмінностей. Я пропоную додатково прочитати кожну тему.
Кутовий і jQuery неможливо порівняти.
Кутова - це рамка, jQuery - бібліотека. Рамки мають своє місце, а бібліотеки - своє місце. Однак не виникає сумніву, що хороша основа має більшу силу при написанні заявки, ніж бібліотека. Саме в цьому полягає рамка. Ви можете написати свій код у простому JS або ви можете додати в бібліотеку загальних функцій, або ви можете додати рамки, щоб різко зменшити код, необхідний для виконання більшості речей. Тому більш відповідне питання:
Навіщо використовувати рамку?
Хороші рамки можуть допомогти архітектору вашого коду, щоб він був модульним (тому багаторазовим), DRY, читабельним, ефективним та безпечним. jQuery не є рамкою, тому він не допомагає в цьому плані. Ми всі бачили типові стінки коду спагетті jQuery. Це не помилка jQuery - це вина розробників, які не знають, як архітувати код. Однак, якби розробники знали, як створити архітектурний код, вони в кінцевому підсумку написали якусь мінімальну "рамку", щоб забезпечити основу (архітектуру тощо), про яку я говорив мить назад, або вони щось би додали. Наприклад, ви може додати RequireJS, щоб діяти як частина вашої основи для написання хорошого коду.
Ось деякі речі, які надають сучасні рамки:
- Шаблонування
- Обв'язування даних
- маршрутизація (додаток на одній сторінці)
- чиста, модульна, багаторазова архітектура
- безпека
- додаткові функції / функції для зручності
Перш ніж я продовжую обговорювати Angular, я хотів би зазначити, що Angular не єдиний у своєму роді. Наприклад, Durandal - це структура, побудована на основі jQuery, Knockout та RequireJS. Знову ж таки, jQuery сам по собі не може забезпечити те, що можуть Knockout, RequireJS та цілі рамки, побудовані на них. Це просто не порівнянно.
Якщо вам потрібно знищити планету і у вас зірка Смерті, використовуйте зірку Смерті.
Кутовий (переглянуто).
Спираючись на мої попередні моменти щодо того, які рамки надають, я хотів би похвалити спосіб, який надає Angular, і спробувати уточнити, чому це питання фактично перевершує лише jQuery.
Довідка DOM
У моєму вище прикладі, абсолютно неминуче jQuery має підключитися до DOM, щоб забезпечити функціональність. Це означає, що представлення (html) стурбовано функціональністю (оскільки він позначений певним ідентифікатором, наприклад "повзунком зображень"), а JavaScript надає цю функціональність. Кутова усуває це поняття за допомогою абстракції. Правильно написаний код з Angular означає, що погляд здатний оголосити власну поведінку. Якщо я хочу показати годинник:
<clock></clock>
Зроблено.
Так, нам потрібно перейти до JavaScript, щоб це щось означало, але ми робимо це навпаки підходу jQuery. Наша кутова директива (яка є в її власному маленькому світі) "розширила" html і html причепила функціонал до себе.
MVW Architecure / Модулі / Вприскування
Angular дає вам простий спосіб структурування коду. Перегляд речей належить до перегляду (html), функція розширеного перегляду належить до директив, інша логіка (наприклад, виклики Ajax) та функції належать до сервісів, а підключення служб та логіки до подання належить до контролерів. Також є деякі інші кутові компоненти, які допомагають вирішити конфігурацію та модифікацію служб тощо. Будь-який створений вами функціонал автоматично доступний у будь-якому місці, за допомогою підсистеми Injector, яка піклується про ін'єкцію залежності у всій програмі. Під час написання програми (модуля) я розбиваю її на інші багаторазові модулі, кожен зі своїми компонентами для багаторазового використання, а потім включаю їх до більшого проекту. Як тільки ви вирішите проблему з Angular, ви ' Ви автоматично вирішили це способом, який корисний і структурований для повторного використання в майбутньому та легко включений у наступний проект. АВЕЛИЧИЙ бонус до всього цього полягає в тому, що ваш код буде набагато простіше перевірити.
Це не так просто, щоб змусити "працювати" в Angular.
ДЯКУВАТИ БОГОВІ. Вищезгаданий код спагетті jQuery був результатом розробника, який змусив щось "працювати", а потім рухався далі. Ви можете написати поганий кутовий код, але зробити це набагато складніше, тому що Angular буде боротися з вами за це. Це означає, що ви повинні скористатися (хоча б дещо) чистою архітектурою, яку вона надає. Іншими словами, важче написати поганий код за допомогою Angular, але зручніше писати чистий код.
Кутовий далеко не ідеальний. Світ веб-розробок постійно зростає та змінюється, і існують нові, кращі способи вирішення проблем. Наприклад, Facebook React і Flux мають деякі великі переваги перед Angular, але мають свої недоліки. Нічого не ідеальне, але Angular зараз був і залишається приголомшливим. Подібно до того, як jQuery колись допоміг світовому Інтернету рухатись вперед, так і Angular, і так багато буде в майбутньому.