Sự khác biệt giữa dịch vụ, chỉ thị và mô-đun là gì?

Tôi đã đọc rất nhiều tài liệu, và tôi càng ngày càng bối rối. Về cơ bản tôi không thể tìm ra sự khác biệt giữa một

• dịch vụ
• chỉ thị
• mô-đun

Tôi thấy rất nhiều thành phần tùy chỉnh. Đôi khi họ đang sử dụng chỉ thị, đôi khi dịch vụ. Nó luôn bắt đầu với một mô-đun. Ai đó có thể giải thích với một ví dụ về sự khác biệt giữa ba loại này không?

Hãy nghĩ về một mô-đun như là một nơi để kết nối một số thứ khác, chẳng hạn như chỉ thị, dịch vụ, hằng số, vv Các mô-đun có thể được đưa vào các mô-đun khác cho bạn mức độ tái sử dụng cao.

Khi viết một ứng dụng góc cạnh, bạn sẽ có một mô-đun cấp cao nhất là mã ứng dụng của bạn (không có mẫu).

Dịch vụ chủ yếu là một cách để giao tiếp giữa các bộ điều khiển, nhưng bạn có thể tiêm dịch vụ này vào dịch vụ khác. Các dịch vụ thường được sử dụng như một cách để truy cập vào kho lưu trữ dữ liệu của bạn và mọi người sẽ bọc các API góc cạnh, chẳng hạn như ngResource. Kỹ thuật này rất hữu ích vì nó làm cho việc kiểm tra (đặc biệt là chế nhạo) khá dễ dàng. Bạn có thể có các dịch vụ để làm những việc khác như xác thực, đăng nhập, v.v.

Các chỉ thị được sử dụng để tạo các widget hoặc gói những thứ hiện có như các plugin jquery. Việc gói các plugin hiện có có thể là một thách thức và lý do bạn sẽ làm điều này là để thiết lập liên kết dữ liệu hai chiều giữa các plugin và góc. Nếu bạn không cần ràng buộc dữ liệu hai chiều thì bạn không cần phải bọc chúng.

Lệnh cũng là nơi để thực hiện thao tác DOM, bắt các sự kiện DOM, v.v. Bạn không nên thực hiện các công việc liên quan đến DOM trong bộ điều khiển hoặc dịch vụ. Tạo chỉ thị có thể nhận được khá phức tạp. IMHO, tôi khuyên bạn trước tiên nên xem API để tìm thứ gì đó có thể làm những gì bạn đang tìm kiếm HOẶC hỏi Google Group của Angular để được tư vấn.

Từ ghi chú cá nhân của riêng tôi (chủ yếu là đoạn trích từ tài liệu, bài đăng trên nhóm google và bài đăng SO):

Mô-đun

• cung cấp một cách để không gian tên / dịch vụ nhóm, chỉ thị, bộ lọc, thông tin cấu hình và mã khởi tạo
• giúp tránh các biến toàn cầu
• được sử dụng để định cấu hình trình tiêm $, cho phép những thứ được xác định bởi mô-đun (hoặc toàn bộ mô-đun) được đưa vào nơi khác (Công cụ tiêm phụ thuộc)
• Các mô-đun góc không liên quan đến CommonJS hoặc Require.js. Trái ngược với các mô-đun AMD hoặc Require.js, các mô-đun Angular không cố gắng giải quyết vấn đề về thứ tự tải tập lệnh hoặc tìm nạp tập lệnh lười biếng. Các mục tiêu này là trực giao và cả hai hệ thống mô-đun có thể sống cạnh nhau và hoàn thành các mục tiêu của chúng (vì vậy các tài liệu yêu cầu).

Dịch vụ

• là các singletons, vì vậy chỉ có một phiên bản của mỗi dịch vụ bạn xác định. Là người độc thân, họ không bị ảnh hưởng bởi phạm vi và do đó có thể được truy cập bằng (chia sẻ với) nhiều chế độ xem / bộ điều khiển / chỉ thị / dịch vụ khác
• Bạn có thể (và có lẽ nên) tạo các dịch vụ tùy chỉnh khi
  • hai hoặc nhiều thứ cần truy cập vào cùng một dữ liệu (không sử dụng phạm vi gốc) hoặc bạn chỉ muốn đóng gói gọn gàng dữ liệu của mình
  • bạn muốn đóng gói các tương tác với một máy chủ web (mở rộng $ resource hoặc $ http trong dịch vụ của bạn)
• Các dịch vụ tích hợp bắt đầu bằng '$'.
• Để sử dụng một dịch vụ, cần phải tiêm phụ thuộc vào người phụ thuộc (ví dụ: trên bộ điều khiển hoặc dịch vụ khác hoặc chỉ thị).

Các chỉ thị (một số mục bên dưới nói về cơ bản giống nhau, nhưng tôi thấy rằng đôi khi một cách diễn đạt hơi khác nhau sẽ giúp ích rất nhiều)

• chịu trách nhiệm cập nhật DOM khi trạng thái của mô hình thay đổi
• mở rộng vốn từ vựng HTML = dạy các thủ thuật mới của HTML.
  Angular đi kèm với một tập hợp các lệnh được tích hợp (ví dụ: ng- * Stuff) rất hữu ích để xây dựng các ứng dụng web nhưng bạn có thể thêm HTML của riêng mình để HTML có thể được chuyển thành Ngôn ngữ cụ thể miền khai báo (DSL). Ví dụ: các phần tử <tab> và <pane> trên bản demo trang chủ Angular "Tạo thành phần".
  • Các chỉ thị tích hợp không rõ ràng (vì chúng không bắt đầu bằng "ng"): a, biểu mẫu, đầu vào, tập lệnh, chọn, textarea. Dưới Angular, tất cả những điều này làm nhiều hơn bình thường!
• Chỉ thị cho phép bạn "thành phần hóa HTML". Chỉ thị thường tốt hơn ng-bao gồm. Ví dụ, khi bạn bắt đầu viết nhiều HTML với chủ yếu liên kết dữ liệu, hãy cấu trúc lại HTML đó thành các chỉ thị (có thể sử dụng lại).
• Trình biên dịch Angular cho phép bạn đính kèm hành vi với bất kỳ thành phần hoặc thuộc tính HTML nào và thậm chí tạo các thành phần hoặc thuộc tính HTML mới với hành vi tùy chỉnh. Angular gọi các chỉ thị mở rộng hành vi .
  • Khi bạn đun sôi tất cả, một lệnh chỉ là một hàm thực thi khi trình biên dịch Angular gặp nó trong DOM.
• Lệnh là một hành vi hoặc chuyển đổi DOM được kích hoạt bởi sự hiện diện của một thuộc tính, tên thành phần, tên lớp hoặc tên trong một nhận xét. Chỉ thị là một hành vi nên được kích hoạt khi gặp các cấu trúc HTML cụ thể trong quá trình biên dịch (HTML). Các chỉ thị có thể được đặt trong tên thành phần, thuộc tính, tên lớp, cũng như ý kiến.
  • Hầu hết các chỉ thị được giới hạn chỉ thuộc tính. Ví dụ: DoubleClick chỉ sử dụng các chỉ thị thuộc tính tùy chỉnh.
• xem thêm Chỉ thị angularjs là gì?

Xác định và nhóm những thứ Angular (công cụ tiêm phụ thuộc) trong các mô-đun.
Chia sẻ dữ liệu và bọc tương tác máy chủ web trong các dịch vụ.
Mở rộng HTML và thực hiện thao tác DOM trong các chỉ thị.
Và làm cho Bộ điều khiển càng "mỏng" càng tốt.