“Suy nghĩ trong AngularJS” nếu tôi có nền tảng jQuery? [đóng cửa]

4513
Mark Rajcok 2013-02-21 18:09.

Giả sử tôi đã quen với việc phát triển các ứng dụng phía máy khách trong jQuery , nhưng bây giờ tôi muốn bắt đầu sử dụng AngularJS . Bạn có thể mô tả sự thay đổi mô hình đó là cần thiết? Dưới đây là một số câu hỏi có thể giúp bạn đưa ra câu trả lời:

  • Làm cách nào để kiến ​​trúc và thiết kế các ứng dụng web phía máy khách khác nhau? Sự khác biệt lớn nhất là gì?
  • Tôi nên ngừng làm gì / sử dụng; Tôi nên bắt đầu làm gì / sử dụng thay thế?
  • Có bất kỳ cân nhắc / hạn chế phía máy chủ nào không?

Tôi không tìm kiếm một so sánh chi tiết giữa jQueryAngularJS.

15 answers

7177
Josh David Miller 2013-02-22 11:26.

1. Không thiết kế trang của bạn, sau đó thay đổi nó bằng các thao tác DOM

Trong jQuery, bạn thiết kế một trang và sau đó bạn làm cho nó động. Điều này là do jQuery được thiết kế để nâng cao và đã phát triển vượt bậc từ tiền đề đơn giản đó.

Nhưng trong AngularJS, bạn phải bắt đầu từ đầu với kiến ​​trúc của bạn trong tâm trí. Thay vì bắt đầu bằng cách nghĩ "Tôi có mảnh DOM này và tôi muốn biến nó thành X", bạn phải bắt đầu với những gì bạn muốn hoàn thành, sau đó bắt đầu thiết kế ứng dụng và cuối cùng là thiết kế chế độ xem của bạn.

2. Không tăng cường jQuery bằng AngularJS

Tương tự, đừng bắt đầu với ý tưởng rằng jQuery thực hiện X, Y và Z, vì vậy tôi sẽ chỉ thêm AngularJS trên đó cho các mô hình và bộ điều khiển. Điều này thực sự hấp dẫn khi bạn mới bắt đầu, đó là lý do tại sao tôi luôn khuyên các nhà phát triển AngularJS mới không nên sử dụng jQuery, ít nhất là cho đến khi họ quen với việc làm theo "Angular Way".

Tôi đã thấy nhiều nhà phát triển ở đây và trong danh sách gửi thư tạo ra các giải pháp phức tạp này với các plugin jQuery gồm 150 hoặc 200 dòng mã mà sau đó họ gắn vào AngularJS với một tập hợp các callback và $applys gây nhầm lẫn và phức tạp; nhưng cuối cùng họ đã làm cho nó hoạt động! Vấn đề là trong hầu hết các trường hợp, plugin jQuery có thể được viết lại trong AngularJS trong một phần nhỏ của mã, nơi mà mọi thứ đột nhiên trở nên dễ hiểu và đơn giản.

Điểm mấu chốt là thế này: khi tính toán, trước tiên hãy "suy nghĩ trong AngularJS"; nếu bạn không thể nghĩ ra giải pháp, hãy hỏi cộng đồng; nếu sau tất cả những điều đó không có giải pháp dễ dàng, thì hãy liên hệ với jQuery. Nhưng đừng để jQuery trở thành một cái nạng, nếu không bạn sẽ không bao giờ thành thạo AngularJS.

3. Luôn nghĩ về mặt kiến ​​trúc

Đầu tiên hãy biết rằng các ứng dụng một trangcác ứng dụng . Chúng không phải là các trang web. Vì vậy, chúng ta cần phải suy nghĩ như một nhà phát triển phía máy chủ bên cạnh việc suy nghĩ như một nhà phát triển phía máy khách. Chúng ta phải suy nghĩ về cách chia ứng dụng của mình thành các thành phần riêng lẻ, có thể mở rộng và có thể kiểm tra được.

Vì vậy, sau đó làm thế nào để bạn làm điều đó? Bạn "nghĩ trong AngularJS" như thế nào? Dưới đây là một số nguyên tắc chung, tương phản với jQuery.

Chế độ xem là "hồ sơ chính thức"

Trong jQuery, chúng tôi thay đổi chế độ xem theo chương trình. Chúng tôi có thể có một menu thả xuống được định nghĩa như ulsau:

<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>

Trong jQuery, theo logic ứng dụng của chúng tôi, chúng tôi sẽ kích hoạt nó bằng một số thứ như:

$('.main-menu').dropdownMenu();

Khi chúng ta chỉ nhìn vào chế độ xem, không rõ ràng ngay lập tức rằng có bất kỳ chức năng nào ở đây. Đối với các ứng dụng nhỏ, điều đó tốt. Nhưng đối với các ứng dụng không tầm thường, mọi thứ nhanh chóng trở nên khó hiểu và khó bảo trì.

Tuy nhiên, trong AngularJS, chế độ xem là bản ghi chính thức của chức năng dựa trên chế độ xem. ulThay vào đó, khai báo của chúng tôi sẽ trông như thế này:

<ul class="main-menu" dropdown-menu>
    ...
</ul>

Cả hai đều làm điều tương tự, nhưng trong phiên bản AngularJS, bất kỳ ai nhìn vào mẫu đều biết điều gì sẽ xảy ra. Bất cứ khi nào một thành viên mới của nhóm phát triển lên tàu, cô ấy có thể nhìn vào điều này và sau đó biết rằng có một chỉ thị được gọi là dropdownMenuvận hành trên đó; cô ấy không cần phải tìm câu trả lời đúng hoặc sàng lọc bất kỳ mã nào. Khung cảnh cho chúng tôi biết những gì đã xảy ra. Sạch hơn nhiều.

Các nhà phát triển mới sử dụng AngularJS thường hỏi một câu hỏi như: làm cách nào để tìm tất cả các liên kết thuộc một loại cụ thể và thêm một chỉ thị vào chúng. Nhà phát triển luôn kinh ngạc khi chúng tôi trả lời: bạn thì không. Nhưng lý do bạn không làm điều đó là nó giống như một nửa jQuery, một nửa AngularJS và không tốt. Vấn đề ở đây là nhà phát triển đang cố gắng "làm jQuery" trong ngữ cảnh của AngularJS. Điều đó sẽ không bao giờ hoạt động tốt. Xem hồ sơ chính thức. Bên ngoài một chỉ thị (thêm về điều này bên dưới), bạn không bao giờ, không bao giờ thay đổi DOM. Và các chỉ thị được áp dụng trong khung nhìn , vì vậy ý ​​định là rõ ràng.

Hãy nhớ: không thiết kế, và sau đó đánh dấu. Bạn phải kiến ​​trúc, và sau đó thiết kế.

Liên kết dữ liệu

Đây là một trong những tính năng tuyệt vời nhất của AngularJS và loại bỏ rất nhiều nhu cầu thực hiện các loại thao tác DOM mà tôi đã đề cập trong phần trước. AngularJS sẽ tự động cập nhật chế độ xem của bạn nên bạn không cần phải làm như vậy! Trong jQuery, chúng tôi phản hồi các sự kiện và sau đó cập nhật nội dung. Cái gì đó như:

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

Đối với một dạng xem như sau:

<ul class="messages" id="log">
</ul>

Ngoài những lo ngại về việc trộn lẫn, chúng ta cũng có những vấn đề tương tự về việc thể hiện ý định mà tôi đã đề cập trước đây. Nhưng quan trọng hơn, chúng tôi phải tham chiếu và cập nhật nút DOM theo cách thủ công. Và nếu chúng tôi muốn xóa một mục nhật ký, chúng tôi cũng phải viết mã dựa trên DOM cho mục đó. Làm cách nào để chúng tôi kiểm tra logic ngoài DOM? Và nếu chúng ta muốn thay đổi cách trình bày thì sao?

Điều này hơi lộn xộn và yếu ớt. Nhưng trong AngularJS, chúng ta có thể làm điều này:

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

Và chế độ xem của chúng ta có thể trông như thế này:

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

Nhưng đối với vấn đề đó, quan điểm của chúng tôi có thể trông như thế này:

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

Và bây giờ thay vì sử dụng danh sách không có thứ tự, chúng tôi đang sử dụng hộp cảnh báo Bootstrap. Và chúng tôi không bao giờ phải thay đổi mã bộ điều khiển! Nhưng quan trọng hơn, cho dù nhật ký được cập nhật ở đâu hoặc bằng cách nào , chế độ xem cũng sẽ thay đổi. Tự động. Khéo léo!

Mặc dù tôi không hiển thị nó ở đây, nhưng ràng buộc dữ liệu là hai chiều. Vì vậy, những thông điệp log cũng có thể được thay đổi trong quan điểm chỉ bằng cách làm này: <input ng-model="entry.msg" />. Và đã có nhiều niềm vui.

Lớp mô hình riêng biệt

Trong jQuery, DOM giống như mô hình. Nhưng trong AngularJS, chúng tôi có một lớp mô hình riêng biệt mà chúng tôi có thể quản lý theo bất kỳ cách nào chúng tôi muốn, hoàn toàn độc lập với khung nhìn. Điều này giúp cho việc liên kết dữ liệu ở trên, duy trì sự tách biệt các mối quan tâm và mang lại khả năng kiểm tra cao hơn nhiều. Các câu trả lời khác đề cập đến điểm này, vì vậy tôi sẽ chỉ để nó ở đó.

Tách mối quan tâm

