"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: [email protected]. Thanks so much!
"Airframe Admin" - Angular Version Details
- Created: 12 Sep. 2019
- By: Tomasz Owczarczyk
- Email: [email protected]
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.
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.To start the development environment type
npm start
in the console. This will start a development server with auto reloading enabled.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.You can customize the project by editting the
angular.json
file. More information about that can be found here.Some points of interest about the project project structure:
src/app
- the main module for the applicationstyles
- styles added here won't be treated as CSS Modules, so any global classes or library styles should go hereapp/dashboard-core
- Airframe components, services etc.app/routes/routes.ts
- Routes definitionsapp/routes/sidebar.ts
- Entries for the Sidebar Menu
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
.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
]
}
];
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.
- @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