Cách được đề xuất để cấu trúc khung nhìn thành phần tùy chỉnh Joomla 3 bằng angularJS là gì?


7

Có rất ít thông tin từ những người dùng đã tích hợp thành công js góc trong một chế độ xem danh sách thành phần tùy chỉnh j Joomla. Tôi tìm thấy như sau:

/programming/23365907/how-to-integrate-angularjs-app-inside-j Joomlahttp://jeviathon.com/2014/06/02/j Joomla3/

và tôi đã đọc các tài liệu trên giao diện jjj ajax - https : //docs.j Joomla.org/Using_J Joomla_Ajax_Interface - có vẻ hữu ích.

Dự án cụ thể của tôi là j lớn! Trang web 3,4 với một số thành phần tùy chỉnh được khởi động trong thành phần-creator.com mỗi trang có dạng xem, mục và danh sách. Mục tiêu ban đầu của tôi là tận dụng góc cạnh trên một số chế độ xem danh sách phù hợp để tìm kiếm và lọc UX khéo léo.

Các thực hành được đề nghị từ các chuyên gia là gì? Có ai đã làm điều này? Các bước / cạm bẫy là gì.

Cảm ơn

Câu trả lời:


7

Theo kinh nghiệm của tôi:

  • Chế độ xem JSON : Tôi đã tạo các thành phần dựa trên kết xuất JSON tự động của foF https://github.com/akeeba/fof Theo cách này, việc tải / nhận truy vấn rất đơn giản. Mặc dù vậy, một số tác vụ nhất định có thể được giải quyết bằng chức năng Bộ điều khiển đơn giản. Với FoF, trong trường hợp hoàn hảo, bạn có thể gọi Url (index.php? Tùy chọn = com_todo & view = task & format = json) và truy xuất đầu ra JSON mà không cần thêm mã. Trong thực tế, bạn có thể phải xác định chế độ xem / tmpl / task_json.php để dịch múi giờ hoặc mã hóa ký tự cho AngularJS.

  • Giới thiệu về Giao diện Joomla Ajax : Đây là một tính năng hấp dẫn, bạn chỉ cần tạo một plugin hoặc mô-đun để tích hợp các truy vấn Ajax. Đây là công nghệ để tích hợp mô-đun Ajax. Nhưng, để phát triển thành phần, tôi chọn tạo JSON ở cấp thành phần để kiểm soát tốt hơn.

  • Trình quản lý mô-đun : AngularJS có định nghĩa riêng về các mô-đun. Hầu hết các ứng dụng AngularJS được tổ chức trong ứng dụng, bộ điều khiển và dịch vụ. Mặt khác, Joomla có một cách đơn giản để thêm Javascript vào một trang (addScript hoặc addScriptDeclaration). Vì vậy, trong bất kỳ tổ chức dự án âm thanh nào, bạn có kế hoạch cho một hộp công cụ phát triển để biên dịch tất cả các tệp AngularJS thành các tệp được thu nhỏ.
  • Joomla MVC <-> AngularJS MV * Không có bản dịch trực tiếp giữa cả hai khung. Sau đó, Joomla View chỉ là một bức tranh mà AngularJS xem trực tiếp. Các dịch vụ AngularJS có thể phù hợp với các mô hình / bảng Joomla.
  • Bảo mật và Xác thực AngularJS phải tuân theo các nguyên tắc khung của Joomla. Namenly, mã thông báo trong $ resource và $ http truy vấn. Tất cả các hành động phải được kiểm tra ACL.

Bạn có thể giải thích điều này cho tôi: "Tôi đã tạo các thành phần dựa trên kết xuất JSON tự động của foF github.com/akeeba/fof Theo cách này, việc tải / nhận truy vấn rất đơn giản."
user2097091 3/03/2015

Với FoF, trong trường hợp hoàn hảo, bạn có thể gọi Url (index.php? Tùy chọn = com_todo & view = task & format = json) và truy xuất đầu ra JSON mà không cần thêm mã. Trong thực tế, bạn có thể phải xác định chế độ xem / tmpl / task_json.php để dịch múi giờ hoặc mã hóa ký tự cho AngularJS.
Anibal

Bạn có biết bất kỳ thành phần ví dụ ngoài đó?
user2097091 3/03/2015

Chúng tôi đã thực hiện nó cho Composer xã hội của AutoTweetNG và Joocial extly.com/autotweet-ng-pro.html ;-)
Anibal

Đối với cộng đồng, bạn có muốn mở rộng câu trả lời của mình bằng một số ví dụ / bước cụ thể không?
user2097091 3/03/2015

1

Tôi đã có 3 ứng dụng Angular chạy trên Joomla ngay bây giờ.

Ý tưởng cơ bản là thiết lập tài nguyên và để nó xử lý các trường yêu cầu tùy chọn / định dạng / trình điều khiển, sau đó trong bộ điều khiển, gọi mô hình của bạn để làm toán, sau đó tùy thuộc vào nơi bạn đã lưu trữ kết quả trong mô hình,

$ reply = new stdClass (); $ hồi đáp-> dữ liệu = $ mô hình-> dữ liệu;

echo json_encode ($ hồi đáp);

siêu sạch, siêu dễ.

Theo như hiển thị ứng dụng của bạn, có một chế độ xem j Joomla duy nhất cho mỗi ứng dụng trong trường hợp của tôi. tmpl / default.php về cơ bản chỉ là bao gồm cho html chính.

Tôi sử dụng ngBoilerplate làm cơ sở cho các bản dựng của mình, vì vậy tôi đã phải sửa đổi index.html để tìm các tập lệnh mà grunt đang chèn.

Bản thân ứng dụng này nằm trong / media / com_extension / lib / app / build. Tôi đã để nó trong bản dựng vì nó không ảnh hưởng gì cả và bây giờ tôi có thể dễ dàng chỉnh sửa và xây dựng từ thư mục nơi ứng dụng sẽ được phục vụ.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.