Chỉ thị AngularJS là gì?

Tôi đã dành khá nhiều thời gian để đọc qua tài liệu AngularJS và một số hướng dẫn, và tôi đã khá ngạc nhiên về việc tài liệu này không thể chấp nhận được.

Tôi có một câu hỏi đơn giản, có thể trả lời cũng có thể hữu ích cho những người khác đang tìm cách chọn AngularJS:

Chỉ thị AngularJS là gì?

Cần có một định nghĩa đơn giản, chính xác về một chỉ thị ở đâu đó, nhưng trang web AngularJS cung cấp các định nghĩa vô dụng đáng ngạc nhiên này:

Trên trang chủ :

Chỉ thị là một tính năng độc đáo và mạnh mẽ có sẵn trong AngularJS. Chỉ thị cho phép bạn phát minh ra cú pháp HTML mới, cụ thể cho ứng dụng của bạn.

Trong tài liệu dành cho nhà phát triển :

Chỉ thị là một cách để dạy các thủ thuật mới của HTML. Trong các chỉ thị biên dịch DOM được khớp với HTML và được thực thi. Điều này cho phép các chỉ thị đăng ký hành vi hoặc chuyển đổi DOM.

Và có một loạt các cuộc nói chuyện về các chỉ thị, trớ trêu thay, dường như cho rằng khán giả đã hiểu chúng là gì.

Bất cứ ai cũng có thể đưa ra, để tham khảo rõ ràng, một định nghĩa chính xác về những gì một chỉ thị là giải thích:

1. Nó là gì (xem định nghĩa rõ ràng của jQuery làm ví dụ)
2. Những vấn đề thực tế và tình huống nó dự định sẽ giải quyết
3. Kiểu mẫu thiết kế mà nó thể hiện, hoặc cách khác, làm thế nào nó phù hợp với nhiệm vụ MVC / MVW có chủ đích của AngularJS.

Nó là gì (xem định nghĩa rõ ràng của jQuery làm ví dụ)?

Một chỉ thị về bản chất là một hàm ^† rằng thực thi khi trình biên dịch kiễu góc tìm thấy nó trong DOM. Các hàm có thể làm hầu hết mọi thứ, đó là lý do tại sao tôi nghĩ khá khó để xác định lệnh là gì. Mỗi chỉ thị có một tên (như ng-repeat, tab, make-up-your-own) và mỗi chỉ thị xác định nơi nó có thể được sử dụng: phần tử, thuộc tính, lớp, trong một nhận xét.

^† Một chỉ thị thường chỉ có một (bưu điện) chức năng liên kết. Một lệnh phức tạp có thể có chức năng biên dịch, chức năng liên kết trước và chức năng sau liên kết.

Những vấn đề thực tế và tình huống là nó dự định để giải quyết?

Các chỉ thị mạnh mẽ nhất có thể làm là mở rộng HTML. Tiện ích mở rộng của bạn là Ngôn ngữ cụ thể miền (DSL) để xây dựng ứng dụng của bạn. Ví dụ: nếu ứng dụng của bạn chạy một trang web mua sắm trực tuyến, bạn có thể mở rộng HTML để có các "lệnh mua sắm", "phiếu giảm giá", "đặc biệt", v.v. - bất kỳ từ hoặc đối tượng hoặc khái niệm nào tự nhiên hơn để sử dụng trong " tên miền "mua sắm trực tuyến, thay vì" div "và" span "(như @WTK đã đề cập).

Các chỉ thị cũng có thể thành phần HTML - nhóm một nhóm HTML thành một số thành phần có thể sử dụng lại. Nếu bạn thấy mình sử dụng ng-include để lấy rất nhiều HTML, có lẽ đã đến lúc tái cấu trúc thành các chỉ thị.

Kiểu mẫu thiết kế nào mà nó thể hiện, hoặc cách khác, làm thế nào nó phù hợp với nhiệm vụ MVC / MVW có chủ đích của angularjs

