# Layouts

Drift Angular has lots of layout that fullfill your requirements to develop a Amaizing App.

There are following layouts which Drift Angular provides:

### Default Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/default-layout/default-layout.module#DefaultLayoutModule'
```

![](/files/-LumPBcbD0v8qfZbkdOS)

### SAAS Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/saas-layout/saas-layout.module#SaasLayoutModule'
```

![](/files/-LumPBce-wL79vtoqY2m)

### Listing Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/listing-layout/listing-layout.module#ListingLayoutModule'
```

![](/files/-LumPBcfgK8z4ruWGyWg)

### Intranet Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/intranet-layout/intranet-layout.module#IntranetLayoutModule'
```

![](/files/-LumPBcVwzeIM5w5fveB)

### Back Office Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/back-office-layout/back-office-layout.module#BackOfficeLayoutModule'
```

![](/files/-LumPBca690ezw8EkabC)

### Back Office Minimal Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/back-office-mini-layout/back-office-mini-layout.module#BackOfficeMiniLayoutModule'
```

![](/files/-LumPBc_pVoTDv-c29dE)

### Modern Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/modern-layout/modern-layout.module#ModernLayoutModule'
```

![](/files/-LumPBcdgyd2U9vJ_Fxo)

### CRM Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/default-layout/crm-layout.module#CrmLayoutModule'
```

![](/files/-LumPBccov7apkWFRv_e)

### Common Layouts

There are two common layouts for authentication and frontend pages.

#### Auth Layout

Auth layout will use to authenticate user. Here user can signup and sign-in.

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/auth-layout/auth.module#AuthModule'
```

and add AuthGuard to other reoutes to stop access without sign-in.

```typescript
canActivate: [AuthGuard]
```

#### Frontend Layout

Frontend layout will use to for frontent pages in Drift Angular.

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/frontend-layout/frontend-layout.module#FrontendLayoutModule'
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift-angular.g-axon.work/structure/layouts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.