Chỉ thị AngularJS vs Dịch vụ vs Trình điều khiển

Tôi sắp bắt đầu thực hiện một yêu cầu thay đổi trên trang web nội bộ của công ty tôi, điều đó sẽ kiểm tra một loạt các lĩnh vực và làm nổi bật chúng nếu chúng phù hợp với các nguyên tắc nhất định. Ví dụ: nếu ngày sinh là hôm nay, trường đó sẽ được phác thảo và chú giải công cụ sẽ nói "Chúc họ sinh nhật vui vẻ!".

Thông số kỹ thuật yêu cầu tải này sau khi phần còn lại của trang được hiển thị xong, vì vậy nó sẽ không tăng thời gian tải. Vì tôi chưa quen với angularJS, tôi không chắc chắn về những cách 'phù hợp' nên được thực hiện.

Các vấn đề:

Vì điều này bao gồm thêm các đường viền và hình ảnh và thuộc tính tiêu đề (thao tác DOM), có vẻ như tôi nên sử dụng một lệnh.

Tuy nhiên, điều này sẽ không thể tái sử dụng hoặc 'ngắn' như hầu hết các chỉ thị dường như.

Một nửa dữ liệu tôi cần kiểm tra sẽ được trả lại trong cuộc gọi ban đầu khi tải trang, vì vậy tôi muốn lưu lại và không lãng phí cuộc gọi khác nhận lại, điều đó khiến tôi nghĩ rằng một dịch vụ sẽ tốt khi lưu trữ tất cả dữ liệu đó.

Tôi biết làm thế nào để làm tất cả điều này trong bộ điều khiển, nhưng đó là mã xấu xấu: P

Bất kỳ ý tưởng về cách tốt nhất này có thể được thực hiện? Về cơ bản, tôi sẽ cần một cuộc gọi http để kiểm tra tất cả dữ liệu, dữ liệu này sẽ trả về một đối tượng có giá trị bool cho từng loại 'Gọi ra' tôi cần làm. Sau đó, tôi sẽ chạy qua danh sách này và nếu giá trị là đúng, hãy thêm đường viền, hình ảnh và văn bản chú giải công cụ.

Tôi không chắc câu hỏi này có đủ rõ ràng hay không, vì vậy nếu bạn muốn tôi thêm một số chi tiết, vui lòng hỏi. Cảm ơn bạn!

Bạn nói đúng, có nhiều lựa chọn chơi.

Một bộ điều khiển là một nơi tốt để bắt đầu viết một cái gì đó mới trong góc. Việc gắn bộ điều khiển vào một phần đánh dấu cho phép bạn sử dụng thư viện chỉ thị đã có sẵn của các góc với các dịch vụ hiện có của góc.

Sau một thời gian ngắn sống với điều này, bạn sẽ nhận ra bộ điều khiển của mình đã trở nên quá lớn. Vâng bây giờ là thời gian để tái cấu trúc. Đây là hướng dẫn chung tôi có xu hướng làm theo.

• Bộ điều khiển: bộ điều khiển gắn và quản lý các giá trị / chức năng gắn với phạm vi $. Cuối cùng, phạm vi $ có xu hướng được trình bày nhiều . IE là một mô hình xem.
• Dịch vụ: dịch vụ có xu hướng ràng buộc về cơ sở hạ tầng, phụ trợ hoặc các tính năng khác của trình duyệt
• Chỉ thị: chỉ thị cho phép bạn tích hợp với các sự kiện / chức năng DOM không được xử lý bởi các trình xử lý hiện có.

Vì vậy, bạn sẽ muốn đẩy mã theo một trong ba hướng:

1. Mã từ bộ điều khiển của tôi thực sự là một phần logic / dữ liệu trình bày khác và nên được chia thành bộ điều khiển khác . Lưu ý khi làm việc với các mục trên phạm vi $, tốt nhất nên tách riêng các phần mà mỗi bộ điều khiển chịu trách nhiệm thành các đối tượng của riêng chúng trên phạm vi $. Ví dụ: $ scope.creditCard. [Blah] cho một bộ điều khiển so với $ scope.billingAddress. [Blah] cho một bộ điều khiển khác. Điều này giúp ngăn chặn các vấn đề với việc sử dụng kế thừa nguyên mẫu góc cạnh trên phạm vi $.

2. Mã từ bộ điều khiển của tôi là một phần của cơ sở hạ tầng ứng dụng hoặc mã tiện ích, có thể cần được chia sẻ thông qua ứng dụng và nên được tách ra thành một dịch vụ

3. Mã từ bộ điều khiển của tôi liên quan nhiều đến tổ chức trình bày / DOM và do đó nên được tách ra thành chỉ thị riêng của nó

Một ví dụ về 1. có thể là xử lý việc nhập / xác thực thẻ tín dụng tách biệt với phần còn lại của hình thức thanh toán. Bạn sẽ có một loạt logic thẻ tín dụng trong một bộ điều khiển tách biệt với logic để cho phép người dùng nhập địa chỉ, vì vậy chúng sẽ là các bộ điều khiển riêng biệt.

Một ví dụ về 2 có thể là chuyển phần giao tiếp với dịch vụ phụ trợ thẻ tín dụng sang chấp nhận / từ chối thanh toán. Hoặc một ví dụ khác có thể là một mô-đun nói chuyện với phụ trợ để xử lý API tạo người dùng.

Một ví dụ về 3 có thể là tạo ra một số loại chức năng tab tự động di chuyển con trỏ giữa 4 hộp chỉnh sửa sau khi nhập 4 số cho thẻ tín dụng.

Chia nhỏ ứng dụng của bạn cho phù hợp.