Working on a web application with Angular that fetches sections from the server.
Each section includes:
- An HTML template.
- CSS rules.
Note: Sections are usually small in size.
Currently exploring the best practices for managing communication between the client and server sides,
Initially considered receiving the HTML and CSS as strings and injecting them into the document like this:
interface section {
html: 'this is html',
css: 'css rules'
};
Then simply inject them into the document:
function addStyleString(str) {
var node = document.createElement('style');
node.innerHTML = str;
document.body.appendChild(node);
}
addStyleString(section.css);
function addHtmlString(str) {
var node = document.createElement('div');
node.innerHTML = str;
document.body.appendChild(node);
}
addHtmlString(section.html);
The issue encountered with this method is how to remove the section's content from the HTML and CSS code when removing it from the template?
Another suggestion is fetching the CSS as a file and then binding the document with the fetched file.
Any recommendations or better approaches?