refactor(docs): refactor deprecated paragraphs

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
+* Angular 2
-* High resolution
+* Webpack 2
 * Bootstrap 4 CSS Framework
 * SASS
-* Webpack
+* [Smart Table](http://akveo.com/ng2-admin/#/pages/tables/smarttables)
-* Angular 2
+* [Forms](http://akveo.com/ng2-admin/#/pages/forms/inputs)
-* jQuery
+* [Editors](http://akveo.com/ng2-admin/#/pages/editors/ckeditor)
-* Charts (amChart, Chartist, Chart.js, Morris)
+* [Charts (amChart, Chartist, Chart.js, Morris)](http://akveo.com/ng2-admin/#/pages/charts/chartist-js)
-* Maps (Google, Leaflet, amMap)
+* [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

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:

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 
    │   │   │

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`.
 <br><br>
 
-2) Let's Create a new directory for our new page inside of `src/app/pages`. Let's call the directory `new`.
+2) Then let's create a blank angular 2 component for our page called 'new.component.ts' inside of `src/app/pages/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`:
 
 ```javascript
 import {Component} from '@angular/core';
 
 @Component({
   selector: 'new',
-  pipes: [],
-  providers: [],
-  styles: [],
   template: `<strong>My page content here</strong>`
 })
-export class New {
+export class NewComponent {
-
+  constructor() {}
-  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 
+3) After that we should create our component routing called `new.routing.ts` in the `new` directory.
-inside of `src/app/pages/pages.routing.ts`.
+
+```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
+export const PAGES_MENU = [
-// lets import our page
-import {New} from './new/new.component';
-
-
-//noinspection TypeScriptValidateTypes
-export const PagesRoutes:RouterConfig = [
   {
     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 
+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 under the `data` property.
+in the menu - just remove the `menu` declaration from the `pages.menu.ts` file.
-