🧩 AppML – Including HTML Templates: Reuse UI Components with Ease
🧲 Introduction – Why Use HTML Includes in AppML?
Large web applications often have repeated UI elements—headers, footers, menus, or forms. Instead of duplicating HTML across files, AppML allows you to include external HTML templates using the appml-include attribute. This improves maintainability, reusability, and clean architecture—without requiring any JavaScript libraries.
🎯 In this article, you’ll learn:
- What
appml-includedoes and how it works - How to include reusable UI components
- Nested includes and their limitations
- Best practices for templating in AppML
🔍 What Is appml-include?
The appml-include attribute in AppML allows you to inject external HTML files into a parent HTML page.
✅ Basic Syntax
<div appml-include="header.html"></div>
📥 This line tells AppML to fetch the contents of header.html and inject them into the <div>.
📁 Real Example – Common Layout Includes
Let’s build a layout with reusable pieces:
✅ header.html
<header>
<h1>My AppML App</h1>
</header>
✅ footer.html
<footer>
<p>© 2025 MyCompany</p>
</footer>
✅ index.html
<body>
<div appml-include="header.html"></div>
<main>
<p>Welcome to our AppML-powered site!</p>
</main>
<div appml-include="footer.html"></div>
</body>
🎉 Result: AppML dynamically pulls in header.html and footer.html.
🧪 Include with AppML Logic Inside
You can include components that use appml-data, appml-controller, or appml-model.
✅ user-list.html
<div appml-data="data/users.json">
<p>{{name}} – {{email}}</p>
</div>
✅ dashboard.html
<div appml-include="user-list.html"></div>
AppML processes all AppML-specific attributes even inside includes.
📦 Nested Includes: Supported with Caution
You can nest includes inside other included files:
<!-- dashboard.html -->
<div appml-include="layout.html"></div>
<!-- layout.html -->
<div appml-include="navbar.html"></div>
<main> ... </main>
⚠️ However, deep nesting may lead to performance or debugging issues. Limit to 2–3 levels.
🛠️ Use Case: Reusable Form Components
✅ input-text.html
<label>{{label}}</label>
<input name="{{field}}" type="text">
You can dynamically load this component multiple times with different bindings:
<div appml-include="input-text.html" appml-data="data/name.json"></div>
<div appml-include="input-text.html" appml-data="data/email.json"></div>
✅ Great for standardized input designs.
💡 Best Practices for Using appml-include
| ✅ Tip | 💬 Reason |
|---|---|
Store includes in a /components/ folder | Keeps your project organized |
| Use includes for headers, footers, navs | Avoid HTML repetition |
| Limit nesting to 2–3 levels | Prevent debugging complexity |
| Avoid large file sizes in includes | Reduces load time |
| Always test with and without JavaScript | AppML doesn’t need JS, but your other scripts might |
📌 Summary – Recap & Key Takeaways
The appml-include attribute empowers developers to reuse components and maintain consistency across pages. It fits perfectly into AppML’s low-code, component-driven philosophy.
🔍 Key Takeaways:
- Use
appml-include="file.html"to reuse HTML templates - Includes support nested
appml-*logic like data, models, and controllers - Great for headers, navbars, forms, and reusable UI parts
- Organize includes into folders for scalability
- Minimize deep nesting and large includes for performance
⚙️ With includes, AppML becomes a modular, maintainable framework—even without JavaScript!
❓ FAQs – Including HTML Templates in AppML
❓ Can I use includes with dynamic data in AppML?
✅ Yes. Included files can have appml-data, appml-model, or any other AppML logic.
❓ Are nested includes supported?
✅ Yes, but limit nesting depth to avoid complexity and longer load times.
❓ Can I include full HTML documents (with <html> tags)?
❌ No. Includes should only contain fragments like <div>, <section>, etc., not full documents.
❓ How does AppML handle missing include files?
⚠️ It silently fails. Use browser dev tools (F12) to check for 404 errors and test paths.
❓ Is appml-include processed after page load?
✅ Yes. It runs during AppML’s initialization, before data is rendered.
Share Now :
