www.webkom.coTwitter

"Airframe Admin" (Angular)

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via: tomasz.owczarczyk@me.com. Thanks so much!

"Airframe Admin" - Angular Version Details

This Airframe project is based on default Angular project created by the Angular CLI. You can find specific answers and tutorials in the Angular Documentation.

Initial Configuration:

You need to have NodeJs (>= 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 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.

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:

// ...
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:

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:

    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:

// 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:

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

Previous"Airframe Admin" (Next.js)Next"Airframe Admin" (MVC.Net)

Last updated