mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-05 13:20:16 +01:00
feat(angular-cli): integrate angular-cli (#989)
This commit is contained in:
hryb
Alexander Zhukov
parent
7b8a6f4e88
commit
523f44b746
138 changed files with 4507 additions and 7170 deletions
|
|
@ -1,50 +0,0 @@
|
|||
---
|
||||
title: Getting Started
|
||||
author: vl
|
||||
sort: 999
|
||||
group: Quick Start
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
## What is ng2-admin?
|
||||
|
||||
ng2-admin is a front-end Admin Dashboard template based on Angular 2, Bootstrap 4 and Webpack. That means all the
|
||||
data you can see on graphs, charts and tables is mocked in Javascript so you can use the
|
||||
backend of your choice with no limitations.
|
||||
|
||||
## How can it help me?
|
||||
|
||||
We believe that at the moment a lot of business applications have administration/management interfaces inside of them. Sometimes it's not that obvious, but a lot of web applications have dashboards with panels, charts analytics, etc.
|
||||
|
||||
ng2-admin aims to bootstrap the development of your product and provide an
|
||||
ecosystem for building production-ready application or prototypes.
|
||||
|
||||
Frameworks like Bootstrap provide a number of components, but usually it's not enough to
|
||||
build a real-world app. This template comes with lots of popular UI components with a unified color scheme,
|
||||
plus it is based on a modern Angular 2 framework and has a flexible component based structure.
|
||||
|
||||
You can also use ng2-admin for the purpose of learning Angular 2.
|
||||
|
||||
## List of features
|
||||
|
||||
* Angular 2
|
||||
* Webpack 2
|
||||
* Bootstrap 4 CSS Framework
|
||||
* SASS
|
||||
* [Smart Table](http://akveo.com/ng2-admin/#/pages/tables/smarttables)
|
||||
* [Forms](http://akveo.com/ng2-admin/#/pages/forms/inputs)
|
||||
* [Editors](http://akveo.com/ng2-admin/#/pages/editors/ckeditor)
|
||||
* [Charts (amChart, Chartist, Chart.js, Morris)](http://akveo.com/ng2-admin/#/pages/charts/chartist-js)
|
||||
* [Maps (Google, Leaflet, amMap)](http://akveo.com/ng2-admin/#/pages/maps/googlemaps)
|
||||
* Responsive layout
|
||||
* High resolution
|
||||
* and many more!
|
||||
|
||||
## I want to start developing with ng2-admin
|
||||
|
||||
Welcome aboard!
|
||||
|
||||
You can start with the [Installation Guidelines](/ng2-admin/articles/002-installation-guidelines/).
|
||||
There we describe how you can download and run the template on your local machine.
|
||||
|
||||
Good luck and have fun!
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
---
|
||||
title: Installation Guidelines
|
||||
author: vl
|
||||
sort: 500
|
||||
group: Quick Start
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Although ng2-admin can be run without any development experience, it would be much easier if you already have some.
|
||||
The following instructions allow you to run a local copy on your machine.
|
||||
|
||||
## Install tools
|
||||
|
||||
If you don't have any of these tools installed already, you will need to:
|
||||
* Download and install [git](https://git-scm.com/)
|
||||
* Download and install nodejs [https://nodejs.org](https://nodejs.org)
|
||||
|
||||
**Note**: Make sure you have Node version >= 4.0 and NPM >= 3
|
||||
## Clone repository and install dependencies
|
||||
|
||||
You will need to clone the source code of ng2-admin GitHub repository:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/akveo/ng2-admin.git
|
||||
```
|
||||
After the repository is cloned, go inside of the repository directory and install dependencies:
|
||||
|
||||
```bash
|
||||
cd ng2-admin
|
||||
npm install
|
||||
```
|
||||
This will setup a working copy of ng2-admin on your local machine.
|
||||
|
||||
## Running local copy
|
||||
|
||||
To run a local copy in development mode, execute:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
Go to http://0.0.0.0:3000 or http://localhost:3000 in your browser.
|
||||
|
||||
|
||||
To run the local copy in production mode and build the sources, execute:
|
||||
|
||||
```bash
|
||||
npm run prebuild:prod && npm run build:prod && npm run server:prod
|
||||
```
|
||||
|
||||
This will clear up your dist folder (where release files are located), generate a release build and start the
|
||||
built-in server.
|
||||
Now you can copy the sources from the `dist` folder and use it with any backend framework or
|
||||
simply put it under a web server.
|
||||
|
||||
For addition information about creating a build, please check out [Angular2 Webpack Starter documentation](https://github.com/AngularClass/angular2-webpack-starter)
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
---
|
||||
title: Changing Color Scheme
|
||||
author: vl
|
||||
sort: 900
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
We tried to make the process of color scheme customization as easy as possible.
|
||||
|
||||
By default ng2-admin has three built-in color profiles: ng2 (default blue sheme), mint and blur.
|
||||
This article will help you to create your own color profile.
|
||||
Let's say you want to make ng2-admin dark theme.
|
||||
|
||||
First we advise you to take some existing colorscheme file as a starting point.
|
||||
For light themes we suggest taking `src/app/theme/sass/conf/colorScheme/_mint.scss` and for
|
||||
dark `src/app/theme/sass/conf/colorScheme/_blue.scss`.
|
||||
As we want a dark theme, we're taking `blue`.
|
||||
|
||||
1) Copy `src/app/theme/sass/conf/colorScheme/_blue.scss` to `src/app/theme/sass/conf/colorScheme/_dark.scss`:
|
||||
<br><br>
|
||||
|
||||
2) Include your colorscheme file in `src/app/theme/sass/conf/conf.scss`.
|
||||
|
||||
To do this, replace
|
||||
```scss
|
||||
@import 'colorSchemes/ng2';
|
||||
```
|
||||
|
||||
with
|
||||
|
||||
```scss
|
||||
@import 'colorSchemes/dark';
|
||||
```
|
||||
<br><br>
|
||||
|
||||
3) Change the color scheme enabled:
|
||||
|
||||
Open `src/app/theme/theme.config.ts`.
|
||||
Uncomment the following line
|
||||
|
||||
```javascript
|
||||
//this._baConfig.changeTheme({name: 'my-theme'});
|
||||
```
|
||||
|
||||
and put your theme name, in our case it is `dark`
|
||||
|
||||
```javascript
|
||||
this._baConfig.changeTheme({name: 'dark'});
|
||||
```
|
||||
Beside notifying the system which scheme is currently enabled, this also puts a css class to a main element
|
||||
of the page. Thus you can freely create theme-specific css selectors in your code without breakking other themes' styles.
|
||||
|
||||
For example like this:
|
||||
```scss
|
||||
. dark .card-body {
|
||||
background-color: white;
|
||||
}
|
||||
```
|
||||
<br><br>
|
||||
|
||||
4) Change the colors:
|
||||
|
||||
Now you can start changing the colors.
|
||||
For example, after playing a bit with different colors, we changed the 2 first main variables in `_dark.scss` file:
|
||||
```sass
|
||||
$body-bg: #636363;
|
||||
$bootstrap-panel-bg: rgba(#000000, 0.2);
|
||||
|
||||
```
|
||||
|
||||
After this is done, you need to setup javascript to use the **same colors**. These colors
|
||||
are used for javascript charts and other components (maps, etc);
|
||||
Let's completely change the JS colors to a new set.
|
||||
To do this, add the following code to the configuration block inside `src/app/theme/theme.config.ts`:
|
||||
```javascript
|
||||
let colorScheme = {
|
||||
primary: '#209e91',
|
||||
info: '#2dacd1',
|
||||
success: '#90b900',
|
||||
warning: '#dfb81c',
|
||||
danger: '#e85656',
|
||||
};
|
||||
this._baConfig.changeColors({
|
||||
default: '#4e4e55',
|
||||
defaultText: '#e2e2e2',
|
||||
border: '#dddddd',
|
||||
borderDark: '#aaaaaa',
|
||||
|
||||
primary: colorScheme.primary,
|
||||
info: colorScheme.info,
|
||||
success: colorScheme.success,
|
||||
warning: colorScheme.warning,
|
||||
danger: colorScheme.danger,
|
||||
|
||||
primaryLight: colorHelper.tint(colorScheme.primary, 30),
|
||||
infoLight: colorHelper.tint(colorScheme.info, 30),
|
||||
successLight: colorHelper.tint(colorScheme.success, 30),
|
||||
warningLight: colorHelper.tint(colorScheme.warning, 30),
|
||||
dangerLight: colorHelper.tint(colorScheme.danger, 30),
|
||||
|
||||
primaryDark: colorHelper.shade(colorScheme.primary, 15),
|
||||
infoDark: colorHelper.shade(colorScheme.info, 15),
|
||||
successDark: colorHelper.shade(colorScheme.success, 15),
|
||||
warningDark: colorHelper.shade(colorScheme.warning, 15),
|
||||
dangerDark: colorHelper.shade(colorScheme.danger, 15),
|
||||
|
||||
dashboard: {
|
||||
blueStone: '#005562',
|
||||
surfieGreen: '#0e8174',
|
||||
silverTree: '#6eba8c',
|
||||
gossip: '#b9f2a1',
|
||||
white: '#10c4b5',
|
||||
},
|
||||
});
|
||||
```
|
||||
Here we defined a list of main colors `colorScheme` and then made light and dark versions of those using `colorHelper` methods.
|
||||
We also defined a couple of custom colors for dashboard charts.
|
||||
|
||||
|
||||
That's basically it! Right now your admin application should look like this:
|
||||
|
||||
|
||||
|
||||
For further reference, please look in
|
||||
- Colorscheme scss file (`src/app/theme/sass/conf/colorScheme/_ng2.scss`, `src/app/theme/sass/conf/colorScheme/_mint.scss` and `src/app/theme/sass/conf/colorScheme/_blur.scss`)
|
||||
- `src/app/theme/theme.configProvider.js` to understand which javascript colors can be changed
|
||||
- If you want to know how to change the theme to blur, read the [following article](/ng2-admin/articles/014-switch-to-blur-theme/)
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 284 KiB |
|
|
@ -1,76 +0,0 @@
|
|||
---
|
||||
title: Project Structure
|
||||
author: vl
|
||||
sort: 800
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
The project structure is originally based on [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter#file-structure). We made some changes we thought would be better in our particular case.
|
||||
|
||||
The directory structure of this template is as follows:
|
||||
|
||||
```
|
||||
ng2-admin/
|
||||
├──config/ * webpack build configuration
|
||||
│ ├──head-config.common.js * configuration for head elements in index.html
|
||||
│ │
|
||||
│ ├──helpers.js * helper functions for our configuration files
|
||||
│ │
|
||||
│ ├──webpack.dev.js * development webpack config
|
||||
│ │
|
||||
│ ├──webpack.prod.js * production webpack config
|
||||
│ │
|
||||
│ ├──webpack.test.js * testing webpack config
|
||||
│ │
|
||||
│ ├──electron/ * electron webpack config
|
||||
│ │
|
||||
│ └──html-elements-plugin/ * html elements plugin
|
||||
│
|
||||
├──src/ * source files that will be compiled to javascript
|
||||
│ ├──custom-typings.d.ts * custom typings for third-party modules
|
||||
│ │
|
||||
│ ├──desktop.ts * electron window initialization
|
||||
│ │
|
||||
│ ├──index.html * application layout
|
||||
│ │
|
||||
│ ├──main.browser.ts * entry file for our browser environment
|
||||
│ │
|
||||
│ ├──package.json * electrons package.json
|
||||
│ │
|
||||
│ ├──polyfills.browser.ts * polyfills file
|
||||
│ │
|
||||
│ ├──vendor.browser.ts * vendors file
|
||||
│ │
|
||||
│ ├──app/ * application code - our working directory
|
||||
│ │ │
|
||||
│ │ ├──app.component.ts * main application component
|
||||
│ │ │
|
||||
│ │ │
|
||||
│ │ ├──app.menu.ts * menu pages routes
|
||||
│ │ │
|
||||
│ │ ├──app.module.ts * main application module
|
||||
│ │ │
|
||||
│ │ ├──app.routes.ts * application routes
|
||||
│ │ │
|
||||
│ │ ├──global.state.ts * global application state for data exchange between components
|
||||
│ │ │
|
||||
│ │ ├──environment.ts * environment provider
|
||||
│ │ │
|
||||
│ │ ├──app.scss * application styles
|
||||
│ │ │
|
||||
│ │ ├──pages/ * application pages components, place where you can create pages and fill them with components
|
||||
│ │ │
|
||||
│ │ └──theme/ * template global components/directives/pipes and styles
|
||||
│ │
|
||||
│ └──assets/ * static assets are served here
|
||||
│
|
||||
│
|
||||
├──tslint.json * typescript lint config
|
||||
├──typedoc.json * typescript documentation generator
|
||||
├──tsconfig.json * config that webpack uses for typescript
|
||||
└──package.json * what npm uses to manage it's dependencies
|
||||
```
|
||||
In our template we tried to separate the theme layer and presentation layer. We believe most of other templates
|
||||
have them combined. That's why when you start developing using them, it gets very hard for you to remove things you
|
||||
don't need.
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
---
|
||||
title: Create New Page
|
||||
author: vl
|
||||
sort: 300
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
ng2-admin uses [Angular 2 Component Router](https://angular.io/docs/ts/latest/guide/router.html) for navigation.
|
||||
|
||||
We strongly recommend to follow this page structure in your application.
|
||||
If it does not fit your needs please create a GitHub issue and tell us why. We would be glad to discuss.
|
||||
|
||||
|
||||
Basically any page is just a common Angular 2 Component with a route defined for it.
|
||||
|
||||
## Let's create a blank page in 6 easy steps
|
||||
|
||||
1) Create a new directory for our new page inside of `src/app/pages`. We can call the directory `new`.
|
||||
<br><br>
|
||||
|
||||
2) Then let's create a blank angular 2 component for our page called 'new.component.ts' inside of `src/app/pages/new`:
|
||||
|
||||
```javascript
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'new',
|
||||
template: `<strong>My page content here</strong>`
|
||||
})
|
||||
export class NewComponent {
|
||||
constructor() {}
|
||||
}
|
||||
```
|
||||
This will create a simple Angular 2 component. For more detail please check out [official Angular 2 documentation](https://angular.io/docs/ts/latest/guide/displaying-data.html).
|
||||
<br><br>
|
||||
|
||||
3) After that we should create our component routing called `new.routing.ts` in the `new` directory.
|
||||
|
||||
```javascript
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { NewComponent } from './new.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: NewComponent
|
||||
}
|
||||
];
|
||||
|
||||
export const routing = RouterModule.forChild(routes);
|
||||
```
|
||||
<br>
|
||||
|
||||
4) And now we should create `new.module.ts` in `src/app/pages/new` directory and import `new.component.ts` and `new.routing.ts` in it.
|
||||
|
||||
```javascript
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NewComponent } from './new.component';
|
||||
import { routing } from './new.routing';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
routing
|
||||
],
|
||||
declarations: [
|
||||
NewComponent
|
||||
]
|
||||
})
|
||||
export class NewModule {}
|
||||
```
|
||||
<br>
|
||||
|
||||
5) The penultimate thing we need to do is to declare a route in `src/app/pages/pages.menu.ts`.
|
||||
Typically all pages are children of the `/pages` route and defined under the `children` property of the root `pages` route like this:
|
||||
|
||||
```javascript
|
||||
export const PAGES_MENU = [
|
||||
{
|
||||
path: 'pages',
|
||||
children: [
|
||||
{
|
||||
path: 'new', // path for our page
|
||||
data: { // custom menu declaration
|
||||
menu: {
|
||||
title: 'New Page', // menu title
|
||||
icon: 'ion-android-home', // menu icon
|
||||
pathMatch: 'prefix', // use it if item children not displayed in menu
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Dashboard',
|
||||
icon: 'ion-android-home',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
If you’d like to highlight menu item when current URL path partially match the menu item
|
||||
path - use pathMatch: ‘prefix’. In this case if the menu item has no children in the menu and
|
||||
you navigated to some child route - the item will be highlighted.
|
||||
<br><br>
|
||||
|
||||
6) And in the end let's import our component in `src/app/pages/pages.routing.ts` like this:
|
||||
|
||||
```javascript
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: 'pages',
|
||||
component: Pages,
|
||||
children: [
|
||||
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
|
||||
{ path: 'dashboard', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule' },
|
||||
{ path: 'new', loadChildren: 'app/pages/new/new.module#NewModule' }
|
||||
]
|
||||
}
|
||||
];
|
||||
```
|
||||
<br>
|
||||
|
||||
And that's it! Now your page is available by the following this url [http://localhost:3000/#/pages/new](http://localhost:3000/#/pages/new).
|
||||
Plus, your page is registered inside the sidebar menu. If you don't want to have a link
|
||||
in the menu - just remove the `menu` declaration from the `pages.menu.ts` file.
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
---
|
||||
title: Enabling blur theme
|
||||
author: kd
|
||||
sort: 850
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
If you want to switch theme to the blur, you need to follow 3 simple steps:
|
||||
|
||||
1) Blur color scheme needs some javascript to calculate initial background offsets for panels.
|
||||
That's why we need to tell the system that we want to use blur theme by specifying this in `src/app/theme/theme.config.ts`:
|
||||
```javascript
|
||||
this._baConfig.changeTheme({name: 'blur'});
|
||||
```
|
||||
<br><br>
|
||||
|
||||
2) Also you need to change some colors.
|
||||
For our blur theme we use the following configuration in `src/app/theme/theme.config.ts`:
|
||||
```javascript
|
||||
let colorScheme = {
|
||||
primary: '#209e91',
|
||||
info: '#2dacd1',
|
||||
success: '#90b900',
|
||||
warning: '#dfb81c',
|
||||
danger: '#e85656',
|
||||
};
|
||||
this._baConfig.changeColors({
|
||||
default: '#4e4e55',
|
||||
defaultText: '#e2e2e2',
|
||||
border: '#dddddd',
|
||||
borderDark: '#aaaaaa',
|
||||
|
||||
primary: colorScheme.primary,
|
||||
info: colorScheme.info,
|
||||
success: colorScheme.success,
|
||||
warning: colorScheme.warning,
|
||||
danger: colorScheme.danger,
|
||||
|
||||
primaryLight: colorHelper.tint(colorScheme.primary, 30),
|
||||
infoLight: colorHelper.tint(colorScheme.info, 30),
|
||||
successLight: colorHelper.tint(colorScheme.success, 30),
|
||||
warningLight: colorHelper.tint(colorScheme.warning, 30),
|
||||
dangerLight: colorHelper.tint(colorScheme.danger, 30),
|
||||
|
||||
primaryDark: colorHelper.shade(colorScheme.primary, 15),
|
||||
infoDark: colorHelper.shade(colorScheme.info, 15),
|
||||
successDark: colorHelper.shade(colorScheme.success, 15),
|
||||
warningDark: colorHelper.shade(colorScheme.warning, 15),
|
||||
dangerDark: colorHelper.shade(colorScheme.danger, 15),
|
||||
|
||||
dashboard: {
|
||||
blueStone: '#005562',
|
||||
surfieGreen: '#0e8174',
|
||||
silverTree: '#6eba8c',
|
||||
gossip: '#b9f2a1',
|
||||
white: '#10c4b5',
|
||||
},
|
||||
});
|
||||
```
|
||||
<br><br>
|
||||
|
||||
3) CSS should also be recompiled.
|
||||
Before running build command, switch to *blur* color profile.
|
||||
To do so replace theme in `src/app/theme/sass/conf/conf.scss`:
|
||||
|
||||
```scss
|
||||
@import 'colorSchemes/ng2';
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```scss
|
||||
@import 'colorSchemes/blur';
|
||||
```
|
||||
|
||||
Additionaly, if you would like to use some different background, replace the following images:
|
||||
|
||||
- `src/assets/img/blur-bg.jpg` (main background image)
|
||||
- `src/assets/img/blur-bg-blurred.jpg` (blurred background image used on panels)
|
||||
|
||||
We suggest using 10px Gaussian blur to blur an original image.
|
||||
|
||||
<br><br>
|
||||
That's it! You have successfully blurred your theme! Run `npm start` and check it out.
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
---
|
||||
title: Sidebar
|
||||
author: vl
|
||||
sort: 900
|
||||
group: Components
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
The sidebar provides a convenient way to navigate the application.
|
||||
Only one sidebar is supported per angular application.
|
||||
This means that the sidebar is basically a singleton object.
|
||||
|
||||
The Sidebar can be added to the page using the `BaSidebar` component:
|
||||
```html
|
||||
<ba-sidebar></ba-sidebar>
|
||||
```
|
||||
|
||||
The sidebar contains a `<ba-menu></ba-menu>` component which defines and renders the application menu based on routes provided. Generally the `ba-menu` component can be used separately from `ba-sidebar`.
|
||||
All menu items information is defined inside the `data` property of a route.
|
||||
|
||||
## Menu Configuration
|
||||
|
||||
All menu items are located inside the `src/app/app.routes.ts` file. Each route item can have a `menu` property under `data` defining a menu item:
|
||||
|
||||
```javascript
|
||||
{
|
||||
// first, router configuration
|
||||
path: 'dashboard',
|
||||
component: Dashboard,
|
||||
data: {
|
||||
// here additionaly we define how the menu item should look
|
||||
menu: {
|
||||
title: 'Dashboard', // menu title
|
||||
icon: 'ion-android-home', // menu icon
|
||||
selected: false, // selected or not
|
||||
expanded: false, // expanded or not (if item has children)
|
||||
order: 0, // item order in the menu list,
|
||||
hidden: true // hide menu item from a list but keep related features (breadcrumbs, page title)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You also can define a list of sub-menu items like this:
|
||||
```javascript
|
||||
{
|
||||
// parent route
|
||||
path: 'charts',
|
||||
component: Charts,
|
||||
data: {
|
||||
|
||||
// parent menu configuration
|
||||
menu: {
|
||||
title: 'Charts',
|
||||
icon: 'ion-stats-bars',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 200,
|
||||
}
|
||||
},
|
||||
|
||||
// children routes
|
||||
children: [
|
||||
{
|
||||
path: 'chartist-js',
|
||||
component: ChartistJs,
|
||||
data: {
|
||||
|
||||
// children menu item configuration
|
||||
menu: {
|
||||
title: 'Chartist.Js',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
# Custom menu items
|
||||
|
||||
You also can define a menu item not connected to any existing route in the application:
|
||||
|
||||
```javascript
|
||||
{
|
||||
path: '', // just leave the path empty
|
||||
data: {
|
||||
|
||||
// and define your menu item
|
||||
menu: {
|
||||
title: 'External Link', // title
|
||||
url: 'http://akveo.com', // custom url
|
||||
icon: 'ion-android-exit', // icon
|
||||
order: 800, // order
|
||||
target: '_blank' // target property of <a> tag (_self, _blank, etc)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
---
|
||||
title: Theme Spinner
|
||||
author: vl
|
||||
sort: 950
|
||||
group: Components
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
Theme Spinner `BaThemeSpinner` is a small service helper allowing you to show a preloader spinner while
|
||||
executing some long-running tasks.
|
||||
This is the same spinner you can see after reloading a page - it is shown while the application is initializing Angular 2 and loading charts and images.
|
||||
|
||||
The user interface in quite simple: there are two public methods: `show` and `hide`.
|
||||
|
||||
Theme Spinner comes with another small helper called `BaThemePreloader`.
|
||||
This service is globally integrated into the application and connected to the spinner.
|
||||
|
||||
You can register any promise in any part of the application so that the spinner will be
|
||||
hidden only after your promise is completed (resolved).
|
||||
|
||||
You can find an example of usage inside of the `app.component.ts` file.
|
||||
Here we are registering a loader (`this._imageLoader.load` just returns a `Promise`) which loads a background image:
|
||||
```javascript
|
||||
BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
|
||||
```
|
||||
|
||||
Then we are starting all the registered promises and once they all are done - hiding the spinner.
|
||||
```javascript
|
||||
BaThemePreloader.load().then((values) => {
|
||||
this._spinner.hide();
|
||||
});
|
||||
```
|
||||
|
||||
## Example
|
||||
You also can register a loader on any page you want.
|
||||
Say you have a long-running task on the Charts page (you need to receive some data from a web service) and you want the spinner to be shown while the data is loading.
|
||||
|
||||
First thing you need to do is to import BaThemePreloader service:
|
||||
|
||||
```javascript
|
||||
import {BaThemePreloader} from '../../../../theme/services';
|
||||
```
|
||||
|
||||
Then, say you have a method loading some data called `_loadData`, in our case we just mocked this method with `setTimeout` to emulate the loading process:
|
||||
```javascript
|
||||
private _loadData():Promise<any> {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 4000);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
Last thing you need to do is to register your loader:
|
||||
|
||||
```javascript
|
||||
BaThemePreloader.registerLoader(this._loadData());
|
||||
```
|
||||
|
||||
That's basically it! Once your data is loaded and all other registered loaders are completed - the spinner will be hidden.
|
||||
Loading…
Add table
Add a link
Reference in a new issue