Czy powinniśmy używać jQuery z AngularJS?

Question

Nasza strona internetowa korzysta obecnie z biblioteki jQuery i generuje ruch o wartości około 1 miliona miesięcznie. Chcemy uwzględnić podejście oparte na API, więc zdecydowaliśmy się przejść do Javascript MVC i wybraliśmy dla niego angularJS.

Teraz moje pytanie brzmi, czy powinienem użyć jQuery na górze Angular, więc muszę przepisać minimalny kod manipulacji DOM, czy powinienem napisać wszystko od nowa w sposób Angular? Używamy wtyczek jQuery takich jak plupload, jQuery UI. itp. na stronie internetowej. Proszę zasugerować najlepszy sposób migracji (liczy się również czas wczytywania strony).

Już przeszedł "Thinking in AngularJS" if I have a jQuery background? ale nie uzyskanie jednoznacznej odpowiedzi

Answer 1

Dobra rzecz dotycząca AngularJS, którą należy rozważyć przed wykonaniem Migracji.

1. Zapewnia dwukierunkowe wiązanie tylko poprzez przechowywanie zmiennej w zakresie.
2. Inna rzecz, potrzebujemy napisać kod w porównaniu do JQuery.
3. Implementacja w sposób modułowy (przez utworzenie angular.module)
4. Przesunięcie większości kodu z Javascript do HTML, który wygląda na bardziej przejrzysty.
5. Modele Singleton służą do przechowywania danych & udostępniać je pomiędzy wieloma kontrolerami lub usługami.
6. Jest on zbudowany z mniejszej wersji jQuery, która jest znana jako JQlite, która ma większość podstawowych funkcji, ale chcesz używać JQuery w AngularJS, wtedy będzie łatwo dostępna, wystarczy dodać w niej odniesienie do jQuery, po czym Funkcjonalność JQLite zostaje przekonwertowana na JQuery.

---

Nie należy używać jQuery na szczycie angularjs, ponieważ angularjs strawić cyklu przyzwyczajenie uruchomić jeśli nie zrobimy żadnego kątowego manipulacji DOM lub zakres zmiennej manipulacji przy użyciu jQuery.

Jak migrować Ci składnik jQuery angularjs trzeba wykonać poniżej rzeczy

1. trzeba pierwszej stronie wyszukiwania angular-ui-bootstrap bo pokryły większość składników UI, który już przeliczone na kanciasty.
2. Jestem pewien, że nie znajdziesz każdej wtyczki w wersji Angular, w którą powinieneś owinąć tę wtyczkę do dyrektywy. Które dadzą ci kontroler nad elementem DOM, w którym kiedykolwiek została umieszczona dyrektywa. (Example here dla Datepicker za pomocą dyrektywy)
3. Nie próbuj wiązać zdarzenia z zewnętrznego kątowego kontekstu, który utworzy cykl trawienia, który spowoduje wpływ na wiązanie Aktualizacja w interfejsie użytkownika.
4. Upewnić się podczas dokonywania jakichkolwiek wywołanie ajax, które powinny być korzystając $http zamiast używać $.ajax
5. Istnieje wiele miejsc, gdzie można znaleźć w kodzie jquery że będzie zastąpić dyrektywy ng klasy, jak jeśli robisz tylko dodanie & usuwania klasa lub pokazanie jakiegoś elementu na podstawie dowolnego warunku, aby ten rodzaj kodu jquery mógł zostać zastąpiony przez zastosowanie dyrektywy ng-class
6. Poszukaj miejsc, w których usuwasz tylko DOM lub dodajesz DOM, który może być łatwo zastąpiony przez ng-if dyrektywy lub tylko pokaż ukryj element można zrobić przy użyciu albo ng-show/ng-hide
7. znaleźć również taką rolę w interfejsie, w którym tworzysz sam DOM przy użyciu pętli for, które mogą być konwertowane na kątowym rodzimej dyrektywy ng-repeat
8. Jeśli masz jakieś sprawy, gdzie chciał pokazać i ukryć wiele elementów, tak że część kodu zostałaby zaimplementowana przy użyciu dyrektywy ng-switch

Answer 2

Zastosowanie kątowa do budowania kontrolerów i klientów API, to jak czas pozwolenia przenieść jak najwięcej manipulacji DOM i możliwie dyrektyw kątowych. Następnie zaczekaj na zwolnienie Angular 2 i wykonaj to ponownie.

Answer 3

Oto dobry sposób podejścia do niej. Jeśli chcesz miksować polecenia jQuery z Angular .. w AngularJS oraz w sekcji linku tych dyrektyw, możesz włączyć jQuery do manipulacji DOM.

Należy pamiętać, że AngularJS używa jQuery lite, więc wiele z tego, co robi jQuery, jest już wbudowane w Angular.

Na przykład można użyć jQuery Lite w kanciasty jak nigdzie w kątowym aplikacji:

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

i wewnątrz funkcji dyrektywa łącza,

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>