Page Structure

../src/index.html

index.html
<!doctype html>
<html lang="en">
  <head>
    <title>Berry 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="Berry 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 Angular18 Admin templates download"
    />
    <meta name="author" content="CodedThemes" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <!-- font style -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,500,400,600,700" 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
import { AdminComponent } from './theme/layout/admin/admin.component';
import { GuestComponent } from './theme/layout/auth/Guest.component';
import { AuthGuard } from './theme/shared/_helpers/auth.guard';

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      // load children modules with lazy load routing for header, side nav common structure, like, dashboard, blank page, widget, etc..
    ]
  },
  {
    path: '',
    component: GuestComponent ,
    children: [
      // load children modules with lazy load routing for without common structure, like login, signup, reset password, lock screen, etc..
    ]
  },
  {
    path: '**',
    loadComponent: () => import('./demo/pages/maintenance/maintain-error/maintain-error.component').then((c) => c.MaintainErrorComponent)
  }
];

../src/app/theme/layout/admin/admin.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>

../src/app/theme/layout/guest/guest.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>
PreviousDirectory StructureNextTheme Configuration

Last updated