docs(new page): new page docs and typos fixes

docs/contents/articles/001-getting-started/index.md

@@ -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 data you can see on graphs, charts 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 data you can see on graphs, charts and tables is mocked in Javascript so you can use backend of your choice with no limitations.
 
 ## How can it help me?
 

docs/contents/articles/002-installation-guidelines/index.md

@@ -8,7 +8,7 @@ template: article.jade
 
 ## Prerequisites
 
-Despite BlurAdmin can be run without any development experience, it would be much easier if you already have some development experience. In general following instructions allow you to run a local copy on your machine.
+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.
 
 ## Install tools
 
@@ -66,6 +66,6 @@ To run the local copy in production mode and build the sources, execute:
 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 simple put in under some web 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)

docs/contents/articles/011-changing-color-scheme/index.md

@@ -14,9 +14,10 @@ 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 `ng2`.
+As we want a dark theme, we're taking `mint`.
 
-1) Copy `src/app/theme/sass/conf/colorScheme/_mint.scss` to `src/app/theme/sass/conf/colorScheme/_dark.scss`.
+1) Copy `src/app/theme/sass/conf/colorScheme/_mint.scss` to `src/app/theme/sass/conf/colorScheme/_dark.scss`:
+<br><br>
 
 2) Include your colorscheme file in `src/app/theme/sass/conf/conf.scss`.
 
@@ -30,8 +31,9 @@ to
 ```scss
 @import 'colorSchemes/dark';
 ```
+<br><br>
 
-3) Rename the color scheme enabled
+3) Rename the color scheme enabled:
 
 Open `src/app/theme/theme.config.ts`.
 Uncomment the following line
@@ -53,11 +55,12 @@ For example like this:
   background-color: white;
 }
 ```
+<br><br>
 
-4) Change the colors
+4) Change the colors:
 
 Now your can start changing the colors.
-For example, after playing a bit with different colors, we changed 5 first main variables in `_dark.scss` file:
+For example, after playing a bit with different colors, we changed 2 first main variables in `_dark.scss` file:
 ```sass
 $body-bg: #636363;
 $bootstrap-panel-bg: rgba(#000000, 0.2);
@@ -119,4 +122,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 [following article](/ng2-admin/articles/014-switch-to-blur-theme/)
+- If you want to know how to change theme to blur, read the [following article](/ng2-admin/articles/014-switch-to-blur-theme/)

docs/contents/articles/012-project-structure/index.md

@@ -6,7 +6,7 @@ group: Customization
 template: article.jade
 ---
 
-Project structure was 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.
+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:
 

docs/contents/articles/013-create-new-page/index.md

@@ -6,63 +6,59 @@ group: Customization
 template: article.jade
 ---
 
-Blur admin uses [Angular UI router](https://github.com/angular-ui/ui-router) for navigation. 
+ng2-admin uses [Angular Router](https://angular.io/docs/ts/latest/guide/router-deprecated.html) for navigation.
-That means to create new page you need to basically configure `ui-router` state.
+Currently this version of the router is deprecated and we are going to move on to a new version once it's stable.
 
 We strongly recommend to follow pages structure in your application. 
 If it doesn't fit your needs please create a GitHub issue and tell us why. We would be glad to discuss. 
 
-Also we recommend to put pages to separate modules. 
+
-This will allow you to easily switch off some pages in the future if needed.
+Basically any page is just a usual Angular 2 Component with some routes defined for it.
 
 ## Page creation example
 
-0) Let's assume we want to create a blank page with title 'My New Page'
+1) Let's assume we want to create a blank page with title 'My New Page'
+<br><br>
 
-1) Let's Create a new directory to contain our new page inside of `src/app/pages`. Let's call this directory `myNewPage`.
+2) Let's Create a new directory to contain our new page inside of `src/app/pages`. Let's call this directory `new`.
+<br><br>
 
-2) Then let's create blank angular module to contain our page called 'myNewPage.module.js' inside of `src/app/pages/myNewPage`:
+3) Then let's create blank angular component to contain our page called 'new.component.module.js' inside of `src/app/pages/new`:
 
 ```javascript
-(function () {
+import {Component} from '@angular/core';
-  'use strict';
 
-  angular.module('BlurAdmin.pages.myNewPage', [])
+@Component({
-      .config(routeConfig);
+  selector: 'new',
-
+  pipes: [],
-  /** @ngInject */
+  providers: [],
-  function routeConfig() {
+  styles: [],
+  template: `<strong>My page content here</strong>`
+})
+export class New {
 
+  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>
 
-3) Then let's create empty html file called `my-new-page.html` inside of `src/app/pages/myNewPage`.
+4) Last thing we need to do is to define a Router configuration in a parent component, in our case in Pages component `src/app/pages/pages.component.ts`:
-
-4) Lastly let's create ui router state for this page. To do this we need to modify module.js file we created on step 2:
 ```javascript