Và tất cả những điều ở trên đều gắn liền với chủ đề bao trùm này: hãy tách biệt những mối quan tâm của bạn. Chế độ xem của bạn đóng vai trò như bản ghi chính thức về những gì được cho là sẽ xảy ra (đối với hầu hết các phần); mô hình của bạn đại diện cho dữ liệu của bạn; bạn có một lớp dịch vụ để thực hiện các tác vụ có thể tái sử dụng; bạn thực hiện thao tác DOM và tăng cường chế độ xem của mình bằng các lệnh; và bạn dán tất cả lại với nhau bằng bộ điều khiển. Điều này cũng đã được đề cập trong các câu trả lời khác và điều duy nhất tôi sẽ thêm các mối liên quan vào khả năng kiểm tra, mà tôi sẽ thảo luận trong phần khác bên dưới.

Tiêm phụ thuộc

Để giúp chúng tôi loại bỏ các mối quan tâm là tiêm phụ thuộc (DI). Nếu bạn đến từ một ngôn ngữ phía máy chủ (từ Java sang PHP ) thì có lẽ bạn đã quen thuộc với khái niệm này rồi, nhưng nếu bạn là một chàng trai phía máy khách đến từ jQuery, khái niệm này có thể có vẻ gì đó từ ngớ ngẩn đến thừa thãi. . Nhưng nó không phải. :-)

Từ một góc nhìn rộng, DI có nghĩa là bạn có thể khai báo các thành phần rất tự do và sau đó từ bất kỳ thành phần nào khác, chỉ cần yêu cầu một thể hiện của nó và nó sẽ được cấp. Bạn không cần phải biết về thứ tự tải, hoặc vị trí tệp, hoặc bất cứ điều gì tương tự. Sức mạnh có thể không hiển thị ngay lập tức, nhưng tôi sẽ chỉ cung cấp một ví dụ (phổ biến): thử nghiệm.

Giả sử trong ứng dụng của chúng tôi, chúng tôi yêu cầu một dịch vụ triển khai lưu trữ phía máy chủ thông qua API REST và tùy thuộc vào trạng thái ứng dụng, lưu trữ cục bộ. Khi chạy thử nghiệm trên bộ điều khiển của mình, chúng tôi không muốn phải giao tiếp với máy chủ - sau cùng thì chúng tôi đang thử nghiệm bộ điều khiển . Chúng tôi chỉ có thể thêm một dịch vụ giả cùng tên với thành phần ban đầu của chúng tôi và bộ phun sẽ đảm bảo rằng bộ điều khiển của chúng tôi tự động nhận được cái giả - bộ điều khiển của chúng tôi không và không cần biết sự khác biệt.

Nói về thử nghiệm ...

4. Phát triển dựa trên thử nghiệm - luôn luôn

Đây thực sự là một phần của phần 3 về kiến ​​trúc, nhưng nó quan trọng đến mức tôi phải đặt nó làm phần cấp cao nhất của riêng nó.

Trong số tất cả các plugin jQuery bạn đã thấy, đã sử dụng hoặc đã viết, bao nhiêu trong số chúng có bộ thử nghiệm đi kèm? Không nhiều lắm vì jQuery không phù hợp với điều đó. Nhưng AngularJS là.

Trong jQuery, cách duy nhất để kiểm tra thường là tạo thành phần độc lập với một trang mẫu / demo mà các bài kiểm tra của chúng tôi có thể thực hiện thao tác DOM. Vì vậy, sau đó chúng ta phải phát triển một thành phần riêng biệt và sau đó tích hợp nó vào ứng dụng của chúng ta. Thật là bất tiện! Vì vậy, phần lớn thời gian, khi phát triển với jQuery, chúng tôi chọn lặp đi lặp lại thay vì phát triển theo hướng thử nghiệm. Và ai có thể đổ lỗi cho chúng tôi?

Nhưng bởi vì chúng tôi đã tách biệt các mối quan tâm, chúng tôi có thể thực hiện lặp đi lặp lại việc phát triển theo hướng kiểm tra trong AngularJS! Ví dụ: giả sử chúng tôi muốn một chỉ thị siêu đơn giản để chỉ ra trong menu của chúng tôi tuyến đường hiện tại của chúng tôi. Chúng tôi có thể khai báo những gì chúng tôi muốn trong chế độ xem ứng dụng của mình:

<a href="/hello" when-active>Hello</a>

Được rồi, bây giờ chúng ta có thể viết một bài kiểm tra cho when-activechỉ thị không tồn tại :

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();
}));

Và khi chúng tôi chạy thử nghiệm của mình, chúng tôi có thể xác nhận rằng nó không thành công. Chỉ bây giờ chúng ta mới nên tạo chỉ thị của mình:

.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' );
                }
            });
        }
    };
});

Thử nghiệm của chúng tôi hiện đã vượt qua menu của chúng tôi hoạt động theo yêu cầu. Sự phát triển của chúng tôi là cả lặp đi lặp lại theo hướng thử nghiệm. Đồ độc ác.

5. Về mặt khái niệm, các chỉ thị không phải là jQuery được đóng gói

Bạn sẽ thường nghe thấy "chỉ thực hiện thao tác DOM trong một chỉ thị". Đây là một điều cần thiết. Đối xử với nó với sự tôn trọng thích đáng!

Nhưng hãy đi sâu hơn một chút ...

Một số chỉ thị chỉ trang trí những gì đã có trong chế độ xem (suy nghĩ ngClass) và do đó đôi khi thực hiện thao tác DOM ngay lập tức và sau đó về cơ bản được thực hiện. Nhưng nếu một chỉ thị giống như một "widget" và có một khuôn mẫu, thì nó cũng nên tôn trọng sự tách biệt các mối quan tâm. Đó là, khuôn mẫu cũng phải độc lập chủ yếu với việc triển khai nó trong các chức năng liên kết và bộ điều khiển.

AngularJS đi kèm với toàn bộ bộ công cụ để thực hiện điều này rất dễ dàng; với ngClasschúng tôi có thể cập nhật động lớp; ngModelcho phép liên kết dữ liệu hai chiều; ngShowngHidehiển thị hoặc ẩn một phần tử theo chương trình; và nhiều hơn nữa - bao gồm cả những bài chúng tôi tự viết. Nói cách khác, chúng ta có thể thực hiện tất cả các loại tuyệt vời mà không cần thao tác DOM. DOM càng ít thao tác, các chỉ thị càng dễ kiểm tra, chúng càng dễ tạo kiểu, chúng càng dễ thay đổi trong tương lai và chúng có khả năng tái sử dụng và phân phối nhiều hơn.

Tôi thấy rất nhiều nhà phát triển mới sử dụng AngularJS sử dụng các chỉ thị làm nơi để ném một loạt jQuery. Nói cách khác, họ nghĩ "vì tôi không thể thực hiện thao tác DOM trong bộ điều khiển, nên tôi sẽ lấy đoạn mã đó đặt nó trong một chỉ thị". Mặc dù điều đó chắc chắn là tốt hơn nhiều, nhưng nó vẫn thường sai .

Hãy nghĩ về trình ghi nhật ký mà chúng tôi đã lập trình trong phần 3. Ngay cả khi chúng tôi đưa nó vào một chỉ thị, chúng tôi vẫn muốn thực hiện nó theo "Angular Way". Nó vẫn không mất bất kỳ thao tác DOM nào! Có rất nhiều lần thao tác DOM là cần thiết, nhưng nó hiếm hơn bạn nghĩ rất nhiều ! Trước khi thực hiện thao tác DOM ở bất kỳ đâu trong ứng dụng của bạn, hãy tự hỏi bản thân xem bạn có thực sự cần không. Có thể có một cách tốt hơn.

Dưới đây là một ví dụ nhanh cho thấy mẫu mà tôi thấy thường xuyên nhất. Chúng tôi muốn một nút có thể chuyển đổi. (Lưu ý: ví dụ này hơi phức tạp và dài dòng để thể hiện các trường hợp phức tạp hơn được giải quyết theo cùng một cách.)

.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);
            });
        }
    };
});

Có một số điều sai với điều này:

  1. Đầu tiên, jQuery không bao giờ cần thiết. Không có gì chúng tôi đã làm ở đây mà cần jQuery cả!
  2. Thứ hai, ngay cả khi chúng tôi đã có jQuery trên trang của mình, không có lý do gì để sử dụng nó ở đây; chúng ta có thể đơn giản sử dụng angular.elementvà thành phần của chúng ta sẽ vẫn hoạt động khi được đưa vào một dự án không có jQuery.
  3. Thứ ba, ngay cả khi giả sử jQuery được yêu cầu để chỉ thị này hoạt động, jqLite ( angular.element) sẽ luôn sử dụng jQuery nếu nó được tải! Vì vậy, chúng ta không cần sử dụng $- chúng ta có thể sử dụng angular.element.
  4. Thứ tư, liên quan chặt chẽ đến điều thứ ba, đó là các phần tử jqLite không cần phải được bao bọc trong $- phần tử elementđược chuyển đến linkhàm sẽ một phần tử jQuery!
  5. Và thứ năm, mà chúng ta đã đề cập trong các phần trước, tại sao chúng ta lại trộn các thứ mẫu vào logic của chúng ta?

Chỉ thị này có thể được viết lại (ngay cả đối với những trường hợp rất phức tạp!) Đơn giản hơn nhiều như sau:

.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;
            };
        }
    };
});

Một lần nữa, nội dung mẫu nằm trong mẫu, vì vậy bạn (hoặc người dùng của bạn) có thể dễ dàng hoán đổi nó cho một nội dung đáp ứng bất kỳ phong cách nào cần thiết và không bao giờ phải đụng đến logic . Khả năng tái sử dụng - bùng nổ!

