Updates

articles/001-getting-started/index.html

@@ -64,15 +64,17 @@ plus it is based on a modern Angular 2 framework and has a flexible component ba
 <p>You can also use ng2-admin for the purpose of learning Angular&nbsp;2.</p>
 <h2 id="list-of-features">List of&nbsp;features</h2>
 <ul>
-<li>Responsive&nbsp;layout</li>
+<li>Angular&nbsp;2</li>
-<li>High&nbsp;resolution</li>
+<li>Webpack&nbsp;2</li>
 <li>Bootstrap 4 <span class="caps">CSS</span>&nbsp;Framework</li>
 <li><span class="caps">SASS</span></li>
-<li>Webpack</li>
+<li><a href="http://akveo.com/ng2-admin/#/pages/tables/smarttables">Smart&nbsp;Table</a></li>
-<li>Angular&nbsp;2</li>
+<li><a href="http://akveo.com/ng2-admin/#/pages/forms/inputs">Forms</a></li>
-<li>jQuery</li>
+<li><a href="http://akveo.com/ng2-admin/#/pages/editors/ckeditor">Editors</a></li>
-<li>Charts (amChart, Chartist, Chart.js,&nbsp;Morris)</li>
+<li><a href="http://akveo.com/ng2-admin/#/pages/charts/chartist-js">Charts (amChart, Chartist, Chart.js,&nbsp;Morris)</a></li>
-<li>Maps (Google, Leaflet,&nbsp;amMap)</li>
+<li><a href="http://akveo.com/ng2-admin/#/pages/maps/googlemaps">Maps (Google, Leaflet,&nbsp;amMap)</a></li>
+<li>Responsive&nbsp;layout</li>
+<li>High&nbsp;resolution</li>
 <li>and many&nbsp;more!</li>
 </ul>
 <h2 id="i-want-to-start-developing-with-ng2-admin">I want to start developing with&nbsp;ng2-admin</h2>

articles/002-installation-guidelines/index.html

@@ -60,21 +60,6 @@ The following instructions allow you to run a local copy on your&nbsp;machine.</
 <li>Download and install nodejs <a href="https://nodejs.org">https://nodejs.org</a></li>
 </ul>
 <p><strong>Note</strong>: Make sure you have Node version &gt;= 4.0 and <span class="caps">NPM</span> &gt;=&nbsp;3</p>
-<p>Once you have those, you should install these globals with <code>npm install --global</code>:</p>
-<ul>
-<li><p>webpack</p>
-<pre><code class="lang-bash">npm install --global webpack
-</code></pre>
-</li>
-<li><p>webpack-dev-server</p>
-<pre><code class="lang-bash">npm install --global webpack-dev-server
-</code></pre>
-</li>
-<li><p>typescript</p>
-<pre><code class="lang-bash">npm install --global typescript@2.0.0
-</code></pre>
-</li>
-</ul>
 <h2 id="clone-repository-and-install-dependencies">Clone repository and install&nbsp;dependencies</h2>
 <p>You will need to clone the source code of ng2-admin GitHub&nbsp;repository:</p>
 <pre><code class="lang-bash">git <span class="built_in">clone</span> https://github.com/akveo/ng2-admin.git
@@ -84,13 +69,11 @@ The following instructions allow you to run a local copy on your&nbsp;machine.</
 npm install
 </code></pre>
 <p>This will setup a working copy of ng2-admin on your local&nbsp;machine.</p>
