AngularJS - server-side render

Question

Như bạn đã biết, Airbnb opensourced Rendr (http://nerds.airbnb.com/weve-open-sourced-rendr) mà nên cho phép server-side render của Backbone ứng dụng. Điều này là tuyệt vời, bởi vì người ta có thể chạy "lần lặp" đầu tiên của việc kết xuất khuôn mẫu trên máy chủ và máy khách nhận được tài liệu HTML hoàn toàn được kết xuất cùng với toàn bộ ứng dụng JS. Nó làm giảm đáng kể thời gian hiển thị và có thể giúp chúng tôi loại bỏ các hệ thống khuôn mẫu phía máy chủ khác.

Vì vậy, có ai đó đã quản lý kết xuất AngularJS với jsdom hoặc ZombieJS? Những giả lập về trình duyệt dom/trình duyệt trên Node.js nên theo lý thuyết là đủ cho việc tạo khuôn mẫu góc phía máy chủ đơn giản, nhưng kết quả tôi tìm thấy googling nó không phải là rất kết luận.

Answer 1

@ dai-shi tạo trình kết nối trước, xem here. Vẫn còn một vài vấn đề nhưng hy vọng một khởi đầu tốt đẹp

Answer 2

Tôi cũng đang tìm kiếm giải pháp. Nhưng nó không phải là một tùy chọn để sử dụng trình duyệt để hiển thị html trên máy chủ và gửi nó tới giao diện người dùng. Airbnb thử nó đầu tiên nhưng bị từ chối vì chậm và thiếu tài nguyên. Nó không phải là một giải pháp sản xuất.

Cập nhật: Đây sớm có thể được có thể với sự ra đời của Object.observe;)

Answer 3

Dưới đây là một giải pháp: https://github.com/ithkuil/angular-on-server

wiki để biết chi tiết

Answer 4

Đây không phải là performant, nhưng tôi đã đang làm việc trên một đơn giản PhantomJS server for Heorku sẽ phân tích cú pháp bất kỳ JS khách hàng nào. Tôi sử dụng nó đặc biệt với Angular và Rails để phục vụ HTML cho các yêu cầu bot.

Answer 5

AngularJS 2.0 cũng có thể hoạt động trên máy chủ. Vojta Jina nói về nó trên chương trình "JavaScript Jabber" # 109 - http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ (32:30 trong trình phát). Có một liên kết đến mô-đun tiêm phụ thuộc mới của AngularJS - https://github.com/angular/di.js.

Answer 6

AngularJS hoạt động với bối cảnh jsdom mà không có bất kỳ thủ thuật nào. Chỉ cần thêm angular.js vào js src danh sách và trang chính của ứng dụng góc để jsdom trên initializion của nó.

Vì vậy, hiển thị rất đơn giản: chỉ cần sử dụng góc trong jsdom và nó hoạt động. Đưa nó vào trình duyệt hơi khó hơn.

Một cách là đồng bộ hóa hàng loạt thay đổi DOM.

Để nhận cập nhật từ máy chủ đến máy khách, bạn có thể sử dụng MutationEvents (không may, jsdom không hỗ trợ MutationObservers, nhưng MutationEvents hoạt động khá nhanh). Sử dụng chúng để xếp chồng các thay đổi DOM trong mảng tích lũy và đẩy nó định kỳ vào trình duyệt của khách hàng (giả sử, mỗi 25 ms).

Cũng để bật sự kiện của người dùng, bạn nên theo dõi tài liệu khôn ngoan trên trình duyệt và tương tự tích lũy và đẩy chúng vào máy chủ.

Một thực hiện cách tiếp cận như vậy là jsdom-sync (https://www.npmjs.org/package/jsdom-sync)

Một nhược điểm của máy chủ bên vẽ là sự vắng mặt của kích thước DOM mô hình hộp, bởi vì để có được chiều rộng yếu tố/chiều cao nó nên được thực sự trả lại. Có nghĩa là giải pháp này hầu như không phù hợp cho svg và như vậy ..

Bạn cũng có thể xem xét xem mô hình phạm vi và đồng bộ hóa với phạm vi trình duyệt, nhưng đó là câu chuyện hoàn toàn khác.

Answer 7

i Hy vọng nó vẫn có thể giúp somone, nhưng đây là một gói NPM Tôi đã tạo:

https://www.npmjs.com/package/ng-node-compile

Answer 8

Một cách tiếp cận là để định tuyến các yêu cầu HTML để nodejs máy chủ đang chạy phantomjs. Tôi đã sử dụng một cách tiếp cận dựa trên các phantomj. Kiểm tra nó ra nếu nó giải quyết

http://himangshu.io/blog/optimizing-single-page-application-using-prerender/

Answer 9

Gói này mới https://github.com/a-lucas/angular.js-server cho phép bạn pre-render một ứng dụng kiễu góc và gửi HTML cho khách hàng, sau đó sẽ thực thi mã JS.

Nó hỗ trợ lưu vào bộ đệm cho mỗi url và bạn có thể xác định quy tắc để kích hoạt hiển thị trước URL.

PS: Tôi là người đóng góp chính cho gói này.

Answer 10

Tôi biết đây là một câu trả lời trễ, angular.js-server (https://github.com/a-lucas/angular.js-server) sử dụng phiên bản góc được sửa đổi kích hoạt trạng thái không hoạt động cần thiết để phát hiện khi tất cả sự kiện yêu cầu ajax và $ biên dịch được xử lý.

Tôi đã quản lý trước khi kết xuất ngăn xếp mean.js với hầu như không có sửa đổi nào.