Mẫu để sắp xếp và tải CSS trong Angular.js

Question

Trong ứng dụng Angular của tôi, tôi muốn tải các tệp css theo cách mô-đun - mỗi mô-đun có tệp css riêng của nó. Bằng cách này tôi có thể thêm, loại bỏ hoặc di chuyển các mô-đun dễ dàng.

Cách tốt nhất mà tôi tìm thấy cho đến nay để làm điều đó là bằng cách tạo ra một dịch vụ:

angular.module('cssLoadingService', []).factory("CssLoadingService", function() { 
    return { 
    loadCss: function (url) { 
     if (document.createStyleSheet) { //IE 
     document.createStyleSheet(url); 
     } else { 
     var link = document.createElement("link"); 
     link.type = "text/css"; 
     link.rel = "stylesheet"; 
     link.href = url; 
     document.getElementsByTagName("head")[0].appendChild(link); 
     } 
    } 
    }; 
}); 

Mỗi bộ điều khiển tải nó template css. Mặc dù tôi tiêm đường dẫn (bởi một dịch vụ khác), nó vẫn cảm thấy như tôi đang phá vỡ sự tách biệt giữa logic và khung nhìn.

Có cách nào khác thanh lịch (không bao gồm đóng gói tệp css vào một tệp lớn) không?

Answer 1

Nếu mục tiêu của bạn là trình duyệt HTML5 và giả định rằng bạn có chế độ xem cho mỗi mô-đun, bạn có thể sử dụng scoped stylesheets trong chế độ xem của mình để thực hiện việc này. Nếu bạn muốn sử dụng tệp css, bạn có thể sử dụng cú pháp @import để tải tệp css vào thẻ <style>. Dưới đây là HTML của chế độ xem:

<div> 
    <style scoped>@import url('main.css')</style> 
    <h1>This is Main and should be Gray</h1> 
</div> 

Kiểm tra this plunker. Nó làm việc cho tôi trong phiên bản mới nhất của Chrome (27.x) và Firefox (21.x) trong Mac OS X.

Xin lưu ý rằng nhiều người khuyên bạn nên sử dụng @import vì lý do hiệu suất. Trên thực tế, bạn có thể thấy rằng có sự chậm trễ nhỏ giữa việc tải trang và kiểu đang được áp dụng.