Chúng ta có nên sử dụng jQuery với AngularJS không?

Question

Trang web của chúng tôi hiện đang sử dụng thư viện jQuery và nhận được lưu lượng truy cập khoảng 1 triệu hàng tháng. Chúng tôi muốn bao gồm phương pháp tiếp cận trung tâm API, vì vậy quyết định chuyển sang Javascript MVC và đã chọn angularJS cho nó.

Bây giờ câu hỏi của tôi là, tôi có nên sử dụng jQuery trên đỉnh của Angular để tôi cần viết lại mã thao tác DOM tối thiểu hay tôi nên viết lại mọi thứ theo cách Góc? Chúng tôi đang sử dụng các plugin jQuery như plupload, jQuery UI. vv trên trang web. Vui lòng đề xuất cách di chuyển tốt nhất (thời gian tải trang cũng quan trọng).

Đã trải qua "Thinking in AngularJS" if I have a jQuery background? nhưng không nhận được một câu trả lời rõ ràng

Answer 1

Điều tốt về AngularJS mà bạn cần xem xét trước khi thực hiện Di chuyển.

1. Nó cung cấp hai cách ràng buộc bằng cách chỉ lưu trữ biến trong phạm vi.
2. Điều khác chúng ta cần viết mã so với JQuery.
3. Thực hiện theo kiểu mô-đun (bằng cách tạo angular.module)
4. Chuyển hầu hết mã từ Javascript sang HTML, trông mã rõ ràng hơn.
5. Máy tạo mẫu Singleton ở đó để lưu trữ dữ liệu & chia sẻ dữ liệu giữa nhiều bộ điều khiển hoặc dịch vụ.
6. Nó được xây dựng với phiên bản nhỏ hơn của jQuery được gọi là JQlite có hầu hết các chức năng cơ bản, nhưng bạn muốn sử dụng JQuery trong AngularJS thì nó sẽ có sẵn dễ dàng chỉ cần bạn thêm tham chiếu jQuery vào nó, sau đó Chức năng JQLite được chuyển đổi thành JQuery.

---

Bạn không nên sử dụng jQuery trên đỉnh của AngularJS, vì AngularJS tiêu hóa chu trình sẽ không chạy nếu chúng ta làm bất cứ thao tác DOM góc hoặc phạm vi biến thao tác sử dụng JQuery.

Như bạn di chuyển bạn thành phần jQuery để AngularJS bạn cần phải làm theo dưới đây điều

1. Bạn cần đầu tiên trang web tìm kiếm angular-ui-bootstrap vì họ đã bao phủ hầu hết các thành phần giao diện người dùng mà đã chuyển đổi sang góc.
2. Tôi chắc chắn bạn sẽ không tìm thấy tất cả các phiên bản Angular plugin, tại đó bạn nên gói plugin đó để chỉ thị. Điều này sẽ cung cấp cho bạn bộ điều khiển trên phần tử DOM mà chỉ thị đã từng đặt. (Example here cho Datepicker sử dụng chỉ thị)
3. Không cố gắng ràng buộc sự kiện từ bối cảnh góc bên ngoài sẽ tạo ra chu trình tiêu hóa. cập nhật trên giao diện người dùng.
4. Đảm bảo khi thực hiện bất kỳ cuộc gọi ajax rằng nên sử dụng $http hơn là sử dụng $.ajax
5. Có nhiều nơi bạn có thể tìm thấy trong mã jquery đó sẽ được thay thế bởi Chỉ thị ng hạng nhất, như nếu bạn đang làm chỉ thêm & loại bỏ hoặc hiển thị một số yếu tố trên cơ sở của bất kỳ điều khoản nào, do đó, loại mã jquery đó có thể được thay thế bằng cách sử dụng chỉ thị ng-class
6. Tìm những nơi bạn chỉ xóa DOM hoặc thêm DOM có thể dễ dàng thay thế bằng ng-if Chỉ thị hoặc chỉ hiển thị phần tử ẩn của phần tử có thể được thực hiện bằng cách sử dụng ng-show/ng-hide
7. Cũng tìm phần như vậy trong giao diện người dùng mà bạn đang tạo cùng một DOM sử dụng cho vòng lặp có thể chuyển đổi thành chỉ thị gốc góc ng-repeat
8. Nếu bạn có bất kỳ trường hợp nào muốn hiển thị và ẩn nhiều phần tử mã sẽ được triển khai bằng cách sử dụng chỉ thị ng-switch

Answer 2

Sử dụng góc để xây dựng bộ điều khiển và các khách hàng API, sau đó là thời gian cho phép di chuyển càng nhiều thao tác DOM và càng tốt để chỉ thị góc. Sau đó chờ cho Angular 2 được phát hành và làm lại tất cả.

Answer 3

Đây là cách tốt để tiếp cận. Nếu bạn muốn kết hợp jQuery với Angular .. viết các chỉ thị trong AngularJS và trong phần liên kết của các chỉ thị đó, bạn có thể bao gồm jQuery cho thao tác DOM.

Hãy nhớ rằng AngularJS sử dụng jQuery lite nên rất nhiều những gì jQuery hiện đã được tích hợp sẵn vào Góc.

Ví dụ, bạn có thể sử dụng jQuery Lite trong góc như bất cứ nơi nào trong một ứng dụng góc:

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

và bên trong của một hàm liên kết chỉ thị,

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>