Và vẫn còn tất cả những lợi ích khác, như thử nghiệm - thật dễ dàng! Không có vấn đề gì trong mẫu, API nội bộ của chỉ thị không bao giờ được chạm vào, vì vậy việc cấu trúc lại rất dễ dàng. Bạn có thể thay đổi mẫu tùy ý mà không cần chạm vào chỉ thị. Và cho dù bạn có thay đổi gì đi nữa thì các bài kiểm tra của bạn vẫn vượt qua.

w00t!

Vì vậy, nếu các lệnh không chỉ là tập hợp các hàm giống như jQuery, thì chúng là gì? Directives thực chất là phần mở rộng của HTML . Nếu HTML không làm điều gì đó bạn cần, bạn viết một chỉ thị để làm điều đó cho bạn, và sau đó sử dụng nó như thể nó là một phần của HTML.

Nói cách khác, nếu AngularJS không làm một cái gì đó ra khỏi hộp, suy nghĩ như thế nào đội sẽ thực hiện nó để phù hợp đúng với ngClick, ngClass, et al.

Tóm lược

Thậm chí không sử dụng jQuery. Thậm chí không bao gồm nó. Nó sẽ giữ bạn lại. Và khi bạn gặp một vấn đề mà bạn nghĩ rằng bạn đã biết cách giải quyết trong jQuery, trước khi bạn đạt được nó $, hãy thử nghĩ về cách thực hiện nó trong phạm vi hạn chế của AngularJS. Nếu bạn không biết, hãy hỏi! 19 lần trong tổng số 20 lần, cách tốt nhất để làm điều đó không cần jQuery và cố gắng giải quyết nó bằng jQuery sẽ mang lại nhiều công việc hơn cho bạn.

407
Mark Rajcok 2013-02-21 18:09.

Mệnh lệnh → khai báo

Trong jQuery, các bộ chọn được sử dụng để tìm các phần tử DOM và sau đó ràng buộc / đăng ký các trình xử lý sự kiện với chúng. Khi một sự kiện kích hoạt, mã (bắt buộc) đó sẽ thực thi để cập nhật / thay đổi DOM.

Trong AngularJS, bạn muốn nghĩ về các khung nhìn hơn là các phần tử DOM. Chế độ xem là HTML (khai báo) có chứa các chỉ thị AngularJS . Directives thiết lập trình xử lý sự kiện đằng sau hậu trường cho chúng tôi và cung cấp cho chúng tôi tính năng ghi dữ liệu động. Các bộ chọn hiếm khi được sử dụng, do đó nhu cầu về ID (và một số loại lớp) đã giảm đi đáng kể. Chế độ xem được gắn với mô hình (thông qua phạm vi). Các khung nhìn là một hình chiếu của mô hình. Sự kiện thay đổi mô hình (nghĩa là dữ liệu, thuộc tính phạm vi) và các chế độ xem chiếu những mô hình đó cập nhật "tự động".

Trong AngularJS, hãy nghĩ về các mô hình, thay vì các phần tử DOM do jQuery chọn để lưu giữ dữ liệu của bạn. Hãy nghĩ về các khung nhìn như là các phép chiếu của các mô hình đó, thay vì đăng ký các lệnh gọi lại để thao túng những gì người dùng nhìn thấy.

Tách mối quan tâm

jQuery sử dụng JavaScript không phô trương - hành vi (JavaScript) được tách biệt khỏi cấu trúc (HTML).

AngularJS sử dụng bộ điều khiển và chỉ thị (mỗi bộ điều khiển có thể có bộ điều khiển riêng và / hoặc biên dịch và liên kết các chức năng) để loại bỏ hành vi khỏi khung nhìn / cấu trúc (HTML). Angular cũng có các dịch vụbộ lọc để giúp phân tách / sắp xếp ứng dụng của bạn.

Xem thêm https://stackoverflow.com/a/14346528/215945

Thiết kế ứng dụng

Một cách tiếp cận để thiết kế một ứng dụng AngularJS:

  1. Suy nghĩ về các mô hình của bạn. Tạo các dịch vụ hoặc các đối tượng JavaScript của riêng bạn cho các mô hình đó.
  2. Suy nghĩ về cách bạn muốn trình bày mô hình - quan điểm của bạn. Tạo các mẫu HTML cho mỗi chế độ xem, sử dụng các lệnh cần thiết để có được phân phối dữ liệu động.
  3. Gắn bộ điều khiển vào mỗi chế độ xem (sử dụng ng-view và định tuyến, hoặc ng-controller). Yêu cầu bộ điều khiển chỉ tìm / lấy bất kỳ dữ liệu mô hình nào mà chế độ xem cần để thực hiện công việc của nó. Làm cho bộ điều khiển càng mỏng càng tốt.

Kế thừa nguyên mẫu

Bạn có thể làm rất nhiều điều với jQuery mà không cần biết về cách hoạt động của kế thừa nguyên mẫu JavaScript. Khi phát triển các ứng dụng AngularJS, bạn sẽ tránh được một số cạm bẫy phổ biến nếu bạn hiểu rõ về kế thừa JavaScript. Đề xuất đọc: Các sắc thái của kế thừa nguyên mẫu / nguyên mẫu phạm vi trong AngularJS là gì?

184
superluminary 2014-05-13 00:22.

AngularJS so với jQuery

AngularJS và jQuery áp dụng những hệ tư tưởng rất khác nhau. Nếu bạn đến từ jQuery, bạn có thể thấy một số khác biệt đáng ngạc nhiên. Angular có thể khiến bạn tức giận.

Điều này là bình thường, bạn nên vượt qua. Angular là giá trị nó.

Sự khác biệt lớn (TLDR)

jQuery cung cấp cho bạn một bộ công cụ để chọn các bit tùy ý của DOM và thực hiện các thay đổi đặc biệt đối với chúng. Bạn có thể làm bất cứ điều gì bạn thích từng mảnh.

Thay vào đó, AngularJS cung cấp cho bạn một trình biên dịch .

Điều này có nghĩa là AngularJS đọc toàn bộ DOM của bạn từ trên xuống dưới và coi nó như mã, theo nghĩa đen là hướng dẫn cho trình biên dịch. Khi nó đi qua DOM, Nó tìm kiếm các chỉ thị cụ thể (chỉ thị trình biên dịch) cho trình biên dịch AngularJS biết cách hoạt động và những việc cần làm. Directives là các đối tượng nhỏ chứa đầy JavaScript có thể khớp với các thuộc tính, thẻ, lớp hoặc thậm chí cả nhận xét.

Khi trình biên dịch Angular xác định rằng một phần của DOM khớp với một chỉ thị cụ thể, nó sẽ gọi hàm chỉ thị, chuyển cho nó phần tử DOM, bất kỳ thuộc tính nào, phạm vi $ hiện tại (là kho lưu trữ biến cục bộ) và một số bit hữu ích khác. Các thuộc tính này có thể chứa các biểu thức mà Chỉ thị có thể hiểu được và cho biết cách hiển thị cũng như thời điểm nên tự vẽ lại.

Sau đó, Directives có thể lần lượt kéo các thành phần Angular bổ sung như bộ điều khiển, dịch vụ, v.v. Những gì xuất hiện ở dưới cùng của trình biên dịch là một ứng dụng web đã được định dạng đầy đủ, có dây và sẵn sàng hoạt động.

Điều này có nghĩa là Angular là Template Driven . Mẫu của bạn thúc đẩy JavaScript chứ không phải ngược lại. Đây là một sự đảo ngược hoàn toàn các vai trò và hoàn toàn trái ngược với JavaScript không phô trương mà chúng tôi đã viết trong 10 năm qua hoặc lâu hơn. Điều này có thể mất một số để làm quen.

Nếu điều này nghe có vẻ như nó có thể quá quy định và hạn chế, thì không có gì có thể xa sự thật hơn. Vì AngularJS coi HTML của bạn là mã, bạn sẽ có được mức độ chi tiết HTML trong ứng dụng web của mình . Mọi thứ đều có thể xảy ra và hầu hết mọi thứ đều dễ dàng một cách đáng ngạc nhiên khi bạn thực hiện một vài bước nhảy vọt về mặt khái niệm.

Chúng ta hãy đi xuống phần cứng rắn.

Đầu tiên, Angular không thay thế jQuery

Angular và jQuery làm những việc khác nhau. AngularJS cung cấp cho bạn một bộ công cụ để sản xuất các ứng dụng web. jQuery chủ yếu cung cấp cho bạn các công cụ để sửa đổi DOM. Nếu jQuery có trên trang của bạn, AngularJS sẽ tự động sử dụng nó. Nếu không, AngularJS đi kèm với jQuery Lite, đây là phiên bản jQuery bị cắt giảm nhưng vẫn hoàn toàn có thể sử dụng được.

Misko thích jQuery và không phản đối việc bạn sử dụng nó. Tuy nhiên, bạn sẽ thấy rằng khi bạn tiến lên, bạn có thể hoàn thành khá nhiều công việc của mình bằng cách sử dụng kết hợp phạm vi, mẫu và chỉ thị và bạn nên thích quy trình làm việc này nếu có thể vì mã của bạn sẽ rời rạc hơn, dễ cấu hình hơn và hơn thế nữa Góc cạnh.

Nếu bạn sử dụng jQuery, bạn không nên rắc nó khắp nơi. Vị trí chính xác cho thao tác DOM trong AngularJS là trong một chỉ thị. Thêm về những điều này sau.

JavaScript không phô trương với Bộ chọn so với Mẫu so sánh

