diff --git a/docs/contents/articles/001-getting-started/index.md b/docs/contents/articles/001-getting-started/index.md
index 06faa86d..5b6796ed 100644
--- a/docs/contents/articles/001-getting-started/index.md
+++ b/docs/contents/articles/001-getting-started/index.md
@@ -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
diff --git a/docs/contents/articles/002-installation-guidelines/index.md b/docs/contents/articles/002-installation-guidelines/index.md
index d754fd18..2b2c54b8 100644
--- a/docs/contents/articles/002-installation-guidelines/index.md
+++ b/docs/contents/articles/002-installation-guidelines/index.md
@@ -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:
diff --git a/docs/contents/articles/012-project-structure/index.md b/docs/contents/articles/012-project-structure/index.md
index e2be7685..78cac03c 100644
--- a/docs/contents/articles/012-project-structure/index.md
+++ b/docs/contents/articles/012-project-structure/index.md
@@ -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
│ │ │
diff --git a/docs/contents/articles/013-create-new-page/index.md b/docs/contents/articles/013-create-new-page/index.md
index a5977891..aa4fbd39 100644
--- a/docs/contents/articles/013-create-new-page/index.md
+++ b/docs/contents/articles/013-create-new-page/index.md
@@ -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`.
-2) Let's Create a new directory for our new page inside of `src/app/pages`. Let's call the directory `new`.
-
-
-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: `My page content here`
})
-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).
-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);
+```
+
+
+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
+ ]
+})
+```
+
+
+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.
+
+
+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') }
]
}
];
-
```
-
+
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.
\ No newline at end of file