Chỉ thị là nơi bạn thao tác DOM và bắt các sự kiện DOM. Đây là lý do tại sao các hàm biên dịch và liên kết của lệnh đều nhận được "phần tử" làm đối số. Bạn có thể

• định nghĩa một loạt HTML (nghĩa là một mẫu) để thay thế chỉ thị
• liên kết các sự kiện với yếu tố này (hoặc con của nó)
• thêm / xóa một lớp
• thay đổi giá trị văn bản ()
• theo dõi các thay đổi đối với các thuộc tính được xác định trong cùng một phần tử (thực ra đó là các giá trị của các thuộc tính được theo dõi - đây là các thuộc tính phạm vi, do đó chỉ thị theo dõi "mô hình" để thay đổi)
• Vân vân.

Có lẽ một định nghĩa thực sự đơn giản và ban đầu cho các chỉ thị góc sẽ là

Các chỉ thị AngularJS (ng-directives) là các thuộc tính HTML có tiền tố ng (ng-model, ng-app, ng-repeat, ng-bind) được Angular sử dụng để mở rộng HTML. ( từ: Hướng dẫn góc cạnh của W3schools )

Một số ví dụ về điều này sẽ là

Lệnh ng-app định nghĩa một ứng dụng AngularJS.

Lệnh ng-model liên kết giá trị của các điều khiển HTML (đầu vào, chọn, textarea) với dữ liệu ứng dụng.

Lệnh ng-bind liên kết dữ liệu ứng dụng với chế độ xem HTML.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Kiểm tra hướng dẫn này, ít nhất với tôi đó là một trong những lời giới thiệu tốt nhất về Angular. Một cách tiếp cận đầy đủ hơn sẽ là tất cả mọi thứ mà @ mark-rajcok đã nói trước đây.

Nhìn vào tài liệu, các chỉ thị là các cấu trúc bạn có thể viết rằng angularjs phân tích cú pháp để tạo các đối tượng và hành vi. widget của bạn (thành phần) được cấu trúc, cách nó hoạt động và cách nó được cung cấp với dữ liệu. Angularjs sau đó chạy theo các chỉ thị đó để dịch chúng thành mã html / javascript hoạt động.

Các chỉ thị có để bạn có thể xây dựng các thành phần (vật dụng) phức tạp hơn bằng cách sử dụng ngữ nghĩa phù hợp. Chỉ cần xem ví dụ angularjs của các lệnh - chúng đang xác định khung tab (tất nhiên không hợp lệ trong HTML thông thường). Nó trực quan hơn so với việc sử dụng như div hoặc s để tạo cấu trúc mà sau đó được tạo kiểu để trông giống như một khung tab.

Trong AngularJS Directives là các đánh dấu lại html cho một phần tử DOM DOM như thuộc tính (hạn chế- A), tên thành phần (hạn chế- E), nhận xét (hạn chế- M) hoặc lớp CSS (hạn chế - C) cho trình biên dịch HTML của AngularJS ($ biên dịch) để thực hiện một hành vi được chỉ định cho phần tử DOM đó hoặc thậm chí biến đổi phần tử DOM và các phần tử con của nó. Ví dụ về một số là ng-bind, ng-hide / show, v.v.

Trang chủ rất rõ ràng về điều này: Khi bạn di chuột qua các tab trong phần cuối cùng:

Chúng tôi đã mở rộng vốn từ vựng của HTML với một tabs yếu tố tùy chỉnh . Các tabstóm tắt cấu trúc HTML phức tạp và hành vi cần thiết để render các tab. Kết quả là một cái nhìn dễ đọc hơn và cú pháp rất dễ sử dụng lại. "

Sau đó trong tab tiếp theo:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

Vì vậy, bạn có thể phát minh ra các phần tử html tức là tabsvà để cho góc cạnh xử lý kết xuất các phần tử đó.