Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-20 17:30:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updates

Browse source
This commit is contained in:
tibing 2016-10-13 16:27:42 +03:00
parent 43257a6081
commit 1b2b3f4ca1
4 changed files with 95 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

16
articles/001-getting-started/index.html
View file

@ -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>High&nbsp;resolution</li>
<li>Angular&nbsp;2</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>Angular&nbsp;2</li>
<li>jQuery</li>
<li>Charts (amChart, Chartist, Chart.js,&nbsp;Morris)</li>
<li>Maps (Google, Leaflet,&nbsp;amMap)</li>
<li><a href="http://akveo.com/ng2-admin/#/pages/tables/smarttables">Smart&nbsp;Table</a></li>
<li><a href="http://akveo.com/ng2-admin/#/pages/forms/inputs">Forms</a></li>
<li><a href="http://akveo.com/ng2-admin/#/pages/editors/ckeditor">Editors</a></li>
<li><a href="http://akveo.com/ng2-admin/#/pages/charts/chartist-js">Charts (amChart, Chartist, Chart.js,&nbsp;Morris)</a></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>

27
articles/002-installation-guidelines/index.html
View file

@ -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
To run a local copy in development mode, execute:
```bash
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>
<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
</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>

35
articles/012-project-structure/index.html
View file

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

85
articles/013-create-new-page/index.html
View file

@ -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>
<p>1) Let’s assume we want to create a blank page with a title ‘My New Page’
<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) 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>.
<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>
<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>
<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">constructor</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>() {}
}
</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
inside of <code>src/app/pages/pages.routing.ts</code>.
<p>3) After that we should create our component routing called <code>new.routing.ts</code> in the <code>new</code> directory.</p>
<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>
<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 = [
<pre><code class="lang-javascript"><span class="keyword">export</span> <span class="keyword">const</span> PAGES_MENU = [
{
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
in the menu - just remove the <code>menu</code> declaration under the <code>data</code> property.</p>
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 from the <code>pages.menu.ts</code> file.</p>
</div>
</section>