Application Manager Implementation - fgta5js Documentation

Step 1: Embed Script and CSS

To use Application Manager components, first include the production stylesheet and JavaScript modules via the official CDN URLs:

Stylesheet URL:

https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.css

JavaScript Library URL:

https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.js

Step 2: HTML Container

Define a shell layout and container element inside your HTML body where dynamic application modules will be rendered.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Application Manager Shell</title>
  <link rel="stylesheet" href="https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.css">
</head>
<body>

  <main id="appmain">
    <div data-openedmodule></div>
  </main>

  <!-- Load library bundle -->
  <script type="module" src="https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.js"></script>
</body>
</html>

Step 3: Shell Initialization

Initialize the ApplicationManager to register modules, listen to routes, and boot the shell router dynamically.

<script type="module">
	window.addEventListener("load", async () => {
		// Initialize the Application Manager Shell
		const app = new $fgta5.ApplicationManager({
			container: '#appmain',
			title: 'My Shell App'
		});

		// Register child module routes
		app.register('dashboard', '/modules/dashboard.mjs');
		app.register('users', '/modules/users.mjs');

		// Start routing
		app.start();
	});
</script>

Download appmanager.html Example Live Preview

Step 1: Embed Script and CSS

Stylesheet URL:

JavaScript Library URL:

Step 2: HTML Container

Step 3: Shell Initialization

See Also