-<pre><code>## Running local copy
+<h2 id="running-local-copy">Running local&nbsp;copy</h2>
-
+<p>To run a local copy in development mode,&nbsp;execute:</p>
-To run a local copy in development mode, execute:
+<pre><code class="lang-bash">npm start
-
+</code></pre>
-```bash
+<p>Go to <a href="http://0.0.0.0:3000">http://0.0.0.0:3000</a> or <a href="http://localhost:3000">http://localhost:3000</a> in your&nbsp;browser.</p>
-npm start
-</code></pre><p>Go to <a href="http://0.0.0.0:3000">http://0.0.0.0:3000</a> or <a href="http://localhost:3000">http://localhost:3000</a> in your&nbsp;browser.</p>
 <p>To run the local copy in production mode and build the sources,&nbsp;execute:</p>
 <pre><code class="lang-bash">npm run prebuild:prod &amp;&amp; npm run build:prod &amp;&amp; npm run server:prod
 </code></pre>

articles/012-project-structure/index.html

@@ -53,24 +53,35 @@
           <div class="subHeader"></div><p>The project structure is originally based on <a href="https://github.com/AngularClass/angular2-webpack-starter#file-structure">Angular2 Webpack Starter</a>. We made some changes we thought would be better in our particular&nbsp;case.</p>
 <p>The directory structure of this template is as&nbsp;follows:</p>
 <pre><code>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
    │   │   │
@@ -78,9 +89,15 @@
    │   │   │
    │   │   ├──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 
    │   │   │

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

@@ -54,46 +54,61 @@
 <p>We strongly recommend to follow this page 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>
 <p>Basically any page is just a common Angular 2 Component with a route defined for&nbsp;it.</p>
-<h2 id="page-creation-example">Page creation&nbsp;example</h2>
+<h2 id="let-s-create-a-blank-page-in-6-easy-steps">Let’s create a blank page in 6 easy&nbsp;steps</h2>
-<p>1) Let’s assume we want to create a blank page with a title ‘My New Page’
+<p>1) Create a new directory for our new page inside of <code>src/app/pages</code>. We can call the directory <code>new</code>.
 <br><br></p>
-<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>.
+<p>2) 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>
-<br><br></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({
   selector: <span class="string">'new'</span>,
-  pipes: [],
-  providers: [],
-  styles: [],
   template: <span class="string">`&lt;strong&gt;My page content here&lt;/strong&gt;`</span>
 })
-<span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">New</span> </span>{
+<span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">NewComponent</span> </span>{
-
+  <span class="keyword">constructor</span>() {}
-  <span class="keyword">constructor</span>() {
-  }
 }
 </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) The last thing we need to do is to define a Router configuration. Routes for pages are located 
+<p>3) After that we should create our component routing called <code>new.routing.ts</code> in the <code>new</code> directory.</p>
-inside of <code>src/app/pages/pages.routing.ts</code>.
+<pre><code class="lang-javascript"><span class="keyword">import</span> { Routes, RouterModule }  <span class="keyword">from</span> <span class="string">'@angular/router'</span>;
+<span class="keyword">import</span> { NewComponent } <span class="keyword">from</span> <span class="string">'./new.component'</span>;
+
+<span class="keyword">const</span> routes: Routes = [
+  {
+    path: <span class="string">''</span>,
+    component: NewComponent
+  }
+];
+
+<span class="keyword">export</span> <span class="keyword">const</span> routing = RouterModule.forChild(routes);
+</code></pre>
+<p><br></p>
+<p>4) And now we should create <code>new.module.ts</code> in <code>src/app/pages/new</code> directory and import <code>new.component.ts</code> and <code>new.routing.ts</code> in&nbsp;it.</p>
+<pre><code class="lang-javascript"><span class="keyword">import</span> { NgModule }      <span class="keyword">from</span> <span class="string">'@angular/core'</span>;
+<span class="keyword">import</span> { CommonModule }  <span class="keyword">from</span> <span class="string">'@angular/common'</span>;
+<span class="keyword">import</span> { NewComponent } <span class="keyword">from</span> <span class="string">'./new.component'</span>;
+<span class="keyword">import</span> { routing } <span class="keyword">from</span> <span class="string">'./new.routing'</span>;
+
+@NgModule({
+  imports: [
+    CommonModule,
+    routing
+  ],
+  declarations: [
+    NewComponent
+  ]
+})
+</code></pre>
+<p><br></p>
+<p>5) The penultimate thing we need to do is to declare a route in <code>src/app/pages/pages.menu.ts</code>.
 Typically all pages are children of the <code>/pages</code> route and defined under the <code>children</code> property of the root <code>pages</code> route like&nbsp;this:</p>
-<pre><code class="lang-javascript"><span class="comment">// imports here</span>
+<pre><code class="lang-javascript"><span class="keyword">export</span> <span class="keyword">const</span> PAGES_MENU = [
-<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 = [
   {
     path: <span class="string">'pages'</span>,
-    component: Pages,
     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>
@@ -104,11 +119,8 @@ Typically all pages are children of the <code>/pages</code> route and defined un
           }
         }
       },
-
-
       {
         path: <span class="string">'dashboard'</span>,
-        component: Dashboard,
         data: {
           menu: {
             title: <span class="string">'Dashboard'</span>,
@@ -119,15 +131,28 @@ Typically all pages are children of the <code>/pages</code> route and defined un
           }
         }
       }
-      <span class="comment">// rest of the routes</span>
+    }
+  }
+]
+</code></pre>
+<p><br></p>
+<p>6) And in the end let’s import our component in <code>src/app/pages/pages.routing.ts</code> like&nbsp;this:</p>
+<pre><code class="lang-javascript"><span class="keyword">const</span> routes: Routes = [
+  {
+    path: <span class="string">'pages'</span>,
+    component: Pages,
+    children: [
+      { path: <span class="string">''</span>, redirectTo: <span class="string">'dashboard'</span>, pathMatch: <span class="string">'full'</span> },
+      { path: <span class="string">'dashboard'</span>, loadChildren: () =&gt; System.import(<span class="string">'./dashboard/dashboard.module'</span>) },
+      { path: <span class="string">'new'</span>,  loadChildren: () =&gt; System.import(<span class="string">'./new/new.module'</span>) }
     ]
   }
 ];
 </code></pre>
-<p><br><br></p>
+<p><br></p>
 <p>And that’s it! Now your page is available by the following this url <a href="http://localhost:3000/#/pages/new">http://localhost:3000/#/pages/new</a>.
-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 <code>menu</code> declaration under the <code>data</code> property.</p>
+in the menu - just remove the <code>menu</code> declaration from the <code>pages.menu.ts</code> file.</p>
 
         </div>
       </section>