Предположим, я'знаком с разработкой клиентских приложений на jQuery, но теперь я'хочу начать использовать AngularJS. Можете ли вы описать смену парадигмы, которая необходима? Вот несколько вопросов, которые могут помочь вам сформулировать ответ:
Я не ищу детального сравнения между jQuery
и AngularJS
.
В jQuery вы создаете страницу, а затем делаете ее динамичной. Это потому, что jQuery был разработан для дополнения и невероятно вырос из этой простой предпосылки. Но в AngularJS вы должны начинать с нуля, имея в виду вашу архитектуру. Вместо того, чтобы начинать с мысли "У меня есть этот кусок DOM, и я хочу заставить его делать X", вы должны начать с того, чего вы хотите достичь, затем заняться проектированием приложения, и, наконец, заняться проектированием представления.
Аналогично, не начинайте с идеи, что jQuery делает X, Y и Z, поэтому я просто добавлю AngularJS поверх этого для моделей и контроллеров. Это очень заманчиво, когда вы только начинаете, поэтому я всегда рекомендую новым разработчикам AngularJS вообще не использовать jQuery, по крайней мере, пока они не привыкнут делать вещи "Angular Way".
Я'видел, как многие разработчики здесь и в списке рассылки создают эти сложные решения с плагинами jQuery в 150 или 200 строк кода, которые они затем вклеивают в AngularJS с помощью набора обратных вызовов и $apply
, которые запутаны и запутанны; но в конце концов они добиваются того, что все работает! Проблема в том, что в большинстве случаев этот jQuery-плагин может быть переписан в AngularJS за долю кода, где внезапно все становится понятным и простым.
Итог таков: при решении проблемы сначала "думайте в AngularJS"; если вы не можете придумать решение, спросите у сообщества; если после всего этого не находится простого решения, тогда не стесняйтесь достать jQuery. Но не позволяйте jQuery стать костылем, иначе вы никогда не освоите AngularJS.
Прежде всего, знайте, что одностраничные приложения - это приложения. Это не веб-страницы. Поэтому мы должны думать как разработчик серверной стороны в дополнение к мышлению как разработчик клиентской стороны. Мы должны думать о том, как разделить наше приложение на отдельные, расширяемые, тестируемые компоненты. Так как же это сделать? Как вы "думаете в AngularJS"? Вот несколько общих принципов, в отличие от jQuery.
В jQuery мы программно изменяем представление. Мы можем иметь выпадающее меню, определенное как ul
, например:
<ul class="main-menu">
<li class="active">
<a href="#/home">Home</a>
</li>
<li>
<a href="#/menu1">Menu 1</a>
<ul>
<li><a href="#/sm1">Submenu 1</a></li>
<li><a href="#/sm2">Submenu 2</a></li>
<li><a href="#/sm3">Submenu 3</a></li>
</ul>
</li>
<li>
<a href="#/home">Menu 2</a>
</li>
</ul>
В jQuery, в логике нашего приложения, мы активируем его чем-то вроде:
$('.main-menu').dropdownMenu();
Когда мы просто смотрим на вид, не сразу видно, что здесь есть какая-то функциональность. Для небольших приложений это нормально. Но для нетривиальных приложений все быстро становится запутанным и сложным для поддержки.
Однако в AngularJS представление является официальной записью функциональности, основанной на представлении. Наше объявление ul
будет выглядеть следующим образом:
<ul class="main-menu" dropdown-menu>
...
</ul>
Эти два варианта делают одно и то же, но в версии AngularJS любой, кто смотрит на шаблон, знает, что должно произойти. Каждый раз, когда новый член команды разработчиков приходит на работу, он может посмотреть на это и знать, что здесь работает директива dropdownMenu
; ей не нужно интуитивно понимать правильный ответ или копаться в коде. Представление говорит нам, что должно произойти. Намного чище.
Разработчики-новички в AngularJS часто задают вопрос типа: как мне найти все ссылки определенного типа и добавить к ним директиву. Разработчик всегда удивляется, когда мы отвечаем: вы не можете. Но причина, по которой вы этого не делаете, заключается в том, что это похоже на полу-jQuery, полу-AngularJS, и ничего хорошего в этом нет. Проблема здесь в том, что разработчик пытается "сделать jQuery" в контексте AngularJS. Это никогда не будет работать хорошо. Представление является официальной записью. Вне директив (подробнее об этом ниже), вы никогда, никогда, никогда не изменяете DOM. А директивы применяются в представлении, так что намерения ясны.
Помните: нельзя проектировать, а потом разметить. Вы должны создать архитектуру, а затем дизайн.
Это, безусловно, одна из самых замечательных возможностей AngularJS, которая избавляет от необходимости выполнять те манипуляции с DOM, о которых я говорил в предыдущем разделе. AngularJS автоматически обновит ваше представление, так что вам не придется этого делать! В jQuery мы реагируем на события, а затем обновляем содержимое. Что-то вроде:
$.ajax({
url: '/myEndpoint.json',
success: function ( data, status ) {
$('ul#log').append('<li>Data Received!</li>');
}
});
Для представления, которое выглядит следующим образом:
<ul class="messages" id="log">
</ul>
Помимо смешивания проблем, у нас также возникли те же проблемы с определением намерений, о которых я упоминал ранее. Но что более важно, нам пришлось вручную ссылаться и обновлять узел DOM. А если мы хотим удалить запись журнала, то для этого нам также придется кодировать DOM. Как мы можем проверить логику в отрыве от DOM? А что если мы захотим изменить представление? Это немного муторно и хрупко. Но в AngularJS мы можем это сделать:
$http( '/myEndpoint.json' ).then( function ( response ) {
$scope.log.push( { msg: 'Data Received!' } );
});
И наше представление может выглядеть следующим образом:
<ul class="messages">
<li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>
Но, если уж на то пошло, наше представление может выглядеть следующим образом:
<div class="messages">
<div class="alert" ng-repeat="entry in log">
{{ entry.msg }}
</div>
</div>
И теперь вместо неупорядоченного списка мы используем окна уведомлений Bootstrap. И нам не пришлось менять код контроллера! Но что более важно, независимо от того, где или как обновляется журнал, представление тоже изменится. Автоматически. Великолепно!
Хотя я не показал этого здесь, привязка данных является двусторонней. Так что эти сообщения журнала также можно редактировать в представлении, просто сделав следующее: <input ng-model="entry.msg" />
. И было много ликования.
В jQuery DOM является своего рода моделью. Но в AngularJS у нас есть отдельный слой модели, которым мы можем управлять любым способом, полностью независимо от представления. Это помогает для вышеупомянутой привязки данных, поддерживает разделение проблем и обеспечивает гораздо большую тестируемость. В других ответах упоминался этот момент, поэтому я просто оставлю его.
Все вышесказанное связано с общей темой: держите ваши проблемы отдельно. Ваше представление действует как официальная запись того, что должно произойти (по большей части); ваша модель представляет ваши данные; у вас есть слой сервисов для выполнения многократно используемых задач; вы выполняете манипуляции с DOM и дополняете ваше представление директивами; и вы склеиваете все это вместе с помощью контроллеров. Это также упоминалось в других ответах, и единственное, что я хотел бы добавить, относится к тестируемости, которую я обсуждаю в другом разделе ниже.
Чтобы помочь нам с разделением проблем, существует внедрение зависимостей (DI). Если вы пришли из серверных языков (от Java до PHP), вы, вероятно, уже знакомы с этой концепцией, но если вы клиент-сайдщик, пришедший из jQuery, эта концепция может показаться чем угодно - от глупости, излишества до хипстерства. Но это не так. :-) В широком смысле DI означает, что вы можете объявлять компоненты очень свободно, а затем от любого другого компонента просто запросить его экземпляр, и он будет предоставлен. Вам не нужно знать о порядке загрузки, расположении файлов и тому подобном. Сила может быть не сразу заметна, но я приведу только один (общий) пример: тестирование. Допустим, в нашем приложении нам нужен сервис, который реализует хранение на стороне сервера через REST API и, в зависимости от состояния приложения, также локальное хранение. При выполнении тестов на наших контроллерах мы не хотим общаться с сервером - в конце концов, мы тестируем контроллер. Мы можем просто добавить имитатор сервиса с тем же именем, что и наш оригинальный компонент, и инжектор обеспечит автоматическое получение нашим контроллером поддельного сервиса - наш контроллер не знает и не должен знать разницы. Кстати, о тестировании...
На самом деле это часть раздела 3 об архитектуре, но она настолько важна, что я выделяю ее в отдельный раздел верхнего уровня. Из всех многочисленных плагинов jQuery, которые вы видели, использовали или написали, сколько из них имеют сопутствующий набор тестов? Не очень много, потому что jQuery не очень приспособлен для этого. А вот AngularJS - да. В jQuery единственным способом тестирования часто является самостоятельное создание компонента с образцом/демонстрационной страницей, на которой наши тесты могут выполнять манипуляции с DOM. Тогда нам приходится разрабатывать компонент отдельно и потом интегрировать его в наше приложение. Как неудобно! Поэтому в большинстве случаев при разработке с jQuery мы выбираем итеративную, а не тестовую разработку. И кто может нас винить? Но поскольку у нас есть разделение проблем, в AngularJS мы можем вести разработку, управляемую тестами, итеративно! Например, допустим, нам нужна суперпростая директива для указания в меню текущего маршрута. Мы можем объявить то, что хотим, в представлении нашего приложения:
<a href="/hello" when-active>Hello</a>
Хорошо, теперь мы можем написать тест для несуществующей директивы when-active
:
it( 'should add "active" when the route changes', inject(function() {
var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );
$location.path('/not-matching');
expect( elm.hasClass('active') ).toBeFalsey();
$location.path( '/hello' );
expect( elm.hasClass('active') ).toBeTruthy();
}));
И когда мы запустим наш тест, мы сможем убедиться, что он не работает. Только теперь мы должны создать нашу директиву:
.directive( 'whenActive', function ( $location ) {
return {
scope: true,
link: function ( scope, element, attrs ) {
scope.$on( '$routeChangeSuccess', function () {
if ( $location.path() == element.attr( 'href' ) ) {
element.addClass( 'active' );
}
else {
element.removeClass( 'active' );
}
});
}
};
});
Теперь наш тест пройден и наше меню работает так, как нужно. Наша разработка является одновременно итеративной и управляемой тестами. Очень круто.
Вы'часто слышите "делайте манипуляции с DOM только в директиве". Это необходимость. Относитесь к этому с должным почтением!
Но давайте погрузимся немного глубже...
Некоторые директивы просто украшают то, что уже есть в представлении (вспомните ngClass
) и поэтому иногда сразу же выполняют манипуляции с DOM, а затем, по сути, все готово. Но если директива похожа на "виджет" и имеет шаблон, она должна также соблюдать разделение задач. То есть, шаблон тоже должен оставаться в значительной степени независимым от его реализации в функциях link и controller.
AngularJS поставляется с целым набором инструментов, позволяющих сделать это очень легко; с помощью ngClass
мы можем динамически обновлять класс; ngModel
позволяет двустороннее связывание данных; ngShow
и ngHide
программно показывают или скрывают элемент; и многое другое - включая те, которые мы пишем сами. Другими словами, мы можем делать всевозможные чудеса без манипуляций с DOM. Чем меньше манипуляций с DOM, тем проще тестировать директивы, тем проще их стилизовать, тем проще их изменять в будущем, и тем больше они пригодны для повторного использования и распространения.
Я вижу, что многие разработчики-новички AngularJS используют директивы как место, куда можно бросить кучу jQuery. Другими словами, они думают "раз я не могу делать манипуляции с DOM в контроллере, я возьму этот код и помещу его в директиву". Хотя это, конечно, намного лучше, часто это все равно неправильно.
Вспомните логгер, который мы программировали в разделе 3. Даже если мы поместим его в директиву, мы все равно хотим сделать это "Angular Way". Это по-прежнему не требует никаких манипуляций с DOM! Есть много случаев, когда манипуляции с DOM необходимы, но это гораздо реже, чем вы думаете! Прежде чем делать манипуляции с DOM везде в вашем приложении, спросите себя, действительно ли вам это нужно. Возможно, есть лучший способ.
Вот небольшой пример, который показывает наиболее часто встречающуюся модель. Нам нужна переключаемая кнопка. (Примечание: этот пример немного надуман и немногословен, чтобы представить более сложные случаи, которые решаются точно так же).
.directive( 'myDirective', function () {
return {
template: '<a class="btn">Toggle me!</a>',
link: function ( scope, element, attrs ) {
var on = false;
$(element).click( function () {
on = !on;
$(element).toggleClass('active', on);
});
}
};
});
Здесь есть несколько моментов:
angular.element
и наш компонент будет работать, если его добавить в проект, в котором нет jQuery.angular.element
) будет всегда использовать jQuery, если он был загружен! Поэтому нам не нужно использовать $
- мы можем просто использовать angular.element
.$
- элемент
, передаваемый в функцию link
, уже будет уже элементом jQuery!.directive( 'myDirective', function () {
return {
scope: true,
template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
link: function ( scope, element, attrs ) {
scope.on = false;
scope.toggle = function () {
scope.on = !scope.on;
};
}
};
});
Опять же, шаблонный материал находится в шаблоне, поэтому вы (или ваши пользователи) можете легко поменять его на тот, который соответствует любому необходимому стилю, а логику трогать не нужно. Возможность повторного использования - бум!
И есть еще все эти преимущества, например, тестирование - это просто! Независимо от того, что находится в шаблоне, внутреннее API директивы никогда не затрагивается, поэтому рефакторинг прост. Вы можете изменять шаблон сколько угодно, не трогая директиву. И что бы вы ни изменили, ваши тесты все равно пройдут.
w00t!
Итак, если директивы - это не просто коллекции jQuery-подобных функций, то что же это такое? Директивы - это расширения HTML. Если HTML не делает чего-то, что вам нужно, вы пишете директиву, чтобы сделать это за вас, а затем используете ее так же, как если бы она была частью HTML.
Другими словами, если AngularJS не делает чего-то из коробки, подумайте, как команда могла бы это сделать, чтобы вписать это в ngClick
, ngClass
и т.д.
Даже не используйте jQuery. Даже не включайте его. Он будет сдерживать вас. И когда вы столкнетесь с проблемой, которую, как вам кажется, вы уже знаете, как решить на jQuery, прежде чем доставать $
, попробуйте подумать, как сделать это в рамках AngularJS. Если вы не знаете, спросите! В 19 случаях из 20, лучший способ сделать это не требует jQuery, и попытка решить проблему с помощью jQuery приведет к тому, что вы получите еще больше работы.
В jQuery селекторы используются для поиска элементов DOM и последующей привязки/регистрации обработчиков событий к ним. Когда срабатывает событие, этот (императивный) код выполняется для обновления/изменения DOM.
В AngularJS нужно думать о представлениях, а не об элементах DOM. Представления - это (декларативный) HTML, содержащий директивы AngularJS. Директивы настраивают обработчики событий за кулисами и дают нам динамическое привязывание баз данных. Селекторы используются редко, поэтому необходимость в идентификаторах (и некоторых типах классов) значительно уменьшается. Представления привязаны к моделям (через области видимости). Представления являются проекцией модели. События изменяют модели (то есть данные, свойства области видимости), и представления, проецирующие эти модели, обновляются "автоматически"
В AngularJS думайте о моделях, а не о jQuery-выбранных элементах DOM, которые хранят ваши данные. Думайте о представлениях как о проекциях этих моделей, а не о регистрации обратных вызовов для манипулирования тем, что видит пользователь.
jQuery использует ненавязчивый JavaScript - поведение (JavaScript) отделено от структуры (HTML).
AngularJS использует контроллеры и директивы (каждая из которых может иметь свой собственный контроллер, и/или функции компиляции и связывания) для удаления поведения из представления/структуры (HTML). Angular также имеет сервисы и фильтры, которые помогают разделить/организовать ваше приложение.
См. также https://stackoverflow.com/a/14346528/215945
Один из подходов к проектированию приложения AngularJS:
Вы можете многого добиться с помощью jQuery, не зная о том, как работает прототипическое наследование в JavaScript. При разработке приложений AngularJS вы сможете избежать некоторых распространенных подводных камней, если будете хорошо разбираться в наследовании JavaScript. Рекомендуемая литература: https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs
В AngularJS и jQuery принимает очень разные идеологии. Если вы'вновь поступающие от jQuery, вы можете найти некоторые удивительные отличия. Угловой может сделать вас сердиться. Это нормально, вы должны протолкнуть. Угловой стоит.
библиотека jQuery дает вам инструментарий для выбора произвольных битов в дом и делая специальные изменения в них. Вы можете делать почти все что угодно по частям. Вместо этого автор дает компилятор. Это означает, что AngularJS считывает весь дом сверху донизу и воспринимает его как код, буквально, как инструкции для компилятора. Как он проходит в дом, он ищет конкретный инструкции (директивы компилятора), что сказать в AngularJS компилятор, как себя вести и что делать. Директивы мало объектов JavaScript, которые можно сопоставить со атрибуты, теги, классы или даже комментарии. Когда угловые компилятор определяет, что часть дом соответствует конкретная директива, директива это вызывает функцию, передавая это элемент DOM, любых атрибутов, нынешних $сфера (которая является локальной переменной магазине), и некоторые другие полезные биты. Эти атрибуты могут содержать выражения, которые можно трактовать по директивы, и что сказать ему, как рендерить, и когда он должен обновляться. Затем директивы могут в свою очередь тянет дополнительные угловые компоненты, такие как контроллеры, сервисы и т. д. Что исходит из нижней части компилятора является полностью сформированной веб-приложения, подключен и готов к работе. Это означает, что угловой-это шаблон управляемый. Ваш шаблон диски на JavaScript, а не наоборот. Это радикально поменялись ролями, и полной противоположностью ненавязчивый JavaScript мы писали в течение последних 10 лет или около того. Это может занять некоторое привыкнуть. Если это звучит как это может быть чрезмерно предписывающим и ограничения, ничто не может быть дальше от истины. Потому что AngularJS не лечит ваш HTML-код, вы получаете уровень детализации в формате HTML в веб-приложении. Все возможно, и большинство вещей на удивление легко, как только вы сделаете несколько концептуальных скачков. Позвольте'ы спускайтесь к вшивый песчаный.
Угловые и jQuery делать разные вещи. В AngularJS дает вам набор инструментов для создания web-приложений. jQuery в основном дает вам инструменты для изменения дом. Если jQuery присутствует на Вашей странице, в AngularJS будет использовать его автоматически. Если это'т, в AngularJS корабли с jQuery Lite, которая является урезанной, но все еще прекрасно использовать версию jQuery. Мишко любит jQuery и не'т объект вы используете его. Однако вы найдете, как вы заранее, что вы можете получить почти все ваши работы, используя комбинацию рамки, шаблоны и директив, и вы должны предпочесть этот процесс там, где это возможно, потому что ваш код будет более дискретным, более гибок, и более угловатый. Если вы используете jQuery, вы должны'т быть посыпая его повсюду. Правильное место для манипуляций с DOM в AngularJS-это в директиве. Больше на этом позже.
jQuery-это, как правило, применяется ненавязчиво. Ваш JavaScript-код связан в заголовке (или в подвал), и это единственное место, где он упоминается. Мы используем селекторы выковыривать кусочки страницы и писать плагины для изменения этих частей. JavaScript находится под контролем. HTML-код имеет полностью независимое существование. HTML-код остается семантический даже без JavaScript. Атрибуты onclick функции очень плохая практика. Одна из первых вещей, Ваш будет уведомление о AngularJS это то, что пользовательские атрибуты везде. Ваш HTML будет завален НГ атрибутами, которые по сути являются атрибутами щелчку на стероидах. Эти директивы (директивы компилятора), и являются одним из основных способов, в которых шаблон закреплен на модели. Когда вы впервые видите это, вы могли быть уговорены для того чтобы писать в AngularJS как старой школы интрузивных на JavaScript (как я сделал сначала). На самом деле, в AngularJS не играть по этим правилам. На AngularJS, HTML5-это ваш шаблон. Он составляется в AngularJS, чтобы произвести веб-страницы. Это первая большая разница. На jQuery, веб-страница-это дом, чтобы ими манипулировали. Чтобы в AngularJS, ваш HTML-код должен быть скомпилирован. В AngularJS считывает всю веб-страницу и буквально собирает его в новой веб-страницы с помощью встроенного компилятора. Ваш шаблон должен быть декларативным; ее смысл должен быть понятен, просто читая его. Мы используем пользовательские атрибуты с осмысленными именами. Мы придумываем новые HTML-элементы, снова с осмысленными именами. Дизайнер с минимальных знаний HTML и никаких навыков кодирования можете прочитать в AngularJS шаблон и понять, что он делает. Он или она могут вносить изменения. Это угловой способ.
Один из первых вопросов, который я задал себе, когда начиная AngularJS и проходит через учебники-это ", Где мой код?&и". Я'вэ написано, Нет JavaScript, и еще у меня все это поведение. Ответ очевиден. Потому что в AngularJS компилирует дом, AngularJS это обрабатывать свой HTML-код. Для многих простых случаях это'ы часто достаточно просто написать шаблон и сообщить AngularJS, скомпилировать в приложение для вас. Ваш шаблон диски вашего приложения. Это'ы рассматриваться как МКД. Вы пишете компонентов AngularJS и в AngularJS будет заботиться о вытягивая их и делая их доступными в нужное время, исходя из структуры вашего шаблона. Это очень отличается от стандартной в MVC шаблону, где шаблон только на выход. Это's больше похож на в XSLT, чем Ruby на Rails например. Это радикальная инверсия управления, что требует некоторого привыкания. Перестань пытаться вести свой приложений на языке JavaScript. Пусть шаблон диска приложение, и пусть в AngularJS позаботиться электроустановочных компонентов вместе. Это также является угловой способ.
С jQuery HTML-страницы должен содержать смысловое смысловое содержание. Если JavaScript отключен (пользователь или поисковик) ваш контент остается доступным. Потому что в AngularJS лечит вашу HTML-страницу в качестве шаблона. Шаблон не должен быть семантического содержания обычно хранится в вашей модели, которая в конечном счете исходит от вашего API. В AngularJS компилирует ваш дом с моделью, чтобы произвести семантический веб-страницы. Ваш HTML-код уже не смысловой, а, API и скомпилированные дом семантических. На AngularJS, смысл жизни в этой модели HTML-это просто шаблон, только для просмотра. В этот момент Вы, вероятно, имеют всевозможные вопросы, касающиеся СЕО, и доступность, и это правильно. Есть здесь вопросы. Большинство читателей экране теперь будет разбирать на JavaScript. Поисковые системы также может индексировать AJAXed содержание. Тем не менее, вы хотите убедиться, что вы используете URL-адреса pushstate и у вас есть приличная Карта сайта. См. здесь для обсуждения вопроса: https://stackoverflow.com/a/23245379/687677
Разделение (СНК) - это шаблон, который рос на протяжении многих лет веб-разработки по различным причинам, включая SEO, доступность и несовместимостью с браузером. Это выглядит так:
Модули расширения для jQuery. В AngularJS директивы расширить возможности Вашего браузера.
В jQuery мы определяем плагинов путем добавления функций на jQuery.прототип. Мы потом привязываете их в дом путем подбора элементов и вызов плагина на результат. Идея в том, чтобы расширить возможности библиотеки jQuery.
Например, если вы хотите, карусели на вашу страницу, вы можете создать неупорядоченный список фигур, возможно, завернутый в элемент навигации. Затем вы могли бы написать некоторые jQuery, чтобы выбрать список на страницу и обновил ее а галерея с тайм-ауты, чтобы сделать раздвижными анимации.
На AngularJS, мы определяем директив. Директива-это функция, которая возвращает объект JSON. Этот объект говорит в AngularJS то, что DOM-элементы, чтобы искать, и какие изменения, чтобы сделать их. Директивы закреплены в шаблон с помощью атрибутов или элементов, которые вы выдумываете. Идея в том, чтобы расширить возможности HTML с новыми атрибутами и элементами.
В в AngularJS способ расширить возможности родной просмотр HTML-кода. Вы должны написать HTML-код, который выглядит как HTML-код, расширен пользовательскими атрибутами и элементами.
Если вы хотите, карусели, просто использовать <карусель />
элемент, а затем определить директиву, чтобы вытащить в шаблон, и принять, что присоски работают.
Тенденция с jQuery писать большие плагины, такие как лайтбокс, который мы потом настроить путем передачи в множество значений и вариантов. Это ошибка на AngularJS. Возьмем, к примеру, выпадающего. При написании выпадающее плагин вы можете быть уговорены для того чтобы нажать код в обработчики, возможно, функции, чтобы добавить в шеврон, который либо вверх, либо вниз, возможно, изменить класс разложенном элемент, показать скрыть меню, все полезные вещи. Пока вы хотите сделать небольшое изменение. Скажем, у вас есть меню, которое вы хотите разворачиваться при наведении. Ну теперь у нас проблема. Наш плагин имеет проводной доступ в наш обработчик события click для нас, мы'вновь придется добавить параметр конфигурации, чтобы сделать его вести себя по-другому в данном конкретном случае. На AngularJS, мы пишем меньшее директив. Наш выпадающем директива будет смехотворно мала. Он может поддерживать сложенном состоянии, и предоставляют методы для того чтобы сложить(), развернуть() или toggle(). Эти методы просто обновить $охвата.меню.видно что логическое проведение государственной. Теперь в наш шаблон мы можем проволоки это:
<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
Необходимость обновления при наведении курсора мыши?
<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
Шаблон управляет приложением Итак, мы получаем гранулярность на уровне HTML. Если мы хотим сделать индивидуальной исключения, шаблон делает это легко.
JQuery Плагины создаются в закрытие. Конфиденциальность сохраняется в течение этого закрытия. Это's до вас, чтобы сохранить вашу цепочку, в рамках закрытия. Вы только действительно есть доступ к набору узлов DOM, переданного в плагин на jQuery, плюс любые локальные переменные, определенные в закрытии и любые глобальные переменные, которые вы определили. Это означает, что плагины являются вполне самодостаточными. Это хорошо, но могут быть ограничены создания всего приложения. Пытаюсь передать данные между разделами динамической страницы становится муторно. В AngularJS есть $охвата объектов. Это специальные объекты, созданные и поддерживаемые в AngularJS, в которых вы храните свои модели. Некоторые директивы породит новый $объем, который по умолчанию наследует от своего оборачивать $объем с помощью JavaScript прототипное наследование. Объект $scope является доступным в контроллер и вид. Это самая умная часть. Поскольку структура $объем наследство примерно соответствует структуре дом, элементы имеют доступ к их собственной области, и любой плавно, содержащий областей, вплоть до глобальной $охвата (которая не является глобальной области видимости). Это делает его гораздо проще для передачи данных, и для хранения данных на соответствующем уровне. Если в выпадающем развернул, нужен только выпадающий $scope, чтобы знать об этом. Если пользователь обновляет свои предпочтения, вы, возможно, захотите, чтобы обновить глобальный $объем, и любые вложенные области видимости прислушиваясь к предпочтениям пользователей будут автоматически предупреждены. Это может показаться сложным, на самом деле, когда вы расслабляетесь в это, Это's, Как летать. Вы Don'т нужно создать объект $scope, в AngularJS создает и настраивает его для вас, правильно и уместно использовать в своей иерархии шаблонов. Затем в AngularJS делает его доступным для компонента с помощью магических инъекции зависимостей (подробнее об этом позже).
В jQuery вы сделаете свой дом вручную. Вы создаете новые элементы DOM программно. Если у вас есть JSON-массив, и вы хотите, чтобы положить его на дом, вы должны написать функцию, чтобы генерировать HTML-код и вставьте его. На AngularJS, вы можете сделать это слишком, но вы не рекомендуется использовать привязку данных. Изменить свою модель, и потому, что дом привязан к нему через шаблон ваш дом будет обновляться автоматически, без необходимости вмешательства. Потому что привязка данных осуществляется с помощью шаблона, с помощью атрибута или синтаксис фигурных скобок, это's очень легко сделать. Там's немного когнитивные издержки, связанные с этим, так что вы'll найти себя делать это все время.
<input ng-model="user.name" />
Связывает входной элемент $охвата.пользователей.имя
. Обновление входных данных будет обновлять значение в вашей текущей области, и наоборот.
Аналогично:
<p>
{{user.name}}
</p>
будет выводить имя пользователя в пункте. Это'ы живой обязательными, так что если `$объем.пользователей.значение имени обновляется, шаблон будет тоже обновить.
В jQuery сделать AJAX-вызов-это довольно простой, но это's по-прежнему то, что вы могли бы думать дважды об. Там'ы добавлены сложности, чтобы думать о, и справедливый кусок скрипта для поддержания. На AngularJS, AJAX-это по умолчанию идти к решению, и это происходит все время, почти не замечая вас. Вы можете включать шаблоны с НГ-включают. Вы можете применить шаблон с простой пользовательский директивы. Вы можете обернуть в AJAX-вызов в сервис и создать себе на GitHub или на Flickr сервиса, доступ к которому можно получить с поразительной легкостью.
В jQuery, если мы хотим совершить небольшой дом связанных задач, таких как вытягивать ленту из API, можно написать маленькую функцию, чтобы сделать это в нашей закрытия. Что'ы верное решение, но что если мы хотим часто доступ к этому каналу? Что, если мы хотим, чтобы повторно использовать этот код в другом приложении?
Автор дает нам объекты обслуживания.
Услуги простые объекты, которые содержат функции и данные. Они всегда одиночки, то есть не может быть больше, чем один из них. Скажем, мы хотим получить доступ к переполнению стека API, мы могли бы написать StackOverflowService
, который определяет методы для этого.
Позвольте'ы сказать, у нас есть корзина. Мы могли бы определить ShoppingCartService, который поддерживает нашу корзину и содержит методы для добавления и удаления элементов. Поскольку служба является одноэлементным, и является общей для всех других компонентов, любой объект, который нужно могу написать в корзину и вытаскивать из него данные. Это's всегда такой же тележкой.
Объектами обслуживания являются самодостаточными в AngularJS компонентов, которые мы можем использовать и повторно использовать так, как считаем нужным. Они простые объекты JSON, содержащий функции и данные. Они всегда одиночки, так что если вы храните данные на услуги в одном месте, вы можете получить эти данные где-нибудь просто запросив ту же услугу.
В AngularJS управляет зависимостями для вас. Если вы хотите, чтобы объект, просто обратитесь к нему и AngularJS будет сделать это для вас. Пока вы не начнете использовать это, Это'трудно объяснить, что именно массовое благо времени это. Ничего подобного в AngularJS Ди существует внутри и jQuery. Ди означает, что вместо того, чтобы писать свои приложения и подключение его вместе, вы вместо того, чтобы определить библиотеку компонентов, каждый из которых идентифицируется строкой. Говорят, у меня есть компонент, который называется 'FlickrService', который определяет методы для протаскивания в JSON кормит из Flickr. Теперь, если я хочу написать контроллер, который может получить доступ на Flickr, мне просто нужно обратиться к 'FlickrService' по имени, когда я заявляю контроллер. В AngularJS будет заботиться о создании компонент и делает его доступным для моего контроллера. Например, здесь я определяю услуги:
myApp.service('FlickrService', function() {
return {
getFeed: function() { // do something here }
}
});
Теперь, когда я хочу использовать эту службу я просто обращаюсь к нему по имени, как это:
myApp.controller('myController', ['FlickrService', function(FlickrService) {
FlickrService.getFeed()
}]);
Автор признает, что объект FlickrService необходима для создания контроллера, и обеспечить для нас. Это делает проводку все вместе очень легко, и практически исключает какие-либо тенденции к spagettification. У нас есть плоский список компонентов, и AngularJS руки их нам по одному, как и когда мы нуждаемся в них.
в jQuery говорит очень мало о том, как вы должны организовать ваш код. AngularJS не имеет отзывов. В AngularJS дает вам модули, в которые вы можете разместить ваш код. Если вы'вновь пишет сценарий, который рассказывает, например, Flickr, вы можете создать модуль Flickr, чтобы обернуть все ваши Flickr и связанные функции. Модули могут содержать другие модули (Ди). Ваша главная приложения обычно является модуль, и это должно включать все другие модули вашего приложения будет зависеть от. Вы получаете простой повторное использование кода, если вы хотите написать еще одно приложение, основанное на Flickr, вы можете просто включить модуль Flickr и вуаля, у вас есть доступ к вашей учетной записи на Flickr, связанных с функциями нового приложения. Модули содержат компоненты в AngularJS. Когда мы включаем модуль, все компоненты в том, что модуль стал доступен нам как простым списком по их уникальным строк. Затем мы можем ввести этих компонентов друг в друга с помощью AngularJS'механизм внедрения зависимостей С.
В AngularJS и jQuery не враги. Это'ы можно использовать jQuery в AngularJS не очень красиво. Если вы'вновь с помощью AngularJS хорошо (шаблоны, привязки данных, $объем, директив и т. д.) вы найдете необходимую вам много меньше, чем в jQuery вы могли бы потребовать. Главное понимать, что ваш шаблон диски вашего приложения. Прекрати писать большими плагинов, которые сделают все. Вместо того, чтобы написать мало указаний, что делать что-то одно, то написать простой шаблон для свяжите их вместе. Меньше думать о ненавязчивый JavaScript, и вместо того, чтобы думать в терминах расширений HTML.
Я так взволнован о AngularJS, я написал небольшую книгу о нем, которую вы'вновь очень рады, чтобы читать онлайн http://nicholasjohnson.com/angular-book/. Я надеюсь, что это's полезн.
Можете ли вы описать смену парадигмы, которая необходима?
Императив против декларативности.
В jQuery вы говорите DOM, что должно произойти, шаг за шагом. В AngularJS вы описываете, какие результаты вы хотите получить, но не как это сделать. Подробнее об этом здесь. Также ознакомьтесь с ответом Марка Райкока (Mark Rajcok').
Как по-другому строить и проектировать веб-приложения на стороне клиента?
AngularJS - это целый клиентский фреймворк, который использует паттерн MVC (посмотрите на их графическое представление). В нем большое внимание уделяется разделению задач.
В чем заключается самая большая разница? Что я должен перестать делать/использовать; что я должен начать делать/использовать вместо этого?
jQuery - это библиотека
AngularJS - это красивый клиентский фреймворк, хорошо поддающийся тестированию, который сочетает в себе множество классных вещей, таких как MVC, внедрение зависимостей, связывание данных и многое другое.
Он фокусируется на разделении проблем и тестировании (модульное тестирование и сквозное тестирование), что облегчает разработку, управляемую тестами.
Лучший способ начать - изучить их потрясающий учебник. Вы сможете пройти все шаги за пару часов; однако, если вы хотите освоить концепции за кулисами, они включают огромное количество ссылок для дальнейшего чтения.
Есть ли какие-либо соображения/ограничения на стороне сервера?
Вы можете использовать его в существующих приложениях, где уже используется чистый jQuery. Однако, если вы хотите полностью использовать возможности AngularJS, вы можете рассмотреть возможность кодирования серверной части с использованием подхода RESTful.
Это позволит вам использовать их фабрику ресурсов, которая создает абстракцию вашего серверного RESTful API и делает вызовы на стороне сервера (получение, сохранение, удаление и т.д.) невероятно простыми.
Чтобы описать, что "парадигмы" и, я думаю, краткий ответ может хватить.
В на jQuery используется селекторы чтобы найти элементы, а затем подключить их:
$('#идентификатор .класс').нажмите кнопку(doStuff);
В автор, вы используете инструкции, чтобы отметить элементы, напрямую, подключить их:
в <с НГ-нажмите кнопку=на"doStuff()" и>
В AngularJS не'т необходимость (или желание), вы поиск элементов с помощью селекторов - основное отличие в AngularJS'ы jqLite против полномасштабной на jQuery это jqLite не поддерживает селекторы.
Поэтому, когда человек говорит: "Дон'т включить jQuery на всех", Он's главным образом потому, что они не'т хочу, чтобы вы использовать селекторы; они хотят, чтобы вы научитесь использовать директивами вместо. Прямые, не выбрать!
<Н1>в jQuery</Н1>
jQuery делает смехотворно длинных команд JavaScript, такие как getElementByHerpDerp
короче и кросс-браузер.
<Н1>в AngularJS</Н1>
В AngularJS позволяет сделать свой собственный HTML-теги/атрибуты, которые делают вещи, которые хорошо работают с динамическими веб-приложениями (так как HTML был предназначен для статических страниц).
<Н1>редактирование:</Н1>
Говорю "У меня есть библиотека jQuery фон, как я думаю на AngularJS?" это как сказать "Я есть HTML-фон, как я думаю в JavaScript?" и тот факт, что вы'вновь задавая вопрос показывает, что вы скорее всего не'т понять основные цели этих двух ресурсов. Вот почему я решил ответить на вопрос, просто указываю на принципиальную разницу, а не через список, сказав, что "в AngularJS использует директивы, тогда как jQuery использует CSS-селекторы, чтобы сделать объект jQuery, который делает и то и это и т. д....&и". Этот вопрос не требует ответа.
jQuery-это способ программирования JavaScript в простой браузер. Короче, кросс-браузерная команды и т. д.
В AngularJS расширяет HTML, так что вы Дон'т придется поставить в <див>
везде просто сделать заявку. Это делает HTML-код на самом деле работает для приложений, нежели то, что он был разработан для, который является статическим, образовательный веб-страниц. Это достигается окольными путями с помощью JavaScript, но принципиально он представляет собой расширение HTML, а не javascript-код.
библиотека jQuery: вы много думаете о 'запрос дом' для элементов DOM и делать что-то.
В AngularJS: модель является истиной, и ты всегда думаешь, что с этой точки зрения.
Например, когда вы получаете данные с сервера, который вы хотите отобразить в каком-либо формате в дом, в jQuery, вы должны '1. Найти' где в доме вы хотите разместить эти данные, '2. Обновление/добавление' он есть, создавая новый узел или просто установив его innerHTML будет. Затем, когда вы хотите обновить вид, то вы '3. Найти' расположении и '4. Обновление'. Этот цикл поиска и обновления все сделано в том же контексте получения и форматирования данных с сервера ушел на AngularJS.
С AngularJS у вас есть свои модели (объекты JavaScript, которые вы уже привыкли), а стоимость модели говорит вам о модели (очевидно) и про вид, и эксплуатации на модели автоматически распространяется на вид, так что вы Дон'т должны думать об этом. Вы окажетесь на AngularJS больше не найти вещи в дом.
Положить в еще один способ в jQuery, вы должны думать о селекторах CSS, то есть, где див
или ТД
, который имеет класс или атрибут и т. д., так что я могу получить их HTML или цвет, или величину, но на AngularJS, вы найдете себя на мысли такой: какую модель мне дело, я буду установить модели's в значение true. Вы не утруждая себя того, считает, отражающие это значение флажком или проживает в ТД
элемента (детали, которые вы бы чаще нужно думать о в jQuery).
И манипуляций с DOM в в AngularJS, вы окажетесь добавления директив и фильтров, которые можно рассматривать как корректный HTML-расширений.
Еще одна вещь, которую вы будете испытывать на AngularJS: в jQuery вызова функции jQuery много, на AngularJS, в AngularJS будет вызов функции, так что в AngularJS будет 'скажу вам, как делать вещи', но преимущества того стоят, поэтому обучение в AngularJS, как правило, означает изучение того, что автор хочет либо пути в AngularJS требует, чтобы вы представить свои функции и будем называть его соответственно. Это одна из вещей, которая делает в AngularJS рамки, нежели библиотеку.
Это очень приятно, но пространные ответы.
Подводя итог моего опыта:
jQuery-это библиотека манипуляций с DOM.
AngularJS-это МВ* рамки.
На самом деле, AngularJS-это один из немногих на JavaScript MV фреймворков (много инструментов для JavaScript MVC и все-таки попадет в библиотеки категории).
Являясь рамочным, он принимает свой код и берет ответственность за свои решения о том, как называть и когда!
Сама разработка включает в себя jQuery версии Lite в нем. Так что для некоторых основной выбор дом/манипуляции, вы действительно Дон'т иметь, чтобы включить библиотеку jQuery (это экономит много байтов для работы на сети).
Автор имеет понятие, что "указаний" и для DOM манипуляции и разработка многоразовых компонентов пользовательского интерфейса, так что вы должны использовать его, когда вы чувствуете необходимость ведения DOM манипуляции связанные вещи (директивы являются единственным местом, где вы должны написать на jQuery код, с помощью AngularJS).
В AngularJS включает несколько кривой обучения (более чем на jQuery :-).
-->для любого застройщика с jQuery фон, мой первый совет был бы, чтобы "учить JavaScript как первый язык класса, прежде чем прыгать на богатую инфраструктуру, как в AngularJS!&и" Я узнал, что, понятно, нелегкий путь.
Удачи.
Они'снова яблоки и апельсины. Вы Don'т хотим, чтобы сравнить их. Они'ре две разные вещи. В AngularJS уже используется jQuery Lite и встроенный, который позволяет выполнять основные манипуляции с DOM без даже в том числе и в полномасштабной версии jQuery.
jQuery-это все о манипуляции DOM. Он решает все крест боли браузера, в противном случае вам придется иметь дело с, но это's не фреймворк, который позволяет разделить приложение на составляющие, как в AngularJS.
Хорошая вещь о AngularJS это то, что он позволяет отделить/выделить манипуляций с DOM в директивах. Имеются встроенные директивы, которые можно использовать, такие как НГ-нажмите кнопку. Вы можете создавать свои собственные пользовательские директивы, которая будет содержать все ваши представления логики или манипуляций с DOM, так что вы Дон'т в конечном итоге смешиваются код манипуляции DOM в контроллеры или услуг, которые должны заботиться о бизнес-логике.
Угловые ломается ваше приложение в
и есть еще одна вещь, что'ы директивы. Это'ы атрибута можно прикрепить к любому элементу DOM, и вы можете сходить с ума с jQuery в нем, не беспокоясь о своем и jQuery когда-нибудь конфликты с компонентами AngularJS или заморочки с его архитектурой.
Я слышала, что от встречи я присутствовал, один из основателей угловых сказал, что они упорно трудились, чтобы отделить манипуляций с DOM, так что не пытайтесь включать их обратно.
Послушать подкаст JavaScript в джаббер: эпизод #32 что оригинальные создатели автор: Hevery &амп Миско; Игорь Минар. Они много говорят о том, что это's, как прийти в AngularJS от других JavaScript фоны, особенно на jQuery.
Одно из замечаний, сделанных в подкасте сделал многое для меня нажмите с уважением к вашему вопросу:
Мишко: [...] одна из вещей, мы думали об очень вряд ли в угловой является, как мы предоставляем множество аварийных люков, так что вы можете выйти и в принципе придумать выход из этой ситуации. Таким образом, для нас Ответ Это называется “директивы”. И с директивами, вы, по существу, стала обычной небольшой jQuery и JavaScript, вы можете делать все, что захочешь.
Игорь: так что думаю, что директивы, как указание компилятору, что говорит он всякий раз, когда вы столкнетесь с этим определенный элемент или этот CSS в шаблоне, и вы держите такого рода кодом, и этот код отвечает за элемент и все, что ниже этого элемента в DOM дерево.
Стенограмма весь эпизод доступен по ссылке представленной выше.
Так, чтобы прямо ответить на ваш вопрос: AngularJS-это очень упрямый и истинный МВ* рамки. Однако, вы все еще можете делать все по-настоящему крутые вещи вы знаете и любите с jQuery внутри директивы. Это'не вопрос "Как мне делать, что я в jQuery?&и" как это'с вопросом "Как я дополнение в AngularJS со всеми вещами, которые я использовал, чтобы сделать в jQuery?&и"
Это's действительно два очень разных состояния ума.
Я нахожу этот вопрос интересным, потому что мои первые серьезные воздействия программирования JavaScript был Node.js и AngularJS. Я никогда не узнал, jQuery и я думаю, что'ы хорошо, потому что я Дон'т придется что-нибудь забыть. На самом деле, я активно избегайте jQuery решения моих проблем, а наоборот, смотреть только за собой "в AngularJS способ", чтобы решить их. Так что, думаю, мой ответ на этот вопрос, по сути, сводятся к тому, что "мыслить, как тот, кто никогда не учился в jQuery" и избежать соблазна включить jQuery в непосредственно (очевидно, в AngularJS использует его в какой-то степени за кадром).
В AngularJS и jQuery:
В AngularJS и jQuery совершенно разные на каждом уровне, кроме функциональности JQLite и вы увидите, как только вы начать обучение в AngularJS базовые функции (я объяснил ниже).
AngularJS-это боковые рамки клиент, который предлагает строить независимые приложения на стороне клиента. JQuery-это библиотека стороне клиента, которые играют вокруг дома.
В AngularJS крутой принцип - Если вы хотите, чтобы некоторые изменения в пользовательском интерфейсе думаю от модели данных перспективных изменений. Изменение ваших данных и пользовательского интерфейса будет повторно представлять себя. Вам не нужно играть вокруг дом каждый раз, пока вряд ли требуется, и это также должно быть обработано с помощью угловых директив.
Чтобы ответить на этот вопрос, я хочу поделиться своим опытом на первом корпоративных приложений с AngularJS. Это самые удивительные особенности, которые обеспечивают Угловое, где мы начинаем изменять наш jQuery и мышление, и мы получаем угловые как каркас, а не библиотека.
Два-способ привязки данных является удивительным: У меня была сетка с все обновления, DELTE, вставить. У меня есть объект данных, который связывает сетки's модель с использованием НГ-повторить. Вам нужно всего лишь написать одну строку простой JavaScript-код, для вставки и удаления, и что'с его. сетка автоматически обновляется сетки модели моментально изменяет. Функциональность обновления в реальном времени, без код для него. Вы чувствовать себя удивительно!!!
Директивы многоразовые супер: Писать директивы в одном месте и использовать его в приложении. ОМГ!!! Я использовал эти директивы для подкачки, регулярное выражение, проверок и т. д. Это действительно здорово!
Маршрутизация сильно: Это's до реализации, как вы хотите использовать его, но это требует очень мало строк кода для отправки запроса указать HTML и контроллер (на JavaScript)
Контроллеры большое: Контроллеры позаботиться о собственном HTML, но это разделение хорошо работает для общей функциональности также. Если вы хотите вызвать ту же функцию на нажатие кнопки на мастер HTML, а просто написать то же имя функции в каждый контроллер и писать индивидуальный код.
Плагины: Есть много других подобных функций, как показывает оверлей в вашем приложении. Вы Don'т должны написать код для этого, просто используйте оверлей плагин доступен как душ-верхний слой, и это автоматически позаботиться обо всех запрос (XHR-запрос) - запросы.
Идеально подходит для спокойный архитектура: Будучи полным рамок делает в AngularJS приятно работать с RESTful-архитектуры. Называть остальное фигня API является очень простой и
Услуги: пишите общие коды, используя сервисы и меньше кода в контроллерах. Услуги могут быть использованы для общих функций между контроллерами.
Расширяемость: угловой продлил директивы HTML с использованием угловых директив. Написать выражения внутри HTML и оценки их выполнения. Создание собственных директив и услуг и использовать их в другом проекте без каких-либо дополнительных усилий.
Как на JavaScript МВ* Новичок и чисто ориентируясь на архитектуру приложения (не сервер/клиентские вопросы), я, безусловно, рекомендую следующий ресурс (который меня удивляет, это'т еще упомянули): JavaScript в шаблоны проектирования, по Адди Османи, в качестве введения к различным в JavaScript шаблоны проектирования. Термины, используемые в ответе на этот вопрос берутся из вышеописанных документов. Я'м не собираюсь повторять то, что было очень хорошо сформулировано в принятой ответ. Вместо этого в ответ ссылки на теоретические предпосылки, который в AngularJS питания (и других библиотек).
Как и я, вы быстро поймете, что AngularJS (или Ember.js, Дюрандаль, &усилителя; другой MV фреймворков на то пошло) является одним сложных условиях собирать множество различных шаблонов проектирования на JavaScript.
Я нашел его легче, также, для теста (1) родной JavaScript код и (2) небольшие библиотеки для каждой из этих моделей отдельно перед погружением в одну глобальную структуру. Это позволило мне лучше понять, какие важные вопросы в рамках адреса (потому что вы лично столкнулись с проблемой).
Например:
Примечание: этот список не полный, ни 'лучших библиотек'; Они просто оказались библиотеки, которые я использую. Эти библиотеки также включают в себя несколько шаблонов, упомянутых, просто их основных направлений или целей. Если вы чувствуете, что чего-то не хватает из этого списка, пожалуйста, укажите это в комментариях, и я буду рад, чтобы добавить его.
На самом деле, если вы'вновь с помощью AngularJS, вы Дон'т нуждаются в jQuery больше. Сам автор имеет обязательную силу и директивы, которая является очень хорошим, что "замена" и для большинства вещей, которые вы можете сделать с jQuery.
Я обычно разрабатывать мобильные приложения с использованием AngularJS и Кордоба. Единственное, что в jQuery я нужен селектор.
Загуглив, я вижу, что есть автономный модуль селектор jQuery там. Это'ы шипеть.
И я решила сделать крошечный фрагмент кода, который поможет мне быстро запустить сайт, с помощью AngularJS с силой селектор jQuery (через шипение).
Я поделился мой код здесь: https://github.com/huytd/Sizzular