I’m working on a large angular application and I’m currently using a factory class that builds HTML templates from strings. We don’t have to worry about mobile support for the application and I’m wondering from an architectural standpoint, which method would you rather implement and why: static HTML files that are fetched on request, or a class that builds the templates as strings?
I think this question will be highly opinion-driven, but since I have one, I’ll share: I think it is much uglier to build the templates from strings. It is also objectively more difficult to work with, collaborate, etc.
I would keep the templates in appropriately-typed script tags with id’s in a single HTML file, or if you must, split the template groupings up by purpose or module within your application. But I would highly discourage you from building them as strings.
For instance,
com.acme.app.assets.templates.account-templates.html
<script type="text/x-mustache-template" id="account-login-template">
...
</script>
<script type="text/x-mustache-template" id="account-signup-template">
...
</script>
com.acme.app.assets.templates.shop-templates.html
<script type="text/x-mustache-template" id="shop-home-template">
...
</script>
<script type="text/x-mustache-template" id="shop-cart-template">
...
</script>