jQuery thường được áp dụng một cách kín đáo. Mã JavaScript của bạn được liên kết trong đầu trang (hoặc chân trang) và đây là nơi duy nhất nó được đề cập. Chúng tôi sử dụng bộ chọn để chọn ra các phần của trang và viết các plugin để sửa đổi các phần đó.

JavaScript được kiểm soát. HTML tồn tại hoàn toàn độc lập. HTML của bạn vẫn có ngữ nghĩa ngay cả khi không có JavaScript. Thuộc tính Onclick là một thực tiễn rất tồi.

Một trong những điều đầu tiên bạn sẽ nhận thấy về AngularJS là các thuộc tính tùy chỉnh ở khắp mọi nơi . HTML của bạn sẽ có nhiều thuộc tính ng, về cơ bản là thuộc tính onClick trên steroid. Đây là các chỉ thị (chỉ thị của trình biên dịch), và là một trong những cách chính mà mẫu được nối với mô hình.

Khi bạn lần đầu tiên nhìn thấy điều này, bạn có thể bị cám dỗ để viết tắt AngularJS là JavaScript xâm nhập trường học cũ (giống như tôi đã làm lúc đầu). Trên thực tế, AngularJS không chơi theo những quy tắc đó. Trong AngularJS, HTML5 của bạn là một mẫu. Nó được biên dịch bởi AngularJS để tạo ra trang web của bạn.

Đây là sự khác biệt lớn đầu tiên. Đối với jQuery, trang web của bạn là một DOM được thao tác. Đối với AngularJS, HTML của bạn là mã được biên dịch. AngularJS đọc toàn bộ trang web của bạn và biên dịch nó thành một trang web mới theo nghĩa đen bằng trình biên dịch tích hợp sẵn của nó.

Mẫu của bạn nên được khai báo; ý nghĩa của nó phải rõ ràng bằng cách đọc nó. Chúng tôi sử dụng các thuộc tính tùy chỉnh với các tên có ý nghĩa. Chúng tôi tạo ra các phần tử HTML mới, một lần nữa với những cái tên có ý nghĩa. Một nhà thiết kế có kiến ​​thức HTML tối thiểu và không có kỹ năng viết mã có thể đọc mẫu AngularJS của bạn và hiểu nó đang làm gì. Người đó có thể sửa đổi. Đây là cách Angular.

Mẫu nằm trên ghế lái xe.

Một trong những câu hỏi đầu tiên tôi tự hỏi khi bắt đầu AngularJS và xem qua các hướng dẫn là "Mã của tôi ở đâu?" . Tôi đã viết không có JavaScript, nhưng tôi có tất cả các hành vi này. Câu trả lời là hiển nhiên. Vì AngularJS biên dịch DOM, AngularJS đang coi HTML của bạn là mã. Đối với nhiều trường hợp đơn giản, bạn chỉ cần viết một mẫu và để AngularJS biên dịch nó thành một ứng dụng cho bạn là đủ.

Mẫu của bạn thúc đẩy ứng dụng của bạn. Nó được coi như một DSL . Bạn viết các thành phần AngularJS và AngularJS sẽ đảm nhiệm việc kéo chúng vào và cung cấp chúng vào đúng thời điểm dựa trên cấu trúc mẫu của bạn. Điều này rất khác với mẫu MVC tiêu chuẩn , trong đó mẫu chỉ dành cho đầu ra.

Chẳng hạn, nó giống với XSLT hơn là Ruby on Rails .

Đây là một cách kiểm soát đảo ngược triệt để mà một số người phải làm quen.

Ngừng cố gắng điều khiển ứng dụng của bạn từ JavaScript của bạn. Hãy để mẫu điều khiển ứng dụng và để AngularJS đảm nhiệm việc kết nối các thành phần với nhau. Đây cũng là cách Angular.

Mô hình ngữ nghĩa HTML so với mô hình ngữ nghĩa

Với jQuery, trang HTML của bạn phải chứa nội dung có ý nghĩa về ngữ nghĩa. Nếu JavaScript bị tắt (bởi người dùng hoặc công cụ tìm kiếm) thì nội dung của bạn vẫn có thể truy cập được.

Bởi vì AngularJS coi trang HTML của bạn như một mẫu. Mẫu không được cho là có ngữ nghĩa vì nội dung của bạn thường được lưu trữ trong mô hình của bạn mà cuối cùng đến từ API của bạn. AngularJS biên dịch DOM của bạn với mô hình để tạo ra một trang web ngữ nghĩa.

Nguồn HTML của bạn không còn ngữ nghĩa nữa, thay vào đó, API và DOM đã biên dịch của bạn có ngữ nghĩa.

Trong AngularJS, nghĩa là sống trong mô hình, HTML chỉ là một khuôn mẫu, chỉ để hiển thị.

Tại thời điểm này, bạn có thể có tất cả các loại câu hỏi liên quan đến SEO và khả năng tiếp cận, và đúng như vậy. Có những vấn đề mở ở đây. Hầu hết các trình đọc màn hình bây giờ sẽ phân tích cú pháp JavaScript. Công cụ tìm kiếm cũng có thể lập chỉ mục nội dung AJAXed . Tuy nhiên, bạn sẽ muốn đảm bảo rằng bạn đang sử dụng các URL pushstate và bạn có một sơ đồ trang web tốt. Xem tại đây để thảo luận về vấn đề: https://stackoverflow.com/a/23245379/687677

Tách mối quan tâm (SOC) so với MVC

Tách mối quan tâm (SOC) là một mô hình lớn lên trong nhiều năm phát triển web vì nhiều lý do bao gồm SEO, khả năng truy cập và tính không tương thích của trình duyệt. Nó trông như thế này:

  1. HTML - Ý nghĩa ngữ nghĩa. HTML nên đứng một mình.
  2. CSS - Tạo kiểu, không có CSS, trang vẫn có thể đọc được.
  3. JavaScript - Hành vi, không có script, nội dung vẫn còn.

Một lần nữa, AngularJS không chơi theo quy tắc của họ. Trong một lần đột quỵ, AngularJS loại bỏ một thập kỷ trí tuệ nhận được và thay vào đó triển khai một mẫu MVC trong đó mẫu không còn ngữ nghĩa, thậm chí không một chút nào.

Nó trông như thế này:

  1. Mô hình - mô hình của bạn chứa dữ liệu ngữ nghĩa của bạn. Mô hình thường là các đối tượng JSON . Mô hình tồn tại dưới dạng thuộc tính của một đối tượng được gọi là $ scope. Bạn cũng có thể lưu trữ các chức năng tiện ích hữu ích trên $ scope mà các mẫu của bạn sau đó có thể truy cập.
  2. Chế độ xem - Chế độ xem của bạn được viết bằng HTML. Chế độ xem thường không có ngữ nghĩa vì dữ liệu của bạn nằm trong mô hình.
  3. Bộ điều khiển - Bộ điều khiển của bạn là một hàm JavaScript kết nối chế độ xem với mô hình. Chức năng của nó là khởi tạo $ scope. Tùy thuộc vào ứng dụng của bạn, bạn có thể cần hoặc không cần tạo bộ điều khiển. Bạn có thể có nhiều bộ điều khiển trên một trang.

MVC và SOC không nằm trên các đầu đối diện của cùng một tỷ lệ, chúng nằm trên các trục hoàn toàn khác nhau. SOC không có ý nghĩa gì trong ngữ cảnh AngularJS. Bạn phải quên nó đi và tiếp tục.

Nếu, giống như tôi, bạn đã sống qua các cuộc chiến trình duyệt, bạn có thể thấy ý tưởng này khá phản cảm. Hãy vượt qua nó, nó sẽ xứng đáng, tôi hứa.

Plugin so với Directives

Các plugin mở rộng jQuery. AngularJS Directives mở rộng khả năng của trình duyệt của bạn.

Trong jQuery, chúng tôi định nghĩa các plugin bằng cách thêm các chức năng vào jQuery.prototype. Sau đó, chúng tôi kết nối chúng vào DOM bằng cách chọn các phần tử và gọi plugin trên kết quả. Ý tưởng là mở rộng khả năng của jQuery.

Ví dụ: nếu bạn muốn có một băng chuyền trên trang của mình, bạn có thể xác định danh sách các số liệu không có thứ tự, có thể được bao bọc trong một phần tử điều hướng. Sau đó, bạn có thể viết một số jQuery để chọn danh sách trên trang và thiết kế lại nó như một thư viện với thời gian chờ để thực hiện hoạt ảnh trượt.

Trong AngularJS, chúng tôi xác định các chỉ thị. Một chỉ thị là một hàm trả về một đối tượng JSON. Đối tượng này cho AngularJS biết những phần tử DOM nào cần tìm và những thay đổi cần thực hiện đối với chúng. Các chỉ thị được kết nối với mẫu bằng cách sử dụng các thuộc tính hoặc phần tử mà bạn phát minh ra. Ý tưởng là mở rộng khả năng của HTML với các thuộc tính và phần tử mới.

Cách AngularJS là mở rộng các khả năng của HTML có giao diện gốc. Bạn nên viết HTML trông giống như HTML, được mở rộng với các thuộc tính và phần tử tùy chỉnh.

Nếu bạn muốn một băng chuyền, chỉ cần sử dụng một <carousel />phần tử, sau đó xác định một chỉ thị để đưa vào một mẫu và làm cho phần tử đó hoạt động.

Rất nhiều chỉ thị nhỏ so với các plugin lớn với công tắc cấu hình

