mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-01 23:28:49 +01:00
docs: update docs for 1.0.0 (#1034)
This commit is contained in:
Lex Zhukov
Alexander Zhukov
parent
6e89e797a8
commit
72ab016e75
13 changed files with 107 additions and 100 deletions
|
|
@ -8,7 +8,7 @@ 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
|
||||
ng2-admin is a front-end Admin Dashboard template based on Angular, Bootstrap 4 and Angular CLI. 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.
|
||||
|
||||
|
|
@ -21,14 +21,14 @@ 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.
|
||||
plus it is based on a modern Angular framework and has a flexible component based structure.
|
||||
|
||||
You can also use ng2-admin for the purpose of learning Angular 2.
|
||||
You can also use ng2-admin for the purpose of learning Angular.
|
||||
|
||||
## List of features
|
||||
|
||||
* Angular 2
|
||||
* Webpack 2
|
||||
* Angular 2+
|
||||
* Angular CLI
|
||||
* Bootstrap 4 CSS Framework
|
||||
* SASS
|
||||
* [Smart Table](http://akveo.com/ng2-admin/#/pages/tables/smarttables)
|
||||
|
|
@ -47,4 +47,4 @@ 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!
|
||||
Good luck and have fun!
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ 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
|
||||
**Note**: Make sure you have Node version >= 6.0 and NPM >= 3
|
||||
## Clone repository and install dependencies
|
||||
|
||||
You will need to clone the source code of ng2-admin GitHub repository:
|
||||
|
|
@ -31,6 +31,12 @@ After the repository is cloned, go inside of the repository directory and instal
|
|||
cd ng2-admin
|
||||
npm install
|
||||
```
|
||||
or
|
||||
```bash
|
||||
cd ng2-admin
|
||||
yarn
|
||||
```
|
||||
|
||||
This will setup a working copy of ng2-admin on your local machine.
|
||||
|
||||
## Running local copy
|
||||
|
|
@ -41,18 +47,20 @@ To run a local copy in development mode, execute:
|
|||
npm start
|
||||
```
|
||||
|
||||
Go to http://0.0.0.0:3000 or http://localhost:3000 in your browser.
|
||||
Go to http://0.0.0.0:4200 or http://localhost:4200 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
|
||||
npm run start:prod
|
||||
```
|
||||
or in AOT mode
|
||||
```bash
|
||||
npm run start:prod:aot
|
||||
```
|
||||
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ 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.
|
||||
By default ng2-admin has three built-in color profiles: ng2 (default blue scheme), 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -6,70 +6,66 @@ 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
|
||||
├──e2e/
|
||||
│ ├──tsconfig.e2e.json * typescript config that protractor use for e2e tests
|
||||
│
|
||||
├──src/ * source files that will be compiled to javascript
|
||||
│ ├──typings.d.ts * custom typings for third-party modules
|
||||
│ │
|
||||
│ ├──helpers.js * helper functions for our configuration files
|
||||
│ ├──index.html * application layout
|
||||
│ │
|
||||
│ ├──webpack.dev.js * development webpack config
|
||||
│ ├──main.ts * entry file for our browser environment
|
||||
│ │
|
||||
│ ├──webpack.prod.js * production webpack config
|
||||
│ ├──polyfills.ts * polyfills file
|
||||
│ │
|
||||
│ ├──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/ * application code - our working directory
|
||||
│ │ ├──pages/
|
||||
│ │ │ ├──pages.menu.ts * menu pages routes
|
||||
│ │ │
|
||||
│ │ ├──app.component.ts * main application component
|
||||
│ │ ├──app.component.ts * main application component
|
||||
│ │ │
|
||||
│ │ ├──app.module.ts * main application module
|
||||
│ │ │
|
||||
│ │ ├──app.menu.ts * menu pages routes
|
||||
│ │ │
|
||||
│ │ ├──app.module.ts * main application module
|
||||
│ │ │
|
||||
│ │ ├──app.routes.ts * application routes
|
||||
│ │ ├──app.routing.ts * application routes
|
||||
│ │ │
|
||||
│ │ ├──app.translation.module.ts * main translation module
|
||||
│ │ │
|
||||
│ │ ├──global.state.ts * global application state for data exchange between components
|
||||
│ │ ├──global.state.ts * global application state for data exchange between components
|
||||
│ │ │
|
||||
│ │ ├──environment.ts * environment provider
|
||||
│ │ ├──environment.ts * environment provider
|
||||
│ │ │
|
||||
│ │ ├──app.scss * application styles
|
||||
│ │ ├──app.component.scss * application styles
|
||||
│ │ │
|
||||
│ │ ├──pages/ * application pages components, place where you can create pages and fill them with components
|
||||
│ │ ├──pages/ * application pages components, place where you can create pages and fill them with components
|
||||
│ │ │
|
||||
│ │ └──theme/ * template global components/directives/pipes and styles
|
||||
│ │ └──theme/ * template global components/directives/pipes and styles
|
||||
│ │
|
||||
│ └──assets/ * static assets are served here
|
||||
│ └──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
|
||||
├──.angular-cli.json * Angular CLI config
|
||||
│
|
||||
├──Dockerfile * Docker config
|
||||
│
|
||||
├──karma.conf.js * config that karma use for unit tests
|
||||
│
|
||||
├──protractor.conf.js * config that protractor use for e2e tests
|
||||
│
|
||||
├──.angular-cli.json * Angular CLI config
|
||||
│
|
||||
├──.stylelintrc.json * SASS/CSS lint config
|
||||
│
|
||||
├──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
|
||||
|
|
|
|||
|
|
@ -6,39 +6,40 @@ group: Customization
|
|||
template: article.jade
|
||||
---
|
||||
|
||||
ng2-admin uses [Angular 2 Component Router](https://angular.io/docs/ts/latest/guide/router.html) for navigation.
|
||||
ng2-admin uses [Angular 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.
|
||||
Basically any page is just a common Angular 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`:
|
||||
2) Then let's create a blank angular component for our page called 'new.component.ts' inside of `src/app/pages/new`:
|
||||
|
||||
```javascript
|
||||
import {Component} from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'new',
|
||||
template: `<strong>My page content here</strong>`
|
||||
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).
|
||||
This will create a simple Angular component. For more detail please check out [official Angular 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 { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { NewComponent } from './new.component';
|
||||
|
||||
const routes: Routes = [
|
||||
|
|
@ -57,12 +58,15 @@ export const routing = RouterModule.forChild(routes);
|
|||
```javascript
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { NewComponent } from './new.component';
|
||||
import { routing } from './new.routing';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
routing
|
||||
],
|
||||
declarations: [
|
||||
|
|
@ -124,14 +128,14 @@ const routes: Routes = [
|
|||
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' }
|
||||
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
|
||||
{ path: 'new', loadChildren: './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).
|
||||
And that's it! Now your page is available by the following this url [http://localhost:4200/#/pages/new](http://localhost:4200/#/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.
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ to
|
|||
@import 'colorSchemes/blur';
|
||||
```
|
||||
|
||||
Additionaly, if you would like to use some different background, replace the following images:
|
||||
Additionally, 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)
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ All menu items are located inside the `src/app/app.routes.ts` file. Each route i
|
|||
path: 'dashboard',
|
||||
component: Dashboard,
|
||||
data: {
|
||||
// here additionaly we define how the menu item should look
|
||||
// here additionally we define how the menu item should look
|
||||
menu: {
|
||||
title: 'Dashboard', // menu title
|
||||
icon: 'ion-android-home', // menu icon
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ 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.
|
||||
This is the same spinner you can see after reloading a page - it is shown while the application is initializing Angular and loading charts and images.
|
||||
|
||||
The user interface in quite simple: there are two public methods: `show` and `hide`.
|
||||
|
||||
|
|
@ -58,4 +58,4 @@ Last thing you need to do is to register your loader:
|
|||
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.
|
||||
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