mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
fix(docs): minor doc fixes
* minor doc fixes * minor doc fixes * minor doc fixes * routing
This commit is contained in:
Joseph Orr
nixa
parent
7c4437bb08
commit
c48fd9ed64
8 changed files with 64 additions and 40 deletions
|
|
@ -8,17 +8,22 @@ 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 data you can see on graphs, charts and tables is mocked in Javascript so you can use backend of your choice with no limitations.
|
||||
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 ecosystem for building production-ready application or prototypes.
|
||||
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 unified color scheme, plus it based on a modern Angular 2 framework and has a flexible components-based structure.
|
||||
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.
|
||||
|
||||
As well you can use ng2-admin for learning purposes of Angular 2.
|
||||
You can also use ng2-admin for the purpose of learning Angular 2.
|
||||
|
||||
## List of features
|
||||
|
||||
|
|
@ -35,8 +40,9 @@ As well you can use ng2-admin for learning purposes of Angular 2.
|
|||
|
||||
## I want to start developing with ng2-admin
|
||||
|
||||
Welcome abroad!
|
||||
Welcome aboard!
|
||||
|
||||
You can start with [Installation Guidelines](/ng2-admin/articles/002-installation-guidelines/). There we describe how you can download and run the template on you local machine.
|
||||
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!
|
||||
|
|
@ -8,7 +8,8 @@ template: article.jade
|
|||
|
||||
## Prerequisites
|
||||
|
||||
Despite BlurAdmin can be run without any development experience, it would be much easier if you already have some. In general following instructions allow you to run a local copy on your machine.
|
||||
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
|
||||
|
||||
|
|
@ -37,10 +38,12 @@ npm install --global typescript@2.0.0
|
|||
## 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 repository is cloned, go inside of the repository directory and install dependencies:
|
||||
After the repository is cloned, go inside of the repository directory and install dependencies:
|
||||
|
||||
```bash
|
||||
cd ng2-admin
|
||||
npm install
|
||||
|
|
@ -51,17 +54,23 @@ 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 release build and start built-in server.
|
||||
Now you can copy the sources from a `dist` folder and use it with any backend framework or simply put it under some web server.
|
||||
|
||||
For addition information about build, please check out [Angular2 Webpack Starter documentation](https://github.com/AngularClass/angular2-webpack-starter)
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -12,9 +12,10 @@ By default ng2-admin has three built-in color profiles: ng2 (default blue sheme)
|
|||
This article will help you to create your own color profile.
|
||||
Let's say you want to make ng2-admin dark theme.
|
||||
|
||||
First we advice you to take some colorscheme file as a basis.
|
||||
For light themes we suggest taking `src/app/theme/sass/conf/colorScheme/_mint.scss` one and for dark `src/app/theme/sass/conf/colorScheme/_blue.scss` one.
|
||||
As we want a dark theme, we're taking `mint`.
|
||||
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/_mint.scss` to `src/app/theme/sass/conf/colorScheme/_dark.scss`:
|
||||
<br><br>
|
||||
|
|
@ -26,14 +27,14 @@ To do this, replace
|
|||
@import 'colorSchemes/ng2';
|
||||
```
|
||||
|
||||
to
|
||||
with
|
||||
|
||||
```scss
|
||||
@import 'colorSchemes/dark';
|
||||
```
|
||||
<br><br>
|
||||
|
||||
3) Rename the color scheme enabled:
|
||||
3) Change the color scheme enabled:
|
||||
|
||||
Open `src/app/theme/theme.config.ts`.
|
||||
Uncomment the following line
|
||||
|
|
@ -42,12 +43,13 @@ Uncomment the following line
|
|||
//this._baConfig.changeTheme({name: 'my-theme'});
|
||||
```
|
||||
|
||||
and put you theme name, in our case it is `dark`
|
||||
and put your theme name, in our case it is `dark`
|
||||
|
||||
```javascript
|
||||
this._baConfig.changeTheme({name: 'dark'});
|
||||
```
|
||||
Beside this notifies the system which scheme currently enabled, it also puts a css class to a main element of the page. Thus you can freely create theme-specific css selectors in you code without braking other themes' styles.
|
||||
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
|
||||
|
|
@ -59,15 +61,16 @@ For example like this:
|
|||
|
||||
4) Change the colors:
|
||||
|
||||
Now your can start changing the colors.
|
||||
For example, after playing a bit with different colors, we changed 2 first main variables in `_dark.scss` file:
|
||||
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 **same colors**. These color are used for javascript charts and other components (maps, etc);
|
||||
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
|
||||
|
|
@ -111,7 +114,7 @@ To do this, add the following code to the configuration block inside `src/app/th
|
|||
},
|
||||
});
|
||||
```
|
||||
Here we defined a list of main colors `colorScheme` and then made light and dark version of those using `colorHelper` methods.
|
||||
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.
|
||||
|
||||
|
||||
|
|
@ -122,4 +125,4 @@ 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 theme to blur, read the [following article](/ng2-admin/articles/014-switch-to-blur-theme/)
|
||||
- If you want to know how to change the theme to blur, read the [following article](/ng2-admin/articles/014-switch-to-blur-theme/)
|
||||
|
|
@ -6,7 +6,7 @@ group: Customization
|
|||
template: article.jade
|
||||
---
|
||||
|
||||
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 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:
|
||||
|
||||
|
|
@ -55,4 +55,6 @@ ng2-admin/
|
|||
├──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 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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ 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 pages structure in your application.
|
||||
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.
|
||||
|
||||
|
||||
|
|
@ -40,11 +40,12 @@ export class New {
|
|||
}
|
||||
}
|
||||
```
|
||||
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).
|
||||
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>
|
||||
|
||||
4) Last thing we need to do is to define a Router configuration. Routes for pages are located inside of `src/app/pages/pages.routes.ts`.
|
||||
Typically all pages are children for `/pages` routes and defined under `children` property of root `pages` route like this:
|
||||
4) The last thing we need to do is to define a Router configuration. Routes for pages are located
|
||||
inside of `src/app/pages/pages.routing.ts`.
|
||||
Typically all pages are children of the `/pages` route and defined under the `children` property of the root `pages` route like this:
|
||||
|
||||
```javascript
|
||||
// imports here
|
||||
|
|
@ -94,6 +95,7 @@ export const PagesRoutes:RouterConfig = [
|
|||
```
|
||||
<br><br>
|
||||
|
||||
And that's it! Now your page is available by the following url [http://localhost:3000/#/pages/new](http://localhost:3000/#/pages/new).
|
||||
Plus, your page is automatically registered inside the sidebar menu. If you don't want to have a link in the menu - just remove the `menu` declaration under `data` property.
|
||||
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 automatically registered inside the sidebar menu. If you don't want to have a link
|
||||
in the menu - just remove the `menu` declaration under the `data` property.
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ template: article.jade
|
|||
|
||||
The sidebar provides a convenient way to navigate the application.
|
||||
Only one sidebar is supported per angular application.
|
||||
This means that sidebar is basically a singleton object.
|
||||
This means that the sidebar is basically a singleton object.
|
||||
|
||||
Sidebar can be added to the page using the `BaSidebar` component:
|
||||
The Sidebar can be added to the page using the `BaSidebar` component:
|
||||
```html
|
||||
<ba-sidebar></ba-sidebar>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -6,15 +6,17 @@ 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.
|
||||
Same spinner you can see after reloading a page - it is shown while application is initializing Anuglar 2 and loading charts and images.
|
||||
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 usage interface in quite simple, there are two public methods: `show` and `hide`.
|
||||
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 globally integrated into the application and connected to the spinner.
|
||||
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 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:
|
||||
|
|
|
|||
4
docs/templates/index.jade
vendored
4
docs/templates/index.jade
vendored
|
|
@ -31,11 +31,11 @@ block content
|
|||
div.why-item
|
||||
img(src=contents.images['why-design.svg'].url)
|
||||
h4 Neat design
|
||||
p We have put a lot of efforts and carefully selected each color and font for this template!
|
||||
p We have put a lot of effort and carefully selected each color and font for this template!
|
||||
div.why-item
|
||||
img(src=contents.images['why-practices.svg'].url)
|
||||
h4 Ease of customization
|
||||
p Check out #[a(href='/ng2-admin/articles/011-changing-color-scheme') our article], where we describe how you can create different look in just 2 minutes!
|
||||
p Check out #[a(href='/ng2-admin/articles/011-changing-color-scheme') our article], where we describe how you can create a different look in just 2 minutes!
|
||||
div.index-block
|
||||
div.wrap
|
||||
h1.centered Is it free?
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue