Updates

articles/001-getting-started/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
     <meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
-    <title>BlurAdmin documentation - Getting Started</title>
+    <title>ng2-admin documentation - Getting Started</title>
     <link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">

articles/002-installation-guidelines/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
     <meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
-    <title>BlurAdmin documentation - Installation Guidelines</title>
+    <title>ng2-admin documentation - Installation Guidelines</title>
     <link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
@@ -90,6 +90,9 @@
 npm install
 </code></pre>
 <p>This will setup a working copy of ng2-admin on your local&nbsp;machine.</p>
+<p><strong>Note</strong>: If you have any issues after the installation, additionally run the&nbsp;following:</p>
+<pre><code class="lang-bash">typings install &amp;&amp; bower install
+</code></pre>
 <h2 id="running-local-copy">Running local&nbsp;copy</h2>
 <p>To run a local copy in development mode,&nbsp;execute:</p>
 <pre><code class="lang-bash">npm start

articles/011-changing-color-scheme/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
     <meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
-    <title>BlurAdmin documentation - Changing Color Scheme</title>
+    <title>ng2-admin documentation - Changing Color Scheme</title>
     <link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">

articles/012-project-structure/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
     <meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
-    <title>BlurAdmin documentation - Project Structure</title>
+    <title>ng2-admin documentation - Project Structure</title>
     <link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
@@ -78,7 +78,7 @@
    │   │   │
    │   │   ├──app.loader.ts      * requires initial css styles (most important for application loading stage)
    │   │   │
-   │   │   ├──app.menu.ts        * sidebar menu configuration
+   │   │   ├──app.routes.ts      * application routes and menu configuration
    │   │   │
    │   │   ├──app.state.ts       * global application state for data exchange between components
    │   │   │

articles/013-create-new-page/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
     <meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
-    <title>BlurAdmin documentation - Create New Page</title>
+    <title>ng2-admin documentation - Create New Page</title>
     <link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
@@ -50,17 +50,16 @@
         </div>
         <div class="inner-content">
           <h1>Create New Page</h1>
-          <div class="subHeader"></div><p>ng2-admin uses <a href="https://angular.io/docs/ts/latest/guide/router-deprecated.html">Angular Router</a> for navigation.
+          <div class="subHeader"></div><p>ng2-admin uses <a href="https://angular.io/docs/ts/latest/guide/router.html">Angular 2 Component Router</a> for&nbsp;navigation.</p>
-Currently this version of the router is deprecated and we are going to move on to a new version once it’s&nbsp;stable.</p>
+<p>We strongly recommend to follow pages structure in your application.
-<p>We strongly recommend to follow pages 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&nbsp;discuss. </p>
-If it doesn’t fit your needs please create a GitHub issue and tell us why. We would be glad to&nbsp;discuss. </p>
+<p>Basically any page is just a common Angular 2 Component with a route defined for&nbsp;it.</p>
-<p>Basically any page is just a usual Angular 2 Component with some routes defined for&nbsp;it.</p>
 <h2 id="page-creation-example">Page creation&nbsp;example</h2>
-<p>1) Let’s assume we want to create a blank page with title ‘My New Page’
+<p>1) Let’s assume we want to create a blank page with a title ‘My New Page’
 <br><br></p>
-<p>2) Let’s Create a new directory to contain our new page inside of <code>src/app/pages</code>. Let’s call this directory <code>new</code>.
+<p>2) Let’s Create a new directory for our new page inside of <code>src/app/pages</code>. Let’s call the directory <code>new</code>.
 <br><br></p>
