# "Airframe Admin" (Angular) {% hint style="info" %} **"Airframe Admin" - Angular Version Details** * Live Preview: [http://dashboards.webkom.co/angular/airframe/](http://dashboards.webkom.co/angular/airframe/layouts/sidebar) * Live Docs: * Created: 12 Sep. 2019 * By: Tomasz Owczarczyk * Email: {% endhint %} This Airframe project is based on default [Angular](https://angular.io) project created by the Angular CLI. You can find specific answers and tutorials in the [Angular Documentation](https://angular.io/docs). ### Initial Configuration: You need to have [NodeJs](https://nodejs.org/en/) (>= 10.0.0) installed on your local machine, before attempting to run a dev environment. Also a Code Editor supporting TypeScript is greately recommended. 1. Extract contents of the package to your local machine. 2. Using the Terminal navigate to the extracted contents. 3. Run `npm install`. Make sure you have a file called `.npmrc` in the extracted directory. Those files are typically hidden in Unix based systems. ### Development To start the development environment type `npm start` in the console. This will start a development server with auto reloading enabled. ### Production Run `npm run build` to create a [AOT](https://angular.io/guide/aot-compiler) enabled production build. After the process completes you can deploy the contents from the `/dist` to any HTTP server. ### Project Customization You can customize the project by editting the `angular.json` file. More information about that can be found [here](https://angular.io/guide/workspace-config). ### Project Details Some points of interest about the project project structure: * `src/app` - the main module for the application * `styles` - styles added here won't be treated as CSS Modules, so any global classes or library styles should go here * `app/dashboard-core` - Airframe components, services etc. * `app/routes/routes.ts` - Routes definitions * `app/routes/sidebar.ts` - Entries for the Sidebar Menu #### Routing There are two possibilities of creating routes - static and dynamic. **Static Routes** Static routes are loaded when the Application initially loads. Those components should be placed inside of `src/app/routes` in separate directories. Afterwards the component should be defined in the `routes.ts` file. Example: 1. Create a Page Component by adding two files to `/src/app/routes/example` called `example.component.ts` and `example.component.html`. 2. Fill the files with appropriate content. Check the Angular documentation if you don't know how to do this. 3. Go to `app/routes/routes.ts`, import and attach the component inside like this: ```typescript // ... import { ExampleComponent } from './example/example.component'; // ... export const pages = [ // ... ExampleComponent, // ... ] export const routes: Routes = [ // ... { path: '', component: DefaultLayoutComponent, children: [ // ... { path: 'example', component: ExampleComponent } // ... ] } ] ``` **Dynamic Routes** Dynamic routes are loaded by the Browser only when they are needed. This can shorten the application's initial load time. To add a dynamic route you need to: 1. Create a new module in which the route will be defined. Angular doesn't load dynamically specific routes but whole modules. Keep this in mind. 2. Create a new Page Component inside of the new module. 3. Within the new module add internal routing definition by creating an `example-routing.module.ts` file. Place inside the module routing definition. Example: ```typescript import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { Some } from './components/some/some.component'; export const pages = [ Some ]; const routes: Routes = [ { path: 'some', component: Some }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class WidgetsRoutingModule { } ``` 1. After creating the module with the route inside within the main App module go to `src/app/routes/routes.ts` and add the configuration for the created module: ```typescript export const routes: Routes = [ // ... { path: '', component: DefaultLayoutComponent, children: [ // ... { path: 'example', loadChildren: './example/example.module#ExampleModule' } // ... ] } ] ``` Now the page should be dynamically loaded after browsing to `/example/some`. ### **Custom Layouts** Sometimes you will want different layout definitions for spcific routes. You can configure that directly in the `src/app/routes/routes.ts` file. Let's say you have defined a new Layout Component based on the Default Component called `Alternative`. You can use it for specific pages as follows: ```typescript // Layouts Imports import { DefaultLayoutComponent, AlternativeLayoutComponent } from './../layouts'; // Route definitions export const routes: Routes = [ // Default Layout { path: '', component: DefaultLayoutComponent, children: [ // Routes for Default Layout ] }, //Alternative Layout { path: '', component: AlternativeLayoutComponent, children: [ // Routes for Alternative Layout ] } ]; ``` ### Theming You can set the color scheme for the sidebar and navbar by injecting the `ThemeService` into your Layout Component. When the component is created you can set the `color` and `style` properties in the service. Possible `style` values: * light * dark * color Possible `color` values: * primary * success * info * warning * danger * indigo * purple * pink * yellow **Example:** ```typescript import { ThemeService } from 'dashboard-core/services/theme.service'; @Component({ selector: 'default-layout', templateUrl: './default.component.html', }) export class DefaultLayoutComponent { constructor(themeService: ThemeService) { themeService.style = 'dark'; themeService.color = 'warning'; } } ``` Naturally you are able to change this also in any other service or component if you would like to change the color scheme on the fly. ## Credits and Sources * *@angular/core (+ additional modules) 8.X.X* * *ag-grid-angular 21.X.X* * *bootstrap 4.X.X* * *font-awesome 4.7.0* * *lodash 4.X.X* * *rxjs 6.X.X* --- # 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://webkom.gitbook.io/spin/airframe/airframe-angular/documentation-angular.md?ask= ``` 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.