You may call it reinventing the wheel, however, I'd like a senior architect level to answer this, especially who knows the underpinnings of angular js especially or can do himself in plain vanilla JavaScript. Although Angular is more sophisticated but I want to get it in the simplest, efficient and usable form without any memory leaks.
There's a major div with a larger scope in a page, I'd call it a component of a SPA page (of course containing several other components too), loads different templates at runtime into the parent div, and plugs in some code that acts around that loaded template. For the sake I'd take two templates and two JS classes.
IMO and in general a component is like a state machine, that goes through different visual states as user interacts with it, each state has some visible tags, buttons and associated event handlers, javascript code, I could load all html templates and associated JS at page load but it's more efficient to load html and plug JS on need basis.
HTML SPA
<ul>
<li><a href='#/products'>Products</a></li>
<li><a href='#/customers'>Customers</a></li>
</ul>
<div id='main'></div>
templates/products.html
<a href='#/products/buy/1'>Product 1</a>
<a href='#/products/buy/2'>Product 2</a>
templates/customers.html
<a href='#/customers/contact/1'>Customer 1</a>
<a href='#/customers/contact/2'>Customer 2</a>
js/products.js
function Product() {
window.addEventListener("hashchange", function(){
// check for #buy/1, #buy/2
});
}
Product.prototype.load = function() {
// load templates/products.html into #main
}
js/customers.js
function Customer() {
window.addEventListener("hashchange", function(){
// check for #contact/1, #contact/2
});
}
Customer.prototype.load = function() {
// populate customer.html into #main
}
some JS code that monitors the hash change event on the browser, and will load corresponding templates/products.html
and templates/users.html
main.js (checking hash change and instantiating classes)
var product = new Product()
var customer = new Customer()
window.addEventListener("hashchange", function(){
// if #/products
product.load();
// if #/customers
customer.load()
}, false);
Question:
I'm trying to get it "right", follow the industry way, simulate ngRoute or uiRouter (not completely, but to an extent) and looking forward for suggestions and improvements and most importantly for corrections.
Also do I've a memory leak problem here?