-<p>3) Then let’s create blank angular component to contain our page called ‘new.component.module.js’ inside of <code>src/app/pages/new</code>:</p>
+<p>3) Then let’s create a blank angular 2 component for our page called ‘new.component.ts’ inside of <code>src/app/pages/new</code>:</p>
 <pre><code class="lang-javascript"><span class="keyword">import</span> {Component} <span class="keyword">from</span> <span class="string">'@angular/core'</span>;
 
 @Component({
@@ -78,21 +77,55 @@ If it doesn’t fit your needs please create a GitHub issue and tell us why. We
 </code></pre>
 <p>This will create a simple Angular 2 component, for more detail please check out <a href="https://angular.io/docs/ts/latest/guide/displaying-data.html">official Angular 2 documentation</a>.
 <br><br></p>
-<p>4) Last thing we need to do is to define a Router configuration in a parent component, in our case in Pages component <code>src/app/pages/pages.component.ts</code>:</p>
+<p>4) Last thing we need to do is to define a Router configuration. Routes for pages are located inside of <code>src/app/pages/pages.routes.ts</code>.
-<pre><code class="lang-javascript">@RouteConfig([
+Typically all pages are children for <code>/pages</code> routes and defined under <code>children</code> property of root <code>pages</code> route like&nbsp;this:</p>
-  <span class="comment">// ... some routes here</span>
+<pre><code class="lang-javascript"><span class="comment">// imports here</span>
+<span class="comment">// lets import our page</span>
+<span class="keyword">import</span> {New} <span class="keyword">from</span> <span class="string">'./new/new.component'</span>;
+
+
+<span class="comment">//noinspection TypeScriptValidateTypes</span>
+<span class="keyword">export</span> <span class="keyword">const</span> PagesRoutes:RouterConfig = [
   {
-    name: <span class="string">'New'</span>,
+    path: <span class="string">'pages'</span>,
-    component: New,
+    component: Pages,
-    path: <span class="string">'/new'</span>,
+    children: [
+      {
+        path: <span class="string">'new'</span>,  <span class="comment">// path for our page</span>
+        component: New, <span class="comment">// component imported above</span>
+        data: { <span class="comment">// custom menu declaration</span>
+          menu: {
+            title: <span class="string">'New Page'</span>, <span class="comment">// menu title</span>
+            icon: <span class="string">'ion-android-home'</span>, <span class="comment">// menu icon</span>
+            selected: <span class="literal">false</span>,
+            expanded: <span class="literal">false</span>,
+            order: <span class="number">0</span>
+          }
+        }
+      },
+
+
+      {
+        path: <span class="string">'dashboard'</span>,
+        component: Dashboard,
+        data: {
+          menu: {
+            title: <span class="string">'Dashboard'</span>,
+            icon: <span class="string">'ion-android-home'</span>,
+            selected: <span class="literal">false</span>,
+            expanded: <span class="literal">false</span>,
+            order: <span class="number">0</span>
+          }
+        }
+      }
+      <span class="comment">// rest of the routes</span>
+    ]
   }
-])
+];
-<span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Pages</span> </span>{
-}
 </code></pre>
 <p><br><br></p>
-<p>And that’s it! now your page should be available by the following url <a href="http://localhost:3000/#/pages/new">http://localhost:3000/#/pages/new</a>.
+<p>And that’s it! Now your page is available by the following url <a href="http://localhost:3000/#/pages/new">http://localhost:3000/#/pages/new</a>.
-If you want to add a link to your page into Sidebar, please look at the <a href="/ng2-admin/articles/015-sidebar/">following article</a>.</p>
+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 <code>menu</code> declaration under <code>data</code> property.</p>
 
         </div>
       </section>

articles/014-switch-to-blur-theme/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
     <meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
-    <title>BlurAdmin documentation - Enabling blur theme</title>
+    <title>ng2-admin documentation - Enabling blur theme</title>
     <link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">

articles/015-sidebar/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
     <meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
-    <title>BlurAdmin documentation - Sidebar</title>
+    <title>ng2-admin documentation - Sidebar</title>
     <link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
@@ -52,43 +52,80 @@
           <h1>Sidebar</h1>
           <div class="subHeader"></div><p>Sidebar is used to provide convenient way of navigation in the application. 
 Application supports only one sidebar per angular application. 
-That means sidebar is basically a singletone object.
+That means sidebar is basically a singletone&nbsp;object.</p>
-Currently sidebar supports level 1 and 2 sub&nbsp;menus.</p>
 <p>Sidebar can be added to the page using <code>BaSidebar</code> component:</p>
 <pre><code class="lang-html"><span class="tag">&lt;<span class="name">ba-sidebar</span>&gt;</span><span class="tag">&lt;/<span class="name">ba-sidebar</span>&gt;</span>
 </code></pre>
-<p>At the moment sidebar menu items configuration and Angular 2 Router should be configured independently. We probably will come up with a better solution once new Angular Router is released and&nbsp;stable.</p>
+<p>The sidebar contains a <code>&lt;ba-menu&gt;&lt;/ba-menu&gt;</code> component which defines and renders application menu based on routes provided. Generally <code>ba-menu</code> component can be used separately from <code>ba-sidebar</code>.
+All menu items information defined inside the <code>data</code> properly of a&nbsp;route.</p>
 <h2 id="menu-configuration">Menu&nbsp;Configuration</h2>