Xu hướng với jQuery là viết các plugin lớn tuyệt vời như lightbox mà sau đó chúng tôi định cấu hình bằng cách chuyển nhiều giá trị và tùy chọn.

Đây là một sai lầm trong AngularJS.

Lấy ví dụ về trình đơn thả xuống. Khi viết một plugin thả xuống, bạn có thể bị cám dỗ để viết mã trong các trình xử lý nhấp chuột, có thể là một chức năng để thêm vào một chữ v, có thể là lên hoặc xuống, có thể thay đổi lớp của phần tử mở ra, hiển thị menu, tất cả những thứ hữu ích.

Cho đến khi bạn muốn thực hiện một thay đổi nhỏ.

Giả sử bạn có một menu mà bạn muốn mở ra khi di chuột. Bây giờ chúng ta có một vấn đề. Plugin của chúng tôi đã có dây trong trình xử lý nhấp chuột cho chúng tôi, chúng tôi sẽ cần thêm tùy chọn cấu hình để làm cho nó hoạt động khác trong trường hợp cụ thể này.

Trong AngularJS, chúng tôi viết các chỉ thị nhỏ hơn. Chỉ thị thả xuống của chúng tôi sẽ rất nhỏ. Nó có thể duy trì trạng thái gấp lại và cung cấp các phương thức để gấp (), mở () hoặc chuyển đổi (). Các phương thức này chỉ đơn giản là cập nhật $ scope.menu.vosystem là một boolean giữ trạng thái.

Bây giờ trong mẫu của chúng tôi, chúng tôi có thể kết nối điều này:

<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

Cần cập nhật khi di chuột qua?

<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

Mẫu thúc đẩy ứng dụng để chúng tôi có được mức độ chi tiết của HTML. Nếu chúng ta muốn đưa ra các ngoại lệ theo từng trường hợp, thì mẫu sẽ dễ dàng thực hiện điều này.

Đóng cửa so với phạm vi $

Các plugin JQuery được tạo trong một quá trình đóng. Quyền riêng tư được duy trì trong thời gian đóng cửa đó. Bạn phải duy trì chuỗi phạm vi của mình trong thời gian đóng cửa đó. Bạn chỉ thực sự có quyền truy cập vào tập hợp các nút DOM được jQuery chuyển vào plugin, cộng với bất kỳ biến cục bộ nào được xác định trong bao đóng và bất kỳ toàn cầu nào bạn đã xác định. Điều này có nghĩa là các plugin khá độc lập. Đây là một điều tốt, nhưng có thể bị hạn chế khi tạo toàn bộ ứng dụng. Cố gắng chuyển dữ liệu giữa các phần của một trang động trở thành một việc vặt.

AngularJS có các đối tượng $ scope. Đây là những đối tượng đặc biệt được tạo và duy trì bởi AngularJS trong đó bạn lưu trữ mô hình của mình. Một số lệnh nhất định sẽ tạo ra một phạm vi $ mới, theo mặc định kế thừa từ phạm vi gói $ của nó bằng cách sử dụng kế thừa nguyên mẫu JavaScript. Đối tượng $ scope có thể truy cập được trong bộ điều khiển và khung nhìn.

Đây là phần thông minh. Vì cấu trúc của sự kế thừa $ scope gần như tuân theo cấu trúc của DOM, các phần tử có quyền truy cập vào phạm vi riêng của chúng và bất kỳ phạm vi chứa nào một cách liền mạch, cho đến phạm vi toàn cầu $ (không giống với phạm vi toàn cầu).

Điều này giúp cho việc chuyển dữ liệu xung quanh và lưu trữ dữ liệu ở mức thích hợp dễ dàng hơn nhiều. Nếu trình đơn thả xuống được mở ra, thì chỉ $ scope thả xuống mới cần biết về nó. Nếu người dùng cập nhật tùy chọn của họ, bạn có thể muốn cập nhật phạm vi $ toàn cầu và mọi phạm vi lồng nhau lắng nghe tùy chọn của người dùng sẽ tự động được cảnh báo.

Điều này nghe có vẻ phức tạp, trên thực tế, một khi bạn thư giãn vào nó, nó giống như đang bay. Bạn không cần tạo đối tượng $ scope, AngularJS khởi tạo và cấu hình nó cho bạn, một cách chính xác và thích hợp dựa trên hệ thống phân cấp mẫu của bạn. AngularJS sau đó cung cấp nó cho thành phần của bạn bằng cách sử dụng phép thuật tiêm phụ thuộc (sẽ nói thêm về điều này sau).

Thay đổi DOM thủ công so với Liên kết dữ liệu

Trong jQuery, bạn thực hiện tất cả các thay đổi DOM của mình bằng tay. Bạn xây dựng các phần tử DOM mới theo chương trình. Nếu bạn có một mảng JSON và bạn muốn đưa nó vào DOM, bạn phải viết một hàm để tạo HTML và chèn nó.

Trong AngularJS, bạn cũng có thể làm điều này, nhưng bạn nên sử dụng ràng buộc dữ liệu. Thay đổi mô hình của bạn và vì DOM được liên kết với nó thông qua một mẫu nên DOM của bạn sẽ tự động cập nhật, không cần can thiệp.

Vì liên kết dữ liệu được thực hiện từ mẫu, sử dụng thuộc tính hoặc cú pháp dấu ngoặc nhọn, nên việc này rất dễ thực hiện. Có rất ít chi phí nhận thức liên quan đến nó, vì vậy bạn sẽ thấy mình làm việc đó mọi lúc.

<input ng-model="user.name" />

Liên kết phần tử đầu vào với $scope.user.name. Cập nhật đầu vào sẽ cập nhật giá trị trong phạm vi hiện tại của bạn và ngược lại.

Tương tự như vậy:

<p>
  {{user.name}}
</p>

sẽ xuất ra tên người dùng trong một đoạn văn. Đó là một ràng buộc trực tiếp, vì vậy nếu $scope.user.namegiá trị được cập nhật, thì mẫu cũng sẽ cập nhật.

Ajax mọi lúc

Trong jQuery, việc thực hiện một cuộc gọi Ajax khá đơn giản, nhưng đó vẫn là điều bạn có thể nghĩ lại. Có thêm sự phức tạp để suy nghĩ và một lượng lớn tập lệnh cần duy trì.

Trong AngularJS, Ajax là giải pháp mặc định của bạn và nó xảy ra mọi lúc, hầu như bạn không nhận ra. Bạn có thể bao gồm các mẫu với ng-include. Bạn có thể áp dụng một mẫu với chỉ thị tùy chỉnh đơn giản nhất. Bạn có thể kết hợp một cuộc gọi Ajax trong một dịch vụ và tạo cho mình một dịch vụ GitHub hoặc một dịch vụ Flickr mà bạn có thể truy cập một cách dễ dàng.

Đối tượng dịch vụ so với Chức năng của người trợ giúp

Trong jQuery, nếu chúng ta muốn hoàn thành một nhiệm vụ nhỏ không liên quan đến dom, chẳng hạn như lấy nguồn cấp dữ liệu từ API, chúng ta có thể viết một hàm nhỏ để thực hiện điều đó trong phần đóng của chúng ta. Đó là một giải pháp hợp lệ, nhưng nếu chúng ta muốn truy cập nguồn cấp dữ liệu đó thường xuyên thì sao? Điều gì sẽ xảy ra nếu chúng ta muốn sử dụng lại mã đó trong một ứng dụng khác?

AngularJS cung cấp cho chúng ta các đối tượng dịch vụ.

Dịch vụ là các đối tượng đơn giản chứa các chức năng và dữ liệu. Chúng luôn luôn là những người độc thân, có nghĩa là không bao giờ có thể có nhiều hơn một trong số chúng. Giả sử chúng tôi muốn truy cập API Stack Overflow, chúng tôi có thể viết một API StackOverflowServicexác định các phương thức để làm như vậy.

Giả sử chúng ta có một giỏ hàng. Chúng tôi có thể xác định một ShoppingCartService duy trì giỏ hàng của chúng tôi và chứa các phương pháp để thêm và xóa các mặt hàng. Bởi vì dịch vụ là một đơn lẻ và được chia sẻ bởi tất cả các thành phần khác, bất kỳ đối tượng nào cần có thể ghi vào giỏ hàng và lấy dữ liệu từ đó. Nó luôn luôn là một giỏ hàng.

Đối tượng dịch vụ là các thành phần AngularJS độc lập mà chúng ta có thể sử dụng và sử dụng lại khi chúng ta thấy phù hợp. Chúng là các đối tượng JSON đơn giản chứa các hàm và Dữ liệu. Chúng luôn là các ổ đĩa đơn, vì vậy nếu bạn lưu trữ dữ liệu trên một dịch vụ ở một nơi, bạn có thể lấy dữ liệu đó ra một nơi khác chỉ bằng cách yêu cầu cùng một dịch vụ.

Chèn phụ thuộc (DI) so với Instatiation - hay còn gọi là khử spaghettification

AngularJS quản lý sự phụ thuộc của bạn cho bạn. Nếu bạn muốn một đối tượng, chỉ cần tham khảo nó và AngularJS sẽ lấy nó cho bạn.

Cho đến khi bạn bắt đầu sử dụng, thật khó để giải thích lợi ích thời gian khổng lồ này là gì. Không có gì giống như AngularJS DI tồn tại bên trong jQuery.

DI có nghĩa là thay vì viết ứng dụng của bạn và kết nối nó với nhau, thay vào đó bạn xác định một thư viện các thành phần, mỗi thành phần được xác định bằng một chuỗi.

