🧩 AppML – How to Include External HTML: Modular HTML with appml-include
🧲 Introduction – Why Include External HTML in AppML?
When building web applications, it’s common to reuse layouts, headers, navigation bars, or footers across multiple pages. AppML makes this easy using the appml-include attribute, allowing you to embed external HTML files into your main application view.
🎯 In this tutorial, you’ll learn:
- How
appml-includeworks in AppML - How to load HTML partials (header, footer, sidebar)
- How to modularize your web app with clean file structure
- Real examples with code + explanations
🧱 What Is appml-include?
The appml-include attribute in AppML allows you to insert external HTML content into your current HTML file. It works similarly to server-side includes but is handled client-side by the AppML engine.
<div appml-include="header.html"></div>
📌 This will fetch the content of header.html and inject it into the current page.
🧪 Example 1 – Including a Header
✅ File: header.html
<header>
<h1>My AppML Application</h1>
<nav>
<a href="index.html">Home</a> |
<a href="products.html">Products</a>
</nav>
</header>
✅ File: main.html
<!DOCTYPE html>
<html>
<body>
<div appml-include="header.html"></div>
<h2>Welcome to My App</h2>
<p>This is the home page content.</p>
</body>
</html>
✅ What Happens:
- When
main.htmlloads, AppML finds theappml-includeattribute. - It fetches
header.html. - It replaces the
<div>with the content fromheader.html.
🧪 Example 2 – Modular Page Structure
You can use appml-include in multiple places to organize your application into clean components.
✅ Folder Structure:
project/
│
├── index.html
├── header.html
├── footer.html
├── sidebar.html
└── content.html
✅ index.html
<!DOCTYPE html>
<html>
<body>
<div appml-include="header.html"></div>
<div appml-include="sidebar.html"></div>
<div appml-include="content.html"></div>
<div appml-include="footer.html"></div>
</body>
</html>
📌 AppML loads all four files and assembles them into a single view on the browser.
🧪 Example 3 – Combine with appml-data
You can combine external includes with AppML data binding.
✅ products.html
<!DOCTYPE html>
<html>
<body>
<div appml-include="header.html"></div>
<div appml-data="data/products.json">
<h2>Product Catalog</h2>
<p>{{name}} – ${{price}}</p>
</div>
<div appml-include="footer.html"></div>
</body>
</html>
✔️ This lets you separate structure (includes) and dynamic content (data).
🔍 Tips for Using appml-include
| Tip | Why It Matters |
|---|---|
| Use relative paths | Avoid absolute URLs when files are local |
Keep includes in a /partials/ folder | Helps with code organization |
| Avoid circular includes | Don’t include a file that includes itself |
| Use includes for layout | Ideal for reusable headers, nav, footer |
| Cache include files for speed | Avoid repeated HTTP calls |
📌 Summary – Recap & Key Takeaways
AppML’s appml-include makes it easy to create modular, maintainable web applications by loading reusable HTML components on the fly. This keeps your codebase clean and organized, especially for multi-page layouts.
🔍 Key Takeaways:
- Use
appml-include="file.html"to load external HTML - Ideal for headers, footers, sidebars, reusable blocks
- Works well with
appml-datafor combined logic and layout - Prevents code repetition and improves file management
- Great for scalable and clean web application structure
⚙️ AppML makes modular web design simple, even for non-JavaScript developers.
❓ FAQs – Using appml-include in AppML
❓ Can I include multiple files on one page?
✅ Yes. You can use appml-include on multiple <div>s to load multiple components.
❓ Can I include a file that also contains appml-data?
✅ Yes. Included files can contain data-bound AppML blocks.
❓ Will appml-include work with external URLs?
⚠️ Only if the server allows CORS (Cross-Origin Resource Sharing). It’s safer to use relative/local paths.
❓ Is appml-include a server-side include?
❌ No. It is handled on the client side by the AppML engine via AJAX.
❓ Can I include JavaScript inside an included HTML file?
✅ Yes, but keep in mind scripts might not reinitialize automatically unless re-executed.
Share Now :
