Tích hợp AngularJS và Bootstrap trong ứng dụng web cũ

Question

Chúng tôi có một ứng dụng kế thừa dựa trên EXT-JS. Chúng tôi muốn thêm mô-đun mới vào ứng dụng hiện có, sử dụng AngularJS và bootrap. Vấn đề của tôi là CSS của bootstrap đang xung đột với CSS của mã kế thừa. Mô-đun mới, được viết bằng cách sử dụng bootstrap và AngularJS, được bao quanh bởi mã kế thừa, vì vậy tôi cần nhập CSS tồn tại và CSS mới trên cùng một trang.

Tôi nghĩ đến 2 giải pháp khả thi:

1. Có một tiền tố để của bootstrap tập tin css và áp dụng nó chỉ để phần bên trong của nội dung trang (AngularJS, mô-đun mới). Vấn đề là cửa sổ bật lên và thành phần bên thứ ba-bootstrap thứ 3 vẫn bị gián đoạn bởi CSS cũ.
2. Có toàn bộ trang bên trong của tôi (mô-đun AngularJS) trong IFrame riêng biệt, được nhúng vào trang chứa CSS cũ.

Dường như việc sử dụng IFrame giải quyết được vấn đề của tôi, nhưng tôi biết rằng việc sử dụng IFrame không được khuyến khích và tôi đang tìm giải pháp tối ưu cho vấn đề của mình.

1. Bạn có nghĩ rằng IFrame là phương pháp hay trong trường hợp này không?
2. Bạn có giải pháp đã được chứng minh khác không?

Answer 1

Lập kế hoạch sử dụng iframe để tránh xung đột css - không phải là ý tưởng hay. Mặc dù iframe có thể có ích trong một số trường hợp chủ yếu là việc sử dụng nó đã bị lạm dụng chỉ để dễ dàng giải quyết một số vấn đề.

Bạn có nghĩ rằng IFrame là phương pháp hay trong trường hợp này không?

No. Vấn đề duy nhất ở đây là các kiểu css xung đột giữa bs và extjs. Và việc lên kế hoạch sử dụng Iframe để giải quyết vấn đề này thực sự là một lựa chọn tồi. Khi bạn đang sử dụng angularjs tôi cảm thấy sử dụng iframe có thể hạn chế việc sử dụng nó ở một mức độ nào đó. Ví dụ, nhúng nó vào iframe, tôi nghĩ rằng các nút điều hướng và chuyển tiếp sẽ không hoạt động như mong đợi, trong trường hợp bạn đang định sử dụng định tuyến angularjs. Và khi sử dụng Iframe, sẽ rất khó để gỡ lỗi các sự cố giao diện người dùng.

Bạn có giải pháp đã được chứng minh khác không?

Tôi chưa có giải pháp đã được chứng minh nhưng bạn đã đề cập đến một ý tưởng có thể hoạt động dễ dàng. Bootstrap có thể được tùy chỉnh ở mọi mức độ bạn muốn sử dụng ít biến hơn. Ví dụ cho vấn đề của bạn chỉ cần không gian tên kiểu bootstrap sử dụng ít hơn.

.bs { 
    @import "less/bootstrap.less"; 
} 

Và đừng đi vào suy nghĩ sử dụng ít/sass để biên dịch css thì phức tạp. Một khi bạn đã quen với nó, điều này sẽ làm cho điều này sẽ làm cho FE phát triển dễ dàng hơn nhiều so với trước đây.