Giả sử tôi có một thành phần được gọi là 'FlickrService' xác định các phương thức để lấy nguồn cấp dữ liệu JSON từ Flickr. Bây giờ, nếu tôi muốn viết một bộ điều khiển có thể truy cập Flickr, tôi chỉ cần tham khảo tên 'FlickrService' khi tôi khai báo bộ điều khiển. AngularJS sẽ xử lý việc khởi tạo thành phần và cung cấp nó cho bộ điều khiển của tôi.

Ví dụ, ở đây tôi định nghĩa một dịch vụ:

myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

Bây giờ khi tôi muốn sử dụng dịch vụ đó, tôi chỉ cần gọi nó bằng tên như sau:

myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);

AngularJS sẽ nhận ra rằng một đối tượng FlickrService là cần thiết để khởi tạo bộ điều khiển và sẽ cung cấp một đối tượng cho chúng tôi.

Điều này làm cho việc kết nối mọi thứ với nhau rất dễ dàng và loại bỏ khá nhiều xu hướng tạo ra hiện tượng phát tán. Chúng tôi có một danh sách phẳng các thành phần và AngularJS giao chúng cho chúng tôi từng thành phần một khi chúng tôi cần chúng.

Kiến trúc dịch vụ mô-đun

jQuery nói rất ít về cách bạn nên tổ chức mã của mình. AngularJS có ý kiến.

AngularJS cung cấp cho bạn các mô-đun để bạn có thể đặt mã của mình. Ví dụ: nếu bạn đang viết một tập lệnh nói chuyện với Flickr, bạn có thể muốn tạo một mô-đun Flickr để bao bọc tất cả các chức năng liên quan đến Flickr của bạn. Mô-đun có thể bao gồm các mô-đun khác (DI). Ứng dụng chính của bạn thường là một mô-đun và điều này sẽ bao gồm tất cả các mô-đun khác mà ứng dụng của bạn sẽ phụ thuộc vào.

Bạn được sử dụng lại mã đơn giản, nếu bạn muốn viết một ứng dụng khác dựa trên Flickr, bạn có thể chỉ cần đưa vào mô-đun Flickr và thì đấy, bạn có quyền truy cập vào tất cả các chức năng liên quan đến Flickr trong ứng dụng mới của mình.

Mô-đun chứa các thành phần AngularJS. Khi chúng tôi bao gồm một mô-đun, tất cả các thành phần trong mô-đun đó sẽ có sẵn cho chúng tôi dưới dạng một danh sách đơn giản được xác định bằng các chuỗi duy nhất của chúng . Sau đó, chúng ta có thể tiêm các thành phần đó vào nhau bằng cách sử dụng cơ chế tiêm phụ thuộc của AngularJS.

Tóm lại

AngularJS và jQuery không phải là kẻ thù của nhau. Có thể sử dụng jQuery trong AngularJS rất độc đáo. Nếu bạn đang sử dụng AngularJS tốt (mẫu, liên kết dữ liệu, $ phạm vi, chỉ thị, vv), bạn sẽ tìm thấy bạn cần một nhiều ít jQuery hơn bạn khác có thể yêu cầu.

Điều chính cần nhận ra là mẫu của bạn thúc đẩy ứng dụng của bạn. Ngừng cố gắng viết các plugin lớn làm được mọi thứ. Thay vào đó, hãy viết những chỉ thị nhỏ làm một việc, sau đó viết một mẫu đơn giản để kết nối chúng lại với nhau.

Suy nghĩ ít hơn về JavaScript không phô trương, và thay vào đó hãy nghĩ về các phần mở rộng HTML.

Cuốn sách nhỏ của tôi

Tôi rất hào hứng với AngularJS, tôi đã viết một cuốn sách ngắn về nó mà bạn rất hoan nghênh đọc trực tuyến http://nicholasjohnson.com/angular-book/ . Tôi hy vọng nó hữu ích.

152
Ulises 2013-02-21 18:29.

Bạn có thể mô tả sự thay đổi mô hình đó là cần thiết?

Mệnh lệnh so với Khai báo

Với jQuery, bạn nói với DOM những gì cần xảy ra, từng bước một. Với AngularJS, bạn mô tả kết quả bạn muốn nhưng không phải cách thực hiện. Thêm về điều này ở đây . Ngoài ra, hãy xem câu trả lời của Mark Rajcok.

Làm cách nào để kiến ​​trúc và thiết kế các ứng dụng web phía máy khách khác nhau?

AngularJS là toàn bộ khuôn khổ phía máy khách sử dụng mẫu MVC (kiểm tra biểu diễn đồ họa của chúng ). Nó tập trung rất nhiều vào việc tách biệt các mối quan tâm.

Sự khác biệt lớn nhất là gì? Tôi nên ngừng làm gì / sử dụng; tôi nên bắt đầu làm gì / sử dụng thay thế?

jQuery là một thư viện

AngularJS là một khung công tác phía máy khách đẹp mắt, có khả năng kiểm tra cao, kết hợp rất nhiều thứ thú vị như MVC, phụ thuộc chèn , liên kết dữ liệu và hơn thế nữa.

Nó tập trung vào việc tách biệt các mối quan tâm và thử nghiệm (thử nghiệm đơn vịthử nghiệm end-to-end), tạo điều kiện cho sự phát triển theo hướng thử nghiệm.

Cách tốt nhất để bắt đầu là xem qua hướng dẫn tuyệt vời của họ . Bạn có thể thực hiện các bước trong vài giờ; tuy nhiên, trong trường hợp bạn muốn nắm vững các khái niệm đằng sau hậu trường, chúng bao gồm vô số tài liệu tham khảo để đọc thêm.

Có bất kỳ cân nhắc / hạn chế phía máy chủ nào không?

Bạn có thể sử dụng nó trên các ứng dụng hiện có mà bạn đang sử dụng jQuery thuần túy. Tuy nhiên, nếu bạn muốn tận dụng đầy đủ các tính năng của AngularJS, bạn có thể cân nhắc mã hóa phía máy chủ bằng cách sử dụng phương pháp RESTful .

Làm như vậy sẽ cho phép bạn tận dụng nhà máy tài nguyên của họ , tạo ra một bản tóm tắt của API RESTful phía máy chủ của bạn và thực hiện các lệnh gọi phía máy chủ (lấy, lưu, xóa, v.v.) cực kỳ dễ dàng.

84
Scott Rippey 2014-02-21 21:57.

Để mô tả "sự thay đổi mô hình", tôi nghĩ rằng một câu trả lời ngắn gọn là đủ.

AngularJS thay đổi cách bạn tìm các phần tử

Trong jQuery , bạn thường sử dụng bộ chọn để tìm các phần tử, sau đó kết nối chúng:
$('#id .class').click(doStuff);

Trong AngularJS , bạn sử dụng các lệnh để đánh dấu các phần tử trực tiếp, để kết nối chúng:
<a ng-click="doStuff()">

AngularJS không cần (hoặc muốn) bạn tìm các phần tử bằng cách sử dụng bộ chọn - sự khác biệt cơ bản giữa jqLite của AngularJS so với jQuery đầy đủ là jqLite không hỗ trợ bộ chọn .

Vì vậy, khi mọi người nói "hoàn toàn không bao gồm jQuery", chủ yếu là vì họ không muốn bạn sử dụng bộ chọn; họ muốn bạn học cách sử dụng các chỉ thị để thay thế. Trực tiếp, không chọn lọc!

69
Nick Manning 2014-02-04 19:07.

jQuery

jQuery tạo các lệnh JavaScript dài đến mức nực cười như getElementByHerpDerpngắn hơn và trình duyệt chéo.

AngularJS

AngularJS cho phép bạn tạo các thẻ / thuộc tính HTML của riêng mình hoạt động tốt với các ứng dụng web động (vì HTML được thiết kế cho các trang tĩnh).

Biên tập:

Nói "Tôi có nền tảng jQuery, làm thế nào để tôi nghĩ trong AngularJS?" giống như nói "Tôi có nền tảng HTML, làm thế nào để tôi nghĩ trong JavaScript?" Thực tế là bạn đang đặt câu hỏi cho thấy rất có thể bạn không hiểu mục đích cơ bản của hai tài nguyên này. Đây là lý do tại sao tôi chọn trả lời câu hỏi bằng cách chỉ ra sự khác biệt cơ bản thay vì xem qua danh sách nói rằng "AngularJS sử dụng các chỉ thị trong khi jQuery sử dụng các bộ chọn CSS để tạo một đối tượng jQuery thực hiện điều này và điều đó, v.v." . Câu hỏi này không yêu cầu một câu trả lời dài dòng.

jQuery là một cách giúp lập trình JavaScript trong trình duyệt dễ dàng hơn. Các lệnh ngắn hơn, trình duyệt chéo, v.v.

AngularJS mở rộng HTML, vì vậy bạn không cần phải đặt <div>tất cả mọi nơi chỉ để tạo một ứng dụng. Nó làm cho HTML thực sự hoạt động cho các ứng dụng hơn là những gì nó được thiết kế cho các trang web giáo dục tĩnh. Nó hoàn thành điều này một cách vòng vo bằng cách sử dụng JavaScript, nhưng về cơ bản nó là một phần mở rộng của HTML, không phải JavaScript.

61
Samuel 2013-11-03 06:53.

jQuery: bạn nghĩ nhiều về việc 'QUERYing DOM ' cho các phần tử DOM và làm điều gì đó.

AngularJS: Mô hình là sự thật, và bạn luôn suy nghĩ từ KHẢ NĂNG đó.

