mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
refactor(docs): refactor deprecated paragraphs
This commit is contained in:
tibing
parent
2d60a286d2
commit
3f2670f5c2
4 changed files with 103 additions and 67 deletions
|
|
@ -27,15 +27,17 @@ You can also use ng2-admin for the purpose of learning Angular 2.
|
|||
|
||||
## List of features
|
||||
|
||||
* Responsive layout
|
||||
* High resolution
|
||||
* Angular 2
|
||||
* Webpack 2
|
||||
* Bootstrap 4 CSS Framework
|
||||
* SASS
|
||||
* Webpack
|
||||
* Angular 2
|
||||
* jQuery
|
||||
* Charts (amChart, Chartist, Chart.js, Morris)
|
||||
* Maps (Google, Leaflet, amMap)
|
||||
* [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
|
||||
|
|
|
|||
|
|
@ -18,23 +18,6 @@ If you don't have any of these tools installed already, you will need to:
|
|||
* Download and install nodejs [https://nodejs.org](https://nodejs.org)
|
||||
|
||||
**Note**: Make sure you have Node version >= 4.0 and NPM >= 3
|
||||
|
||||
Once you have those, you should install these globals with `npm install --global`:
|
||||
* webpack
|
||||
```bash
|
||||
npm install --global webpack
|
||||
```
|
||||
|
||||
* webpack-dev-server
|
||||
```bash
|
||||
npm install --global webpack-dev-server
|
||||
```
|
||||
|
||||
* typescript
|
||||
```bash
|
||||
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:
|
||||
|
|
@ -50,7 +33,6 @@ 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:
|
||||
|
|
|
|||
|
|
@ -12,24 +12,35 @@ The directory structure of this template is as follows:
|
|||
|
||||
```
|
||||
ng2-admin/
|
||||
├──config/ * build configuration
|
||||
├──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
|
||||
│ │
|
||||
│ ├──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
|
||||
│ ├──main.browser.ts * entry file for our browser environment
|
||||
│ ├──custom-typings.d.ts * custom typings for third-party modules
|
||||
│ │
|
||||
│ ├──desktop.ts * electron window initialization
|
||||
│ │
|
||||
│ ├──index.html * application layout
|
||||
│ │
|
||||
│ ├──polyfills.ts * polyfills file
|
||||
│ ├──main.browser.ts * entry file for our browser environment
|
||||
│ │
|
||||
│ ├──vendor.ts * vendors file
|
||||
│ ├──package.json * electrons package.json
|
||||
│ │
|
||||
│ ├──custom-typings.d.ts * custom typings for third-party modules
|
||||
│ ├──polyfills.browser.ts * polyfills file
|
||||
│ │
|
||||
│ ├──platform/ * platform dependent imports
|
||||
│ ├──vendor.browser.ts * vendors file
|
||||
│ │
|
||||
│ ├──app/ * application code - our working directory
|
||||
│ │ │
|
||||
|
|
@ -37,9 +48,15 @@ ng2-admin/
|
|||
│ │ │
|
||||
│ │ ├──app.loader.ts * requires initial css styles (most important for application loading stage)
|
||||
│ │ │
|
||||
│ │ ├──app.routes.ts * application routes and menu configuration
|
||||
│ │ ├──app.menu.ts * menu pages routes
|
||||
│ │ │
|
||||
│ │ ├──app.state.ts * global application state for data exchange between components
|
||||
│ │ ├──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
|
||||
│ │ │
|
||||
|
|
|
|||
|
|
@ -14,69 +14,87 @@ If it does not fit your needs please create a GitHub issue and tell us why. We w
|
|||
|
||||
Basically any page is just a common Angular 2 Component with a route defined for it.
|
||||
|
||||
## Page creation example
|
||||
## Let's create a blank page in 6 easy steps
|
||||
|
||||
1) Let's assume we want to create a blank page with a title 'My New Page'
|
||||
1) Create a new directory for our new page inside of `src/app/pages`. We can call the directory `new`.
|
||||
<br><br>
|
||||
|
||||
2) Let's Create a new directory for our new page inside of `src/app/pages`. Let's call the directory `new`.
|
||||
<br><br>
|
||||
|
||||
3) 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 2 component for our page called 'new.component.ts' inside of `src/app/pages/new`:
|
||||
|
||||
```javascript
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'new',
|
||||
pipes: [],
|
||||
providers: [],
|
||||
styles: [],
|
||||
template: `<strong>My page content here</strong>`
|
||||
})
|
||||
export class New {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
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>
|
||||
|
||||
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`.
|
||||
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
|
||||
]
|
||||
})
|
||||
```
|
||||
<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
|
||||
// imports here
|
||||
// lets import our page
|
||||
import {New} from './new/new.component';
|
||||
|
||||
|
||||
//noinspection TypeScriptValidateTypes
|
||||
export const PagesRoutes:RouterConfig = [
|
||||
export const PAGES_MENU = [
|
||||
{
|
||||
path: 'pages',
|
||||
component: Pages,
|
||||
children: [
|
||||
{
|
||||
path: 'new', // path for our page
|
||||
component: New, // component imported above
|
||||
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',
|
||||
component: Dashboard,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Dashboard',
|
||||
|
|
@ -87,15 +105,32 @@ export const PagesRoutes:RouterConfig = [
|
|||
}
|
||||
}
|
||||
}
|
||||
// rest of the routes
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
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: () => System.import('./dashboard/dashboard.module') },
|
||||
{ path: 'new', loadChildren: () => System.import('./new/new.module') }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
```
|
||||
<br><br>
|
||||
<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 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.
|
||||
|
||||
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.
|
||||
Loading…
Add table
Add a link
Reference in a new issue