# "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*