Ví dụ: khi bạn lấy dữ liệu từ máy chủ mà bạn định hiển thị ở định dạng nào đó trong DOM, trong jQuery, bạn cần phải '1. TÌM "vị trí trong DOM mà bạn muốn đặt dữ liệu này," 2. UPDATE / APPEND 'nó ở đó bằng cách tạo một nút mới hoặc chỉ đặt bên trongHTML của nó . Sau đó, khi bạn muốn cập nhật chế độ xem này, bạn sau đó '3. TÌM 'vị trí và' 4. CẬP NHẬT '. Chu trình tìm và cập nhật này được thực hiện trong cùng một bối cảnh lấy và định dạng dữ liệu từ máy chủ đã không còn trong AngularJS.

Với AngularJS, bạn có mô hình của mình (các đối tượng JavaScript mà bạn đã sử dụng) và giá trị của mô hình cho bạn biết về mô hình (rõ ràng) và về chế độ xem, và một thao tác trên mô hình sẽ tự động truyền đến chế độ xem, vì vậy bạn không nên ' t phải nghĩ về nó. Bạn sẽ thấy mình trong AngularJS không còn tìm thấy những thứ trong DOM.

Nói một cách khác, trong jQuery, bạn cần nghĩ về các bộ chọn CSS, nghĩa là, đâu là divhoặc tdcái có lớp hoặc thuộc tính, v.v., để tôi có thể lấy HTML hoặc màu hoặc giá trị của chúng, nhưng trong AngularJS, bạn sẽ thấy mình đang nghĩ như thế này: tôi đang xử lý mô hình nào, tôi sẽ đặt giá trị của mô hình thành true. Bạn không cần phải bận tâm về việc chế độ xem phản ánh giá trị này là một hộp kiểm hay nằm trong một tdphần tử (chi tiết mà bạn thường phải nghĩ đến trong jQuery).

Và với thao tác DOM trong AngularJS, bạn thấy mình đang thêm các chỉ thị và bộ lọc, mà bạn có thể coi là các phần mở rộng HTML hợp lệ.

Một điều nữa bạn sẽ trải nghiệm trong AngularJS: trong jQuery, bạn gọi các hàm jQuery rất nhiều, trong AngularJS, AngularJS sẽ gọi các hàm của bạn, vì vậy AngularJS sẽ 'cho bạn biết cách làm mọi thứ', nhưng lợi ích mang lại rất đáng giá, vì vậy hãy học AngularJS thường có nghĩa là học những gì AngularJS muốn hoặc cách AngularJS yêu cầu bạn trình bày các chức năng của mình và nó sẽ gọi nó tương ứng. Đây là một trong những điều khiến AngularJS trở thành một khung công tác hơn là một thư viện.

46
Dan 2014-05-17 11:50.

Đó là một số câu trả lời rất hay, nhưng dài dòng.

Tổng hợp kinh nghiệm của tôi:

  1. Bộ điều khiển và nhà cung cấp (dịch vụ, nhà máy, v.v.) là để sửa đổi mô hình dữ liệu, KHÔNG phải HTML.
  2. HTML và các chỉ thị xác định bố cục và liên kết với mô hình.
  3. Nếu bạn cần chia sẻ dữ liệu giữa các bộ điều khiển, hãy tạo một dịch vụ hoặc nhà máy - chúng là các tệp đơn được chia sẻ trên ứng dụng.
  4. Nếu bạn cần một widget HTML, hãy tạo một chỉ thị.
  5. Nếu bạn có một số dữ liệu và hiện đang cố gắng cập nhật HTML ... DỪNG LẠI! cập nhật mô hình và đảm bảo HTML của bạn được liên kết với mô hình.
45
Anand 2013-10-10 22:58.

jQuery là một thư viện thao tác DOM.

AngularJS là một khuôn khổ MV *.

Trên thực tế, AngularJS là một trong số ít các khung JavaScript MV * (nhiều công cụ JavaScript MVC vẫn thuộc thư viện danh mục).

Là một khuôn khổ, nó lưu trữ mã của bạn và có quyền sở hữu các quyết định về những gì sẽ gọi và khi nào!

Bản thân AngularJS bao gồm một phiên bản jQuery-lite bên trong nó. Vì vậy, đối với một số lựa chọn / thao tác DOM cơ bản, bạn thực sự không cần phải bao gồm thư viện jQuery (nó tiết kiệm nhiều byte để chạy trên mạng.)

AngularJS có khái niệm "Chỉ thị" để thao tác DOM và thiết kế các thành phần giao diện người dùng có thể tái sử dụng, vì vậy bạn nên sử dụng nó bất cứ khi nào bạn cảm thấy cần thực hiện những thứ liên quan đến thao tác DOM (chỉ thị chỉ là nơi bạn nên viết mã jQuery trong khi sử dụng AngularJS).

AngularJS liên quan đến một số đường cong học tập (nhiều hơn jQuery :-).

-> Đối với bất kỳ nhà phát triển nào đến từ nền tảng jQuery, lời khuyên đầu tiên của tôi là "học JavaScript như một ngôn ngữ hạng nhất trước khi chuyển sang một framework phong phú như AngularJS!" Tôi đã học được thực tế ở trên một cách khó khăn.

Chúc may mắn.

34
Jin 2013-08-15 04:19.

Đó là táo và cam. Bạn không muốn so sánh chúng. Chúng là hai thứ khác nhau. AngularJs đã tích hợp sẵn jQuery lite cho phép bạn thực hiện thao tác DOM cơ bản mà không cần bao gồm phiên bản jQuery đầy đủ.

jQuery là tất cả về thao tác DOM. Nó giải quyết tất cả các vấn đề liên quan đến trình duyệt nếu không bạn sẽ phải đối phó nhưng nó không phải là một khuôn khổ cho phép bạn chia ứng dụng của mình thành các thành phần như AngularJS.

Một điều hay về AngularJs là nó cho phép bạn tách biệt / cô lập thao tác DOM trong các chỉ thị. Có các chỉ thị tích hợp sẵn sàng để bạn sử dụng chẳng hạn như ng-click. Bạn có thể tạo các chỉ thị tùy chỉnh của riêng mình sẽ chứa tất cả logic chế độ xem hoặc thao tác DOM của bạn để bạn không phải trộn lẫn mã thao tác DOM trong bộ điều khiển hoặc dịch vụ cần xử lý logic nghiệp vụ.

Angular chia nhỏ ứng dụng của bạn thành - Bộ điều khiển - Dịch vụ - Chế độ xem - v.v.

và còn một điều nữa, đó là chỉ thị. Đó là một thuộc tính mà bạn có thể đính kèm vào bất kỳ phần tử DOM nào và bạn có thể bắt đầu sử dụng jQuery bên trong nó mà không cần lo lắng về việc jQuery của bạn có bao giờ xung đột với các thành phần AngularJs hoặc gây rối với kiến ​​trúc của nó.

Tôi nghe nói từ một buổi gặp mặt mà tôi đã tham dự, một trong những người sáng lập Angular cho biết họ đã làm việc rất chăm chỉ để loại bỏ thao tác DOM, vì vậy đừng cố gắng đưa chúng trở lại.

31
codevinsky 2013-11-09 06:08.

Nghe podcast JavaScript Jabber: Episode # 32 có sự góp mặt của những người sáng tạo ban đầu của AngularJS: Misko Hevery & Igor Minar. Họ nói rất nhiều về việc đến với AngularJS từ các nền JavaScript khác, đặc biệt là jQuery.

Một trong những điểm được thực hiện trong podcast đã khiến rất nhiều điều khiến tôi nhấp vào đối với câu hỏi của bạn:

MISKO : [...] một trong những điều chúng tôi rất khó nghĩ đến trong Angular là, làm cách nào để chúng tôi cung cấp nhiều cửa thoát hiểm để bạn có thể thoát ra và về cơ bản tìm ra cách thoát khỏi điều này. Vì vậy, đối với chúng tôi, câu trả lời là thứ này được gọi là "Chỉ thị". Và với các chỉ thị, về cơ bản bạn trở thành một jQuery JavaScript nhỏ bình thường, bạn có thể làm bất cứ điều gì bạn muốn.

IGOR : Vì vậy, hãy nghĩ về chỉ thị như là hướng dẫn cho trình biên dịch cho nó biết bất cứ khi nào bạn gặp phần tử nhất định này hoặc CSS này trong mẫu và bạn giữ loại mã này và mã đó phụ trách phần tử và mọi thứ bên dưới phần tử đó trong cây DOM.

Bản ghi của toàn bộ tập có sẵn tại liên kết được cung cấp ở trên.

Vì vậy, để trả lời trực tiếp câu hỏi của bạn: AngularJS là-mọi người đều kiên định và là một khuôn khổ MV * thực sự. Tuy nhiên, bạn vẫn có thể làm tất cả những thứ thực sự thú vị mà bạn biết và yêu thích với jQuery bên trong các chỉ thị. Vấn đề không phải là "Làm cách nào để làm những gì tôi đã từng làm trong jQuery?" nhiều như vấn đề "Làm cách nào để bổ sung AngularJS với tất cả những thứ tôi đã từng làm trong jQuery?"

Đó thực sự là hai trạng thái tâm trí rất khác nhau.

30
Evan Zamir 2013-09-13 13:21.