-<p>All menu items are located inside <code>src/app/app.menu.ts</code> file. The file contains a list of Menu Item objects with the following&nbsp;fields:</p>
+<p>All menu items are located inside <code>src/app/app.routes.ts</code> file. Each route item can have a <code>menu</code> property under <code>data</code> defining a menu&nbsp;item:</p>
 <pre><code class="lang-javascript">  {
-    title: <span class="string">'Dashboard'</span>, <span class="comment">// menu item title</span>
+    <span class="comment">// first, router configuration</span>
-    component: <span class="string">'Dashboard'</span>, <span class="comment">// component where the menu should lead, has a priority over url property</span>
+    path: <span class="string">'dashboard'</span>,
-    url: <span class="string">'http://google.com'</span> <span class="comment">// manual url address (used only when component is not specified)</span>
+    component: Dashboard,
-    icon: <span class="string">'ion-android-home'</span>, <span class="comment">// icon class</span>
+    data: {
-    target: <span class="string">'_blank'</span>, <span class="comment">// link target attribute (used only when url is specified)</span>
+      <span class="comment">// here additionaly we difine how the menu item should look like</span>
-    selected: <span class="literal">false</span>,  <span class="comment">// is item selected</span>
+      menu: {
-    expanded: <span class="literal">false</span>, <span class="comment">// is item expanded (used only when subItems list specified)</span>
+        title: <span class="string">'Dashboard'</span>, <span class="comment">// menu title</span>
-    order: <span class="number">0</span> <span class="comment">// order in a list</span>
+        icon: <span class="string">'ion-android-home'</span>, <span class="comment">// menu icon</span>
+        selected: <span class="literal">false</span>, <span class="comment">// selected or not</span>
+        expanded: <span class="literal">false</span>, <span class="comment">// expanded or not (if item has children)</span>
+        order: <span class="number">0</span> <span class="comment">// and item order in the menu list</span>
+      }
+    }
   }
 </code></pre>
 <p>You also can define a list of sub-menu items like&nbsp;this:</p>
 <pre><code class="lang-javascript">  {
-    title: <span class="string">'Charts'</span>,
+    <span class="comment">// parent route</span>
-    component: <span class="string">'Charts'</span>,
+    path: <span class="string">'charts'</span>,
-    icon: <span class="string">'ion-stats-bars'</span>,
+    component: Charts,
-    selected: <span class="literal">false</span>,
+    data: {
-    expanded: <span class="literal">false</span>,
+
-    order: <span class="number">200</span>,
+      <span class="comment">// parent menu configuration</span>
-    subMenu: [  <span class="comment">// list of sub-menu items</span>
+      menu: {
+        title: <span class="string">'Charts'</span>,
+        icon: <span class="string">'ion-stats-bars'</span>,
+        selected: <span class="literal">false</span>,
+        expanded: <span class="literal">false</span>,
+        order: <span class="number">200</span>,
+      }
+    },
+
+    <span class="comment">// children routes</span>
+    children: [
       {
-        title: <span class="string">'Chartist.Js'</span>, <span class="comment">// sub-item title</span>
+        path: <span class="string">'chartist-js'</span>,
-        component: <span class="string">'ChartistJs'</span>  <span class="comment">// sum-item component </span>
+        component: ChartistJs,
-      },
+        data: {
+
+          <span class="comment">// children menu item configuration</span>
+          menu: {
+            title: <span class="string">'Chartist.Js'</span>,
+          }
+        }
+      }
     ]
   }
 </code></pre>
-<h2 id="routes-configuration">Routes&nbsp;configuration</h2>
+<h1 id="custom-menu-items">Custom menu&nbsp;items</h1>
-<p>Routes configuration is specified in the Page Components according to Angular 2 Router specification. More information you can find <a href="https://angular.io/docs/ts/latest/guide/router-deprecated.html">here</a>.</p>
+<p>You also can define a menu item not connected to any existing route in the&nbsp;application:</p>
+<pre><code class="lang-javascript">  {
+    path: <span class="string">''</span>, <span class="comment">// just leave the path empty</span>
+    data: {
+
+      <span class="comment">// and define your menu item</span>
+      menu: {
+        title: <span class="string">'External Link'</span>, <span class="comment">// title</span>
+        url: <span class="string">'http://akveo.com'</span>, <span class="comment">// custom url</span>
+        icon: <span class="string">'ion-android-exit'</span>, <span class="comment">// icon</span>
+        order: <span class="number">800</span>, <span class="comment">// order</span>
+        target: <span class="string">'_blank'</span> <span class="comment">// target property of &lt;a&gt; tag (_self, _blank, etc)</span>
+      }
+    }
+  }
+</code></pre>
 
         </div>
       </section>

articles/016-spinner/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
     <meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
-    <title>BlurAdmin documentation - Theme Spinner</title>
+    <title>ng2-admin documentation - Theme Spinner</title>
     <link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">