I am exploring ways to load CSS files in a modular manner within my Angular application. My goal is to have each module with its own dedicated CSS file for easy management - allowing me to add, remove, or move modules effortlessly.
After some research, I have found that creating a service is the most effective approach:
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);
}
}
};
});
Currently, each controller handles loading its own template CSS. While I inject the path using another service, it still feels like there is a blurred line between the logic and view separation.
Are there any other elegant solutions available that do not involve consolidating all CSS files into one large file?