Page Structure

Next Angular

Search…

Next Angular

Introduction

Page Structure

../src/index.html
1
<!doctype html>
2
<html lang="en">
3
    <head>
4
        <title>Next | Welcome To Angular 8+ Bootstrap Design Admin Template </title>
5
        <!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
6
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
7
        <!--[if lt IE 11]>
8
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
9
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
10
        <![endif]-->
11
​
12
        <base href="/">
13
​
14
        <!-- Meta Content-->
15
​
16
        <link rel="icon" type="image/x-icon" href="favicon.ico">
17
​
18
        <!-- font style -->
19
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
20
    </head>
21
    <body>
22
      <app-root></app-root> <!-- app.component.html -->
23
    </body>
24
</html>
Copied!
../src/app/app.component.html
1
<router-outlet>
2
    <!-- loadChildren from app-routing.module.ts with admin.component.html or auth.component.html -->
3
</router-outlet>
Copied!
../src/app/app-routing.module.ts
1
import { AdminComponent } from './theme/layout/admin/admin.component';
2
import { AuthComponent } from './theme/layout/auth/auth.component';
3
​
4
const routes: Routes = [
5
  {
6
    path: '',
7
    component: AdminComponent,
8
    children: [
9
      // load children modules with lazy load routing for header, side nav common structure, like, dashboard, blank page, widget, etc..
10
    ]
11
  },
12
  {
13
    path: '',
14
    component: AuthComponent,
15
    children: [
16
      // load children modules with lazy load routing for without common structure, like login, signup, reset password, lock screen, etc..
17
    ]
18
  }
19
];
Copied!
../src/app/theme/layout/admin/admin.component.html
1
<app-navigation></app-navigation> <!-- for side nav - navigation.component.html -->
2
<app-nav-bar></app-nav-bar> <!-- for header - nav-bar.component.html -->
3
<div class="pcoded-main-container">
4
  <div class="pcoded-wrapper">
5
    <div class="pcoded-content">
6
      <div class="pcoded-inner-content">
7
        <app-breadcrumb></app-breadcrumb> <!-- for common breadcrumb - breadcrumb.component.html -->
8
        <div class="main-body">
9
          <div class="page-wrapper">
10
            <router-outlet>
11
                <!-- page main body - loadChildren as main page body from src/app/demo/... -->
12
            </router-outlet>
13
          </div>
14
        </div>
15
      </div>
16
    </div>
17
  </div>
18
</div>
Copied!
../src/app/theme/layout/auth/auth.component.html
1
<router-outlet>
2
    <!-- loadChildren component for auth.component at app-routing.module.ts for authentication blank pages without nav, header, etc. -->
3
</router-outlet>
Copied!

File Structure

Theme Configuration

Last modified 2yr ago

Copy link

Contents

../src/index.html

../src/app/app.component.html

../src/app/app-routing.module.ts

../src/app/theme/layout/admin/admin.component.html

../src/app/theme/layout/auth/auth.component.html