-(function () {
+@RouteConfig([
-  'use strict';
+  // ... some routes here
-
+  {
-  angular.module('BlurAdmin.pages.myNewPage', [])
+    name: 'New',
-      .config(routeConfig);
+    component: New,
-
+    path: '/new',
-  /** @ngInject */
+  }
-  function routeConfig($stateProvider) {
+])
-    $stateProvider
+export class Pages {
-        .state('myNewPage', {
-          url: '/myNewPage',
-          templateUrl: 'app/pages/myNewPage/my-new-page.html',
-          title: 'My New Page',
-          sidebarMeta: {
-            order: 800,
-          },
-        });
 }
-
-})();
 ```
+<br><br>
 
-That's it! Your can now open your new page either from sidebar or through hash URL.
+And that's it! now your page should be available by the following url [http://localhost:3000/#/pages/new](http://localhost:3000/#/pages/new).
+If you want to add a link to your page into Sidebar, please look at the [following article](/ng2-admin/articles/015-sidebar/).
 

docs/contents/articles/014-switch-to-blur-theme/index.md

@@ -13,9 +13,10 @@ That's why we need to tell the system that we want to use blur theme by specifyi
 ```javascript
   this._baConfig.changeTheme({name: 'blur'});
 ```
+<br><br>
 
 2) Also you need to change some colors. 
-For our blur theme we use following configuration:
+For our blur theme we use the following configuration in `src/app/theme/theme.config.ts`:
 ```javascript
   let colorScheme = {
     primary: '#209e91',
@@ -57,6 +58,8 @@ For our blur theme we use following configuration:
     },
   });
 ```
+<br><br>
+
 3) CSS should also be recompiled. 
 Before running build command, switch to *blur* color profile.
 To do so replace theme in `src/app/theme/sass/conf/conf.scss`:
@@ -78,5 +81,5 @@ Additionaly, if you would like to use some different background, replace the fol
 
 We suggest using 10px Gaussian blur to blur an original image.
 
-_________________________________________ 
+<br><br>
 That's it! You have successfully blurred your theme! Run `npm start` and check it out.

docs/contents/articles/015-sidebar/index.md

@@ -7,7 +7,7 @@ template: article.jade
 ---
 
 Sidebar is used to provide convenient way of navigation in the application. 
-Application support only one sidebar per angular application. 
+Application supports only one sidebar per angular application. 
 That means sidebar is basically a singletone object.
 Currently sidebar supports level 1 and 2 sub menus.
  
@@ -21,7 +21,7 @@ At the moment sidebar menu items configuration and Angular 2 Router should be co
 
 ## Menu Configuration
 
-All menu items are located inside `src/app/app.menu.ts` file. The file contain a list of Menu Item objects with the following fields:
+All menu items are located inside `src/app/app.menu.ts` file. The file contains a list of Menu Item objects with the following fields:
 
 ```javascript
   {

docs/contents/articles/016-spinner/index.md

@@ -17,7 +17,7 @@ This service globally integrated into the application and connected to the spinn
 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 registering a loader (`this._imageLoader.load` just returns a `Promise`) which loads a background image:
+Here we are registering a loader (`this._imageLoader.load` just returns a `Promise`) which loads a background image:
 ```javascript
   BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
 ```

docs/templates/index.jade

@@ -35,7 +35,7 @@ block content
         div.why-item
           img(src=contents.images['why-practices.svg'].url)
           h4 Ease for customization
-          p Check out #[a(href='/blur-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 different look in just 2 minutes!
   div.index-block.black
     div.wrap
       h1 Is it free?
@@ -46,7 +46,7 @@ block content
       h1 How can I support you guys?
       p Here's what you can do:
       ul
-        li Star #[a(href='https://github.com/akveo/blur-admin',target='_blank') our GitHub repo]
+        li Star #[a(href='https://github.com/akveo/ng2-admin',target='_blank') our GitHub repo]
         li Create pull requests, submit bugs, suggest new features
         li Follow #[a(href='https://twitter.com/akveo_inc',target='_blank') us on Twitter]
         li Like #[a(href='https://www.facebook.com/akveo/',target='_blank') our page on Facebook]