Должны ли мы использовать jQuery с AngularJS?

Question

Наш сайт в настоящее время использует библиотеку jQuery и получает трафик около 1 миллиона ежемесячно. Мы хотим включить подход, ориентированный на API, поэтому решили перейти на Javascript MVC и выбрали для него angularJS.

Теперь, вопрос в том, должен ли я использовать jQuery в верхней части углового, чтобы мне пришлось переписать минимальный код манипуляции DOM, или я должен переписать все по Угловому пути? Мы используем плагины jQuery, такие как plupload, jQuery UI. и т. д. на веб-сайте. Пожалуйста, предложите лучший способ миграции (также важно время загрузки страницы).

Уже прошел через "Thinking in AngularJS" if I have a jQuery background?, но не получив четкий ответ

Answer 1

Хорошо, что касается AngularJS, который вам необходимо рассмотреть перед выполнением миграции.

1. Он обеспечивает двухстороннюю привязку только путем хранения переменной в области видимости.
2. Другое дело, что нам нужно написать код в сравнении с JQuery.
3. Реализация в модульном режиме (путем создания angular.module)
4. Сдвинуть большую часть кода с Javascript на HTML, что выглядит более чистым.
5. Образцы Singleton для хранения данных & делить его между несколькими контроллерами или службами.
6. Встраивается в меньшую версию jQuery, которая известна как JQlite, которая имеет большинство базовых функций, но вы хотите использовать JQuery в AngularJS, тогда она будет легко доступна, просто вам нужно добавить в нее ссылку jQuery, после чего Функциональность JQLite преобразуется в JQuery.

---

Вы не должны использовать JQuery на вершине AngularJS, потому что AngularJS переваривать цикл обыкновения работать, если мы делаем любую угловую манипуляцию DOM или переменную манипуляцию области видимости с помощью JQuery.

Как перенести вас компонент Jquery к AngularJS вы должны следовать ниже вещей

1. Вам нужно первый поиск angular-ui-bootstrap сайт, потому что они покрывали большую часть компонентов пользовательского интерфейса, который уже преобразуется в угловой.
2. Я уверен, что вы не найдете каждый плагин с угловой версией, при этом вы должны перенести этот плагин на директиву. Который даст вам контроллер над элементом DOM, где когда-либо была установлена ​​директива. (Example here для директивы Datepicker)
3. Не пытайтесь связать событие из внешнего углового контекста, который создаст цикл дайджеста, что приведет к влиянию на привязку обновление пользовательского интерфейса.
4. Убедитесь, делая любое AJAX вызов, который должен быть с помощью $http, а не с помощью $.ajax
5. Есть много мест, где можно найти в JQuery код, который будет заменить директивой нг-класса, например, если вы делаете только добавление & удаление класс или отображение какого-либо элемента на основе любого условия, так что код jquery может быть заменен с помощью команды ng-class
6. Ищите места, где вы удаляете только DOM или добавляете DOM, который можно было бы легко заменить на ng-if или показать только скрытый элемент можно с помощью ng-show/ng-hide
7. Также найдите такую ​​часть в пользовательском интерфейсе, в которой вы создаете ту же самую DOM, что и для цикла, который может быть преобразован в угловую нативную директиву ng-repeat
8. Если у вас есть случай, когда вы хотите показать и скрыть несколько элементов, кода будет осуществляться с использованием директивы ng-switch

Answer 2

Использование Углового для наращивания контроллеров и клиентов API, тогда как время позволяет двигаться как много манипуляции DOM, и как можно угловых директивы. Затем подождите, пока Angular 2 не будет выпущен, и повторите все заново.

Answer 3

Это хороший способ приблизиться к нему. Если вы хотите смешать jQuery с Angular .. напишите директивы в AngularJS, а в разделе ссылок этих директив вы можете включить jQuery для манипуляций с DOM.

Имейте в виду, что AngularJS использует jQuery lite, поэтому многое из того, что делает jQuery, уже встроено в Angular.

Например, вы можете использовать JQuery облегченный в угловую как этот нигде в угловом приложении:

angular.element('.class').append('<p>foo</p>'); 

и внутри функции директивы связи,

angular.module('TestModule') 
.directive('jqueryTestDirective', ['$timeout', function($timeout) { 
    return { 
     restrict: 'E', 
     link : function (scope, element) { 
     $timeout(function(){ 
      element.append('<p>foo</p>'); 
     }); 
     } 
}]); 

<jquery-test-directive></jquery-test-directive>