Tôi thấy câu hỏi này thật thú vị, vì lần đầu tiên tôi tiếp xúc nghiêm túc với lập trình JavaScript là Node.js và AngularJS. Tôi chưa bao giờ học jQuery, và tôi đoán đó là một điều tốt, bởi vì tôi không phải bỏ học bất cứ thứ gì. Trên thực tế, tôi chủ động tránh các giải pháp jQuery cho các vấn đề của mình và thay vào đó, chỉ tìm kiếm một "cách AngularJS" để giải quyết chúng. Vì vậy, tôi đoán câu trả lời của tôi cho câu hỏi này về cơ bản sẽ là "suy nghĩ như một người chưa bao giờ học jQuery" và tránh bất kỳ sự cám dỗ nào để kết hợp jQuery trực tiếp (rõ ràng AngularJS sử dụng nó ở một mức độ nào đó đằng sau hậu trường).

23
Sanjeev Singh 2014-09-22 06:44.

AngularJS và jQuery:

AngularJs và JQuery hoàn toàn khác nhau ở mọi cấp độ ngoại trừ chức năng JQLite và bạn sẽ thấy nó khi bắt đầu tìm hiểu các tính năng cốt lõi của AngularJs (tôi đã giải thích bên dưới).

AngularJs là một khuôn khổ phía máy khách cung cấp để xây dựng ứng dụng phía máy khách độc lập. JQuery là một thư viện phía máy khách chạy xung quanh DOM.

Nguyên tắc thú vị của AngularJs - Nếu bạn muốn một số thay đổi trên giao diện người dùng của mình, hãy suy nghĩ từ quan điểm thay đổi dữ liệu mô hình. Thay đổi dữ liệu của bạn và giao diện người dùng sẽ tự hiển thị lại. Bạn không cần phải chơi xung quanh DOM mỗi lần trừ khi và cho đến khi nó không được yêu cầu và điều đó cũng nên được xử lý thông qua Angular Directives.

Để trả lời câu hỏi này, tôi muốn chia sẻ kinh nghiệm của mình về ứng dụng doanh nghiệp đầu tiên với AngularJS. Đây là những tính năng tuyệt vời nhất mà Angular cung cấp, nơi chúng tôi bắt đầu thay đổi tư duy jQuery của mình và chúng tôi nhận được Angular giống như một khuôn khổ chứ không phải thư viện.

Liên kết dữ liệu hai chiều thật tuyệt vời: Tôi đã có một lưới với tất cả các chức năng UPDATE, DELTE, INSERT. Tôi có một đối tượng dữ liệu liên kết mô hình của lưới bằng cách sử dụng ng-repeat. Bạn chỉ cần viết một dòng mã JavaScript đơn giản để xóa và chèn và thế là xong. lưới tự động cập nhật khi mô hình lưới thay đổi ngay lập tức. Chức năng cập nhật là thời gian thực, không có mã cho nó. Bạn cảm thấy tuyệt vời!!!

Các chỉ thị có thể tái sử dụng là siêu: Viết các chỉ thị ở một nơi và sử dụng nó trong toàn bộ ứng dụng. CHÚA ƠI!!! Tôi đã sử dụng các chỉ thị này để phân trang, regex, xác nhận hợp lệ, v.v. Nó thực sự thú vị!

Định tuyến mạnh mẽ: Tùy thuộc vào việc triển khai của bạn như thế nào bạn muốn sử dụng nó, nhưng nó yêu cầu rất ít dòng mã để định tuyến yêu cầu chỉ định HTML và bộ điều khiển (JavaScript)

Bộ điều khiển thật tuyệt vời: Bộ điều khiển quản lý HTML của riêng chúng, nhưng sự tách biệt này cũng hoạt động tốt cho các chức năng thông thường. Nếu bạn muốn gọi cùng một hàm khi nhấp vào một nút trên HTML chính, chỉ cần viết tên hàm giống nhau trong mỗi bộ điều khiển và viết mã riêng lẻ.

Plugin: Có nhiều tính năng tương tự khác như hiển thị lớp phủ trong ứng dụng của bạn. Bạn không cần phải viết mã cho nó, chỉ cần sử dụng một plugin lớp phủ có sẵn dưới dạng wc-overlay và điều này sẽ tự động xử lý tất cả các yêu cầu XMLHttpRequest (XHR).

Lý tưởng cho kiến trúc RESTful : Là một khung hoàn chỉnh làm cho AngularJS trở nên tuyệt vời để làm việc với kiến ​​trúc RESTful. Để gọi các API REST CRUD rất dễ dàng hơn và

Dịch vụ : Viết mã phổ biến bằng cách sử dụng dịch vụ và ít mã hơn trong bộ điều khiển. Các thiết bị có thể được sử dụng để chia sẻ các chức năng chung giữa các bộ điều khiển.

Khả năng mở rộng : Angular đã mở rộng các chỉ thị HTML bằng cách sử dụng các chỉ thị góc. Viết các biểu thức bên trong html và đánh giá chúng trong thời gian chạy. Tạo chỉ thị và dịch vụ của riêng bạn và sử dụng chúng trong một dự án khác mà không cần nỗ lực thêm.

20
Tyblitz 2014-06-22 01:59.

Là một người mới bắt đầu JavaScript MV * và hoàn toàn tập trung vào kiến ​​trúc ứng dụng (không phải vấn đề phía máy chủ / máy khách), tôi chắc chắn sẽ giới thiệu tài nguyên sau (mà tôi ngạc nhiên là chưa được đề cập đến): JavaScript Design Patterns , bởi Addy Osmani , như một phần giới thiệu về các Mẫu thiết kế JavaScript khác nhau . Các thuật ngữ được sử dụng trong câu trả lời này được lấy từ tài liệu được liên kết ở trên. Tôi sẽ không lặp lại những gì đã nói thật hay trong câu trả lời được chấp nhận. Thay vào đó, câu trả lời này liên kết trở lại nền tảng lý thuyết cung cấp năng lượng cho AngularJS (và các thư viện khác).

Giống như tôi, bạn sẽ nhanh chóng nhận ra rằng AngularJS (hoặc Ember.js , Durandal và các khuôn khổ MV * khác cho vấn đề đó) là một khuôn khổ phức tạp tập hợp nhiều mẫu thiết kế JavaScript khác nhau.

Tôi cũng thấy dễ dàng hơn khi kiểm tra (1) mã JavaScript gốc và (2) các thư viện nhỏ hơn cho từng mẫu này riêng biệt trước khi đi sâu vào một khuôn khổ toàn cầu. Điều này cho phép tôi hiểu rõ hơn những vấn đề quan trọng nào mà một khuôn khổ gặp phải (bởi vì cá nhân bạn đang đối mặt với vấn đề này).

Ví dụ:

  • Lập trình hướng đối tượng JavaScript (đây là liên kết tìm kiếm của Google). Nó không phải là một thư viện, nhưng chắc chắn là điều kiện tiên quyết để lập trình ứng dụng. Nó đã dạy cho tôi cách triển khai nguyên bản của các mẫu nguyên mẫu, hàm tạo, singleton & decorator
  • jQuery / Underscore cho mẫu mặt tiền (như WYSIWYG để thao tác DOM)
  • Prototype.js cho mẫu prototype / constructor / mixin
  • RequestJS / Curl.js cho mẫu mô-đun / AMD
  • KnockoutJS cho mẫu có thể quan sát, xuất bản / đăng ký

NB: Danh sách này không đầy đủ, cũng không phải 'thư viện tốt nhất'; chúng chỉ là những thư viện mà tôi đã sử dụng. Các thư viện này cũng bao gồm nhiều mẫu hơn, những mẫu được đề cập chỉ là trọng tâm chính hoặc ý định ban đầu của chúng. Nếu bạn cảm thấy thiếu điều gì đó trong danh sách này, vui lòng đề cập đến nó trong phần bình luận, và tôi rất vui lòng bổ sung nó.

12
Huy Tran 2014-08-27 20:04.

Trên thực tế, nếu bạn đang sử dụng AngularJS, bạn không cần jQuery nữa. Bản thân AngularJS có ràng buộc và chỉ thị, là một "sự thay thế" rất tốt cho hầu hết mọi thứ bạn có thể làm với jQuery.

Tôi thường phát triển các ứng dụng di động bằng AngularJS và Cordova . Điều DUY NHẤT từ jQuery tôi cần là Bộ chọn.

Bằng cách sử dụng googling, tôi thấy rằng có một mô-đun bộ chọn jQuery độc lập ở đó. Đó là Sizzle.

Và tôi quyết định tạo một đoạn mã nhỏ giúp tôi bắt đầu nhanh chóng một trang web bằng AngularJS với sức mạnh của jQuery Selector (sử dụng Sizzle).

Tôi đã chia sẻ mã của mình ở đây: https://github.com/huytd/Sizzular

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Thời gian, sự kiên nhẫn, thời gian, sự cống hiến và thời gian chỉ là một vài trong số những thứ mà Peter Bellerby cần để thành lập và sau đó điều hành Bellerby & Co. Globemakers, một trong những công ty duy nhất trên Trái đất vẫn sản xuất các quả địa cầu bằng tay.

Năm giai đoạn đau buồn sau khi mất việc làm

Năm giai đoạn đau buồn sau khi mất việc làm

Đó là một ngày thứ Bảy, máy bay của tôi hạ cánh, và tôi đã sẵn sàng để thư giãn trong một kỳ nghỉ cuối tuần ngắn ngủi, khi một email đến trên điện thoại của tôi. Tôi đã mất việc.

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Nếu bạn đã từng bị đánh cắp danh tính của mình, bạn biết đó là một trải nghiệm đáng sợ và căng thẳng. Một cách không phổ biến để ngăn chặn nó? Tín dụng bị đóng băng.

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Eleanor (Kristen Bell) dường như đã tình nguyện cho chúng tôi làm vật tưởng nhớ. NBC's The Good Place là một chương trình thích thử thách tốt.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language