📄Page Structure
../src/index.html
index.html
<!doctype html>
<html lang="en">
<head>
<title>Mantis Angular Dashboard Template</title>
<!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 11]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<base href="/" />
<!-- Meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimal-ui" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="description"
content="Mantis angular 18+ admin template made using bootstrap 5.x.x, ng-bootstrap 17.x.x and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs."
/>
<meta
name="keywords"
content="Admin templates, Bootstrap Admin templates, angular 18+, bootstrap 5.x.x, Dashboard, Dashboard Templates, sass admin templates, html admin templates, Responsive, Bootstrap Admin templates free download, Angular6 Admin templates free download,premium Bootstrap Admin templates,premium Angular-18 Admin templates download"
/>
<meta name="author" content="CodedThemes" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- font style -->
<link rel="stylesheet" />
</head>
<body>
<app-root></app-root>
</body>
</html>../src/app/app.component.html
app.component.html
<router-outlet>
<!-- loadChildren from app-routing.module.ts with admin.component.html or auth.component.html -->
</router-outlet>../src/app/app-routing.module.ts
app-routing.module.ts
// project import
import { AdminLayout } from './theme/layout/admin-layout/admin-layout.component';
import { GuestLayouts } from './theme/layout/guest-layout/guest-layout.component';
import { AuthGuard } from './theme/shared/components/_helpers/auth.guard';
import { SimpleLayouts } from './theme/layout/simple-layout/simple-layout.component';
const routes: Routes = [
{
path: '',
component: GuestLayouts,
children: [
{
path: '',
redirectTo: '',
pathMatch: 'full'
},
// load children modules with lazy load routing without a common structure, like login, signup, reset password, lock screen, etc..
]
},
{
path: '',
component: AdminLayout,
canActivate: [AuthGuard],
children: [
// load children modules with lazy load routing for header, side nav common structure, like, dashboard, blank page, widget, etc..
]
},
{
path: '',
component: SimpleLayouts,
children: [
// load children modules with lazy load routing without a common structure, like component page, contact-us etc..
]
},
{
path: '**',
loadComponent: () => import('./demo/pages/maintenance/error/error.component').then((c) => c.ErrorComponent)
}
];../src/app/theme/layout/admin-layout/admin-layout.component.html
admin.component.html
<app-navigation></app-navigation> <!-- for side nav - navigation.component.html -->
<app-nav-bar></app-nav-bar> <!-- for header - nav-bar.component.html -->
<div class="pc-container">
<div class="coded-wrapper">
<div class="coded-content">
<div class="coded-inner-content">
<app-breadcrumb></app-breadcrumb> <!-- for common breadcrumb - breadcrumb.component.html -->
<div class="main-body">
<div class="page-wrapper">
<router-outlet>
<!-- page main body - loadChildren as main page body from src/app/demo/... -->
</router-outlet>
</div>
</div>
</div>
</div>
</div>
<div class="pc-menu-overlay" (click)="closeMenu()" (keydown)="handleKeyDown($event)" tabindex="0"></div>
</div>
<footer class="pc-footer"><footer> <!-- for common footer-->
<app-configuration></app-configuration> <!-- for common configuration-->../src/app/theme/layout/guest-layout/guest-layout.component.html
guest.component.html
<router-outlet>
<!-- loadChildren component for guest.component at app-routing.module.ts for authentication blank pages without nav, header, etc. -->
</router-outlet>../src/app/theme/layout/simple-layout/simple-layout.component.html
simple.component.html
<nav class="navbar navbar-expand-md navbar-dark">
<!-- for header -->
</nav>
<router-outlet>
<!-- loadChildren component for simple.component at app-routing.module.ts for header with layout -->
</router-outlet>
Last updated