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

Updates

Browse source
This commit is contained in:
Alexander Zhukov 2017-02-28 14:37:20 +03:00
parent be84925112
commit 00a47bf22f
9 changed files with 93 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -50,38 +50,38 @@
</div> </div>
<div class="inner-content"> <div class="inner-content">
<h1>Getting Started</h1> <h1>Getting Started</h1>
<div class="subHeader"></div><h2 id="what-is-ng2-admin-">What is&nbsp;ng2-admin?</h2> <div class="subHeader"></div><h2 id="what-is-ng2-admin-">What is ng2-admin?</h2>
<p>ng2-admin is a front-end Admin Dashboard template based on Angular 2, Bootstrap 4 and Webpack. That means all the <p>ng2-admin is a front-end Admin Dashboard template based on Angular 2, Bootstrap 4 and Webpack. That means all the
data you can see on graphs, charts and tables is mocked in Javascript so you can use the data you can see on graphs, charts and tables is mocked in Javascript so you can use the
backend of your choice with no&nbsp;limitations.</p> backend of your choice with no<span class="widont">&nbsp;</span>limitations.</p>
<h2 id="how-can-it-help-me-">How can it help&nbsp;me?</h2> <h2 id="how-can-it-help-me-">How can it help<span class="widont">&nbsp;</span>me?</h2>
<p>We believe that at the moment a lot of business applications have administration/management interfaces inside of them. Sometimes it’s not that obvious, but a lot of web applications have dashboards with panels, charts analytics,&nbsp;etc.</p> <p>We believe that at the moment a lot of business applications have administration/management interfaces inside of them. Sometimes it’s not that obvious, but a lot of web applications have dashboards with panels, charts analytics,<span class="widont">&nbsp;</span>etc.</p>
<p>ng2-admin aims to bootstrap the development of your product and provide an <p>ng2-admin aims to bootstrap the development of your product and provide an
ecosystem for building production-ready application or&nbsp;prototypes.</p> ecosystem for building production-ready application or<span class="widont">&nbsp;</span>prototypes.</p>
<p>Frameworks like Bootstrap provide a number of components, but usually it’s not enough to <p>Frameworks like Bootstrap provide a number of components, but usually it’s not enough to
build a real-world app. This template comes with lots of popular <span class="caps">UI</span> components with a unified color scheme, build a real-world app. This template comes with lots of popular <span class="caps">UI</span> components with a unified color scheme,
plus it is based on a modern Angular 2 framework and has a flexible component based&nbsp;structure.</p> plus it is based on a modern Angular 2 framework and has a flexible component based<span class="widont">&nbsp;</span>structure.</p>
<p>You can also use ng2-admin for the purpose of learning Angular&nbsp;2.</p> <p>You can also use ng2-admin for the purpose of learning Angular<span class="widont">&nbsp;</span>2.</p>
<h2 id="list-of-features">List of&nbsp;features</h2> <h2 id="list-of-features">List of features</h2>
<ul> <ul>
<li>Angular&nbsp;2</li> <li>Angular 2</li>
<li>Webpack&nbsp;2</li> <li>Webpack 2</li>
<li>Bootstrap 4 <span class="caps">CSS</span>&nbsp;Framework</li> <li>Bootstrap 4 <span class="caps">CSS</span><span class="widont">&nbsp;</span>Framework</li>
<li><span class="caps">SASS</span></li> <li><span class="caps">SASS</span></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/tables/smarttables">Smart 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/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/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/charts/chartist-js">Charts (amChart, Chartist, Chart.js,<span class="widont">&nbsp;</span>Morris)</a></li>
<li><a href="http://akveo.com/ng2-admin/#/pages/maps/googlemaps">Maps (Google, Leaflet,&nbsp;amMap)</a></li> <li><a href="http://akveo.com/ng2-admin/#/pages/maps/googlemaps">Maps (Google, Leaflet,<span class="widont">&nbsp;</span>amMap)</a></li>
<li>Responsive&nbsp;layout</li> <li>Responsive layout</li>
<li>High&nbsp;resolution</li> <li>High resolution</li>
<li>and many&nbsp;more!</li> <li>and many more!</li>
</ul> </ul>
<h2 id="i-want-to-start-developing-with-ng2-admin">I want to start developing with&nbsp;ng2-admin</h2> <h2 id="i-want-to-start-developing-with-ng2-admin">I want to start developing with<span class="widont">&nbsp;</span>ng2-admin</h2>
<p>Welcome&nbsp;aboard!</p> <p>Welcome aboard!</p>
<p>You can start with the <a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a>. <p>You can start with the <a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a>.
There we describe how you can download and run the template on your local&nbsp;machine.</p> There we describe how you can download and run the template on your local<span class="widont">&nbsp;</span>machine.</p>
<p>Good luck and have&nbsp;fun!</p> <p>Good luck and have<span class="widont">&nbsp;</span>fun!</p>
</div> </div>
</section> </section>

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

@ -52,36 +52,36 @@
<h1>Installation Guidelines</h1> <h1>Installation Guidelines</h1>
<div class="subHeader"></div><h2 id="prerequisites">Prerequisites</h2> <div class="subHeader"></div><h2 id="prerequisites">Prerequisites</h2>
<p>Although ng2-admin can be run without any development experience, it would be much easier if you already have some. <p>Although ng2-admin can be run without any development experience, it would be much easier if you already have some.
The following instructions allow you to run a local copy on your&nbsp;machine.</p> The following instructions allow you to run a local copy on your<span class="widont">&nbsp;</span>machine.</p>
<h2 id="install-tools">Install&nbsp;tools</h2> <h2 id="install-tools">Install tools</h2>
<p>If you don’t have any of these tools installed already, you will need&nbsp;to:</p> <p>If you don’t have any of these tools installed already, you will need<span class="widont">&nbsp;</span>to:</p>
<ul> <ul>
<li>Download and install <a href="https://git-scm.com/">git</a></li> <li>Download and install <a href="https://git-scm.com/">git</a></li>
<li>Download and install nodejs <a href="https://nodejs.org">https://nodejs.org</a></li> <li>Download and install nodejs <a href="https://nodejs.org">https://nodejs.org</a></li>
</ul> </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><strong>Note</strong>: Make sure you have Node version &gt;= 4.0 and <span class="caps">NPM</span> &gt;=<span class="widont">&nbsp;</span>3</p>
<h2 id="clone-repository-and-install-dependencies">Clone repository and install&nbsp;dependencies</h2> <h2 id="clone-repository-and-install-dependencies">Clone repository and install<span class="widont">&nbsp;</span>dependencies</h2>
<p>You will need to clone the source code of ng2-admin GitHub&nbsp;repository:</p> <p>You will need to clone the source code of ng2-admin GitHub<span class="widont">&nbsp;</span>repository:</p>
<pre><code class="lang-bash">git <span class="built_in">clone</span> https://github.com/akveo/ng2-admin.git <pre><code class="lang-bash">git <span class="built_in">clone</span> https://github.com/akveo/ng2-admin.git
</code></pre> </code></pre>
<p>After the repository is cloned, go inside of the repository directory and install&nbsp;dependencies:</p> <p>After the repository is cloned, go inside of the repository directory and install<span class="widont">&nbsp;</span>dependencies:</p>
<pre><code class="lang-bash"><span class="built_in">cd</span> ng2-admin <pre><code class="lang-bash"><span class="built_in">cd</span> ng2-admin
npm install npm install
</code></pre> </code></pre>
<p>This will setup a working copy of ng2-admin on your local&nbsp;machine.</p> <p>This will setup a working copy of ng2-admin on your local<span class="widont">&nbsp;</span>machine.</p>
<h2 id="running-local-copy">Running local&nbsp;copy</h2> <h2 id="running-local-copy">Running local copy</h2>
<p>To run a local copy in development mode,&nbsp;execute:</p> <p>To run a local copy in development mode,<span class="widont">&nbsp;</span>execute:</p>
<pre><code class="lang-bash">npm start <pre><code class="lang-bash">npm start
</code></pre> </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>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<span class="widont">&nbsp;</span>browser.</p>
<p>To run the local copy in production mode and build the sources,&nbsp;execute:</p> <p>To run the local copy in production mode and build the sources,<span class="widont">&nbsp;</span>execute:</p>
<pre><code class="lang-bash">npm run prebuild:prod &amp;&amp; npm run build:prod &amp;&amp; npm run server:prod <pre><code class="lang-bash">npm run prebuild:prod &amp;&amp; npm run build:prod &amp;&amp; npm run server:prod
</code></pre> </code></pre>
<p>This will clear up your dist folder (where release files are located), generate a release build and start the <p>This will clear up your dist folder (where release files are located), generate a release build and start the
built-in server. built-in server.
Now you can copy the sources from the <code>dist</code> folder and use it with any backend framework or Now you can copy the sources from the <code>dist</code> folder and use it with any backend framework or
simply put it under a web&nbsp;server.</p> simply put it under a web<span class="widont">&nbsp;</span>server.</p>
<p>For addition information about creating a build, please check out <a href="https://github.com/AngularClass/angular2-webpack-starter">Angular2 Webpack Starter&nbsp;documentation</a></p> <p>For addition information about creating a build, please check out <a href="https://github.com/AngularClass/angular2-webpack-starter">Angular2 Webpack Starter<span class="widont">&nbsp;</span>documentation</a></p>
</div> </div>
</section> </section>

34
articles/011-changing-color-scheme/index.html
View file

@ -50,10 +50,10 @@
</div> </div>
<div class="inner-content"> <div class="inner-content">
<h1>Changing Color Scheme</h1> <h1>Changing Color Scheme</h1>
<div class="subHeader"></div><p>We tried to make the process of color scheme customization as easy as&nbsp;possible. </p> <div class="subHeader"></div><p>We tried to make the process of color scheme customization as easy as<span class="widont">&nbsp;</span>possible. </p>
<p>By default ng2-admin has three built-in color profiles: ng2 (default blue sheme), mint and blur. <p>By default ng2-admin has three built-in color profiles: ng2 (default blue sheme), mint and blur.
This article will help you to create your own color profile. This article will help you to create your own color profile.
Let’s say you want to make ng2-admin dark&nbsp;theme.</p> Let’s say you want to make ng2-admin dark<span class="widont">&nbsp;</span>theme.</p>
<p>First we advise you to take some existing colorscheme file as a starting point. <p>First we advise you to take some existing colorscheme file as a starting point.
For light themes we suggest taking <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> and for For light themes we suggest taking <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> and for
dark <code>src/app/theme/sass/conf/colorScheme/_blue.scss</code>. dark <code>src/app/theme/sass/conf/colorScheme/_blue.scss</code>.
@ -61,30 +61,30 @@ As we want a dark theme, we’re taking <code>blue</code>.</p>
<p>1) Copy <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> to <code>src/app/theme/sass/conf/colorScheme/_dark.scss</code>: <p>1) Copy <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> to <code>src/app/theme/sass/conf/colorScheme/_dark.scss</code>:
<br><br></p> <br><br></p>
<p>2) Include your colorscheme file in <code>src/app/theme/sass/conf/conf.scss</code>.</p> <p>2) Include your colorscheme file in <code>src/app/theme/sass/conf/conf.scss</code>.</p>
<p>To do this,&nbsp;replace</p> <p>To do this,<span class="widont">&nbsp;</span>replace</p>
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/ng2'</span>; <pre><code class="lang-scss"><span class="at_rule">@<span class="keyword">import</span> <span class="string">'colorSchemes/ng2'</span>;</span>
</code></pre> </code></pre>
<p>with</p> <p>with</p>
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/dark'</span>; <pre><code class="lang-scss"><span class="at_rule">@<span class="keyword">import</span> <span class="string">'colorSchemes/dark'</span>;</span>
</code></pre> </code></pre>
<p><br><br></p> <p><br><br></p>
<p>3) Change the color scheme&nbsp;enabled:</p> <p>3) Change the color scheme<span class="widont">&nbsp;</span>enabled:</p>
<p>Open <code>src/app/theme/theme.config.ts</code>. <p>Open <code>src/app/theme/theme.config.ts</code>.
Uncomment the following&nbsp;line</p> Uncomment the following<span class="widont">&nbsp;</span>line</p>
<pre><code class="lang-javascript"> <span class="comment">//this._baConfig.changeTheme({name: 'my-theme'});</span> <pre><code class="lang-javascript"> <span class="comment">//this._baConfig.changeTheme({name: 'my-theme'});</span>
</code></pre> </code></pre>
<p>and put your theme name, in our case it is <code>dark</code></p> <p>and put your theme name, in our case it is <code>dark</code></p>
<pre><code class="lang-javascript"> <span class="keyword">this</span>._baConfig.changeTheme({name: <span class="string">'dark'</span>}); <pre><code class="lang-javascript"> <span class="keyword">this</span>._baConfig.changeTheme({name: <span class="string">'dark'</span>});
</code></pre> </code></pre>
<p>Beside notifying the system which scheme is currently enabled, this also puts a css class to a main element <p>Beside notifying the system which scheme is currently enabled, this also puts a css class to a main element
of the page. Thus you can freely create theme-specific css selectors in your code without breakking other themes’&nbsp;styles.</p> of the page. Thus you can freely create theme-specific css selectors in your code without breakking other themes’<span class="widont">&nbsp;</span>styles.</p>
<p>For example like&nbsp;this:</p> <p>For example like<span class="widont">&nbsp;</span>this:</p>
<pre><code class="lang-scss">. dark <span class="selector-class">.card-body</span> { <pre><code class="lang-scss">. dark <span class="class">.card-body</span> {
<span class="attribute">background-color</span>: white; <span class="attribute">background-color</span><span class="value">: white;</span>
} }
</code></pre> </code></pre>
<p><br><br></p> <p><br><br></p>
<p>4) Change the&nbsp;colors:</p> <p>4) Change the<span class="widont">&nbsp;</span>colors:</p>
<p>Now you can start changing the colors. <p>Now you can start changing the colors.
For example, after playing a bit with different colors, we changed the 2 first main variables in <code>_dark.scss</code> file:</p> For example, after playing a bit with different colors, we changed the 2 first main variables in <code>_dark.scss</code> file:</p>
<pre><code class="lang-sass">$body-bg: #636363; <pre><code class="lang-sass">$body-bg: #636363;
@ -135,14 +135,14 @@ To do this, add the following code to the configuration block inside <code>src/a
}); });
</code></pre> </code></pre>
<p>Here we defined a list of main colors <code>colorScheme</code> and then made light and dark versions of those using <code>colorHelper</code> methods. <p>Here we defined a list of main colors <code>colorScheme</code> and then made light and dark versions of those using <code>colorHelper</code> methods.
We also defined a couple of custom colors for dashboard&nbsp;charts.</p> We also defined a couple of custom colors for dashboard<span class="widont">&nbsp;</span>charts.</p>
<p>That’s basically it! Right now your admin application should look like&nbsp;this:</p> <p>That’s basically it! Right now your admin application should look like<span class="widont">&nbsp;</span>this:</p>
<p><img src="/ng2-admin/articles/011-changing-color-scheme/new-color-scheme.png" alt=""></p> <p><img src="/ng2-admin/articles/011-changing-color-scheme/new-color-scheme.png" alt=""></p>
<p>For further reference, please look&nbsp;in</p> <p>For further reference, please look<span class="widont">&nbsp;</span>in</p>
<ul> <ul>
<li>Colorscheme scss file (<code>src/app/theme/sass/conf/colorScheme/_ng2.scss</code>, <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> and <code>src/app/theme/sass/conf/colorScheme/_blur.scss</code>)</li> <li>Colorscheme scss file (<code>src/app/theme/sass/conf/colorScheme/_ng2.scss</code>, <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> and <code>src/app/theme/sass/conf/colorScheme/_blur.scss</code>)</li>
<li><code>src/app/theme/theme.configProvider.js</code> to understand which javascript colors can be&nbsp;changed</li> <li><code>src/app/theme/theme.configProvider.js</code> to understand which javascript colors can be<span class="widont">&nbsp;</span>changed</li>
<li>If you want to know how to change the theme to blur, read the <a href="/ng2-admin/articles/014-switch-to-blur-theme/">following&nbsp;article</a></li> <li>If you want to know how to change the theme to blur, read the <a href="/ng2-admin/articles/014-switch-to-blur-theme/">following<span class="widont">&nbsp;</span>article</a></li>
</ul> </ul>
</div> </div>

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

@ -50,8 +50,8 @@
</div> </div>
<div class="inner-content"> <div class="inner-content">
<h1>Project Structure</h1> <h1>Project Structure</h1>
<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> <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<span class="widont">&nbsp;</span>case.</p>
<p>The directory structure of this template is as&nbsp;follows:</p> <p>The directory structure of this template is as<span class="widont">&nbsp;</span>follows:</p>
<pre><code>ng2-admin/ <pre><code>ng2-admin/
├──config/ * webpack build configuration ├──config/ * webpack build configuration
│ ├──head-config.common.js * configuration for head elements in index.html │ ├──head-config.common.js * configuration for head elements in index.html
@ -87,7 +87,6 @@
│ │ │ │ │ │
│ │ ├──app.component.ts * main application component │ │ ├──app.component.ts * main application component
│ │ │ │ │ │
│ │ ├──app.loader.ts * requires initial css styles (most important for application loading stage)
│ │ │ │ │ │
│ │ ├──app.menu.ts * menu pages routes │ │ ├──app.menu.ts * menu pages routes
│ │ │ │ │ │
@ -114,7 +113,7 @@
└──package.json * what npm uses to manage it&#39;s dependencies └──package.json * what npm uses to manage it&#39;s dependencies
</code></pre><p>In our template we tried to separate the theme layer and presentation layer. We believe most of other templates </code></pre><p>In our template we tried to separate the theme layer and presentation layer. We believe most of other templates
have them combined. That’s why when you start developing using them, it gets very hard for you to remove things you have them combined. That’s why when you start developing using them, it gets very hard for you to remove things you
don’t&nbsp;need.</p> don’t<span class="widont">&nbsp;</span>need.</p>
</div> </div>
</section> </section>

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

@ -50,11 +50,11 @@
</div> </div>
<div class="inner-content"> <div class="inner-content">
<h1>Create New Page</h1> <h1>Create New Page</h1>
<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> <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<span class="widont">&nbsp;</span>navigation.</p>
<p>We strongly recommend to follow this page structure in your application. <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> If it does not fit your needs please create a GitHub issue and tell us why. We would be glad to<span class="widont">&nbsp;</span>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 common Angular 2 Component with a route defined for<span class="widont">&nbsp;</span>it.</p>
<h2 id="let-s-create-a-blank-page-in-6-easy-steps">Let’s create a blank page in 6 easy&nbsp;steps</h2> <h2 id="let-s-create-a-blank-page-in-6-easy-steps">Let’s create a blank page in 6 easy<span class="widont">&nbsp;</span>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>. <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> <br><br></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> <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>
@ -65,7 +65,7 @@ If it does not fit your needs please create a GitHub issue and tell us why. We w
template: <span class="string">`&lt;strong&gt;My page content here&lt;/strong&gt;`</span> 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">NewComponent</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>() {} constructor() {}
} }
</code></pre> </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>. <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>.
@ -84,7 +84,7 @@ If it does not fit your needs please create a GitHub issue and tell us why. We w
<span class="keyword">export</span> <span class="keyword">const</span> routing = RouterModule.forChild(routes); <span class="keyword">export</span> <span class="keyword">const</span> routing = RouterModule.forChild(routes);
</code></pre> </code></pre>
<p><br></p> <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> <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 it.</p>
<pre><code class="lang-javascript"><span class="keyword">import</span> { NgModule } <span class="keyword">from</span> <span class="string">'@angular/core'</span>; <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> { 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> { NewComponent } <span class="keyword">from</span> <span class="string">'./new.component'</span>;
@ -99,11 +99,11 @@ If it does not fit your needs please create a GitHub issue and tell us why. We w
NewComponent NewComponent
] ]
}) })
<span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">NewModule</span> </span>{} <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">NewModule</span> </span>{}
</code></pre> </code></pre>
<p><br></p> <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>. <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> 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<span class="widont">&nbsp;</span>this:</p>
<pre><code class="lang-javascript"><span class="keyword">export</span> <span class="keyword">const</span> PAGES_MENU = [ <pre><code class="lang-javascript"><span class="keyword">export</span> <span class="keyword">const</span> PAGES_MENU = [
{ {
path: <span class="string">'pages'</span>, path: <span class="string">'pages'</span>,
@ -141,15 +141,15 @@ Typically all pages are children of the <code>/pages</code> route and defined un
path - use pathMatch: ‘prefix’. In this case if the menu item has no children in the menu and 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. you navigated to some child route - the item will be highlighted.
<br><br></p> <br><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> <p>6) And in the end let’s import our component in <code>src/app/pages/pages.routing.ts</code> like this:</p>
<pre><code class="lang-javascript"><span class="keyword">const</span> routes: Routes = [ <pre><code class="lang-javascript"><span class="keyword">const</span> routes: Routes = [
{ {
path: <span class="string">'pages'</span>, path: <span class="string">'pages'</span>,
component: Pages, component: Pages,
children: [ children: [
{ path: <span class="string">''</span>, redirectTo: <span class="string">'dashboard'</span>, pathMatch: <span class="string">'full'</span> }, { 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">'dashboard'</span>, loadChildren: <span class="string">'app/pages/dashboard/dashboard.module#DashboardModule'</span> },
{ path: <span class="string">'new'</span>, loadChildren: () =&gt; System.import(<span class="string">'./new/new.module'</span>) } { path: <span class="string">'new'</span>, loadChildren: <span class="string">'app/pages/new/new.module#NewModule'</span> }
] ]
} }
]; ];

16
articles/014-switch-to-blur-theme/index.html
View file

@ -50,7 +50,7 @@
</div> </div>
<div class="inner-content"> <div class="inner-content">
<h1>Enabling blur theme</h1> <h1>Enabling blur theme</h1>
<div class="subHeader"></div><p>If you want to switch theme to the blur, you need to follow 3 simple&nbsp;steps:</p> <div class="subHeader"></div><p>If you want to switch theme to the blur, you need to follow 3 simple<span class="widont">&nbsp;</span>steps:</p>
<p>1) Blur color scheme needs some javascript to calculate initial background offsets for panels. <p>1) Blur color scheme needs some javascript to calculate initial background offsets for panels.
That’s why we need to tell the system that we want to use blur theme by specifying this in <code>src/app/theme/theme.config.ts</code>:</p> That’s why we need to tell the system that we want to use blur theme by specifying this in <code>src/app/theme/theme.config.ts</code>:</p>
<pre><code class="lang-javascript"> <span class="keyword">this</span>._baConfig.changeTheme({name: <span class="string">'blur'</span>}); <pre><code class="lang-javascript"> <span class="keyword">this</span>._baConfig.changeTheme({name: <span class="string">'blur'</span>});
@ -102,19 +102,19 @@ For our blur theme we use the following configuration in <code>src/app/theme/the
<p>3) <span class="caps">CSS</span> should also be recompiled. <p>3) <span class="caps">CSS</span> should also be recompiled.
Before running build command, switch to <em>blur</em> color profile. Before running build command, switch to <em>blur</em> color profile.
To do so replace theme in <code>src/app/theme/sass/conf/conf.scss</code>:</p> To do so replace theme in <code>src/app/theme/sass/conf/conf.scss</code>:</p>
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorScheme/ng2'</span>; <pre><code class="lang-scss"><span class="at_rule">@<span class="keyword">import</span> <span class="string">'colorSchemes/ng2'</span>;</span>
</code></pre> </code></pre>
<p>to</p> <p>to</p>
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorScheme/blur'</span>; <pre><code class="lang-scss"><span class="at_rule">@<span class="keyword">import</span> <span class="string">'colorSchemes/blur'</span>;</span>
</code></pre> </code></pre>
<p>Additionaly, if you would like to use some different background, replace the following&nbsp;images:</p> <p>Additionaly, if you would like to use some different background, replace the following<span class="widont">&nbsp;</span>images:</p>
<ul> <ul>
<li><code>src/assets/img/blur-bg.jpg</code> (main background&nbsp;image)</li> <li><code>src/assets/img/blur-bg.jpg</code> (main background<span class="widont">&nbsp;</span>image)</li>
<li><code>src/assets/img/blur-bg-blurred.jpg</code> (blurred background image used on&nbsp;panels)</li> <li><code>src/assets/img/blur-bg-blurred.jpg</code> (blurred background image used on<span class="widont">&nbsp;</span>panels)</li>
</ul> </ul>
<p>We suggest using 10px Gaussian blur to blur an original&nbsp;image.</p> <p>We suggest using 10px Gaussian blur to blur an original<span class="widont">&nbsp;</span>image.</p>
<p><br><br> <p><br><br>
That’s it! You have successfully blurred your theme! Run <code>npm start</code> and check it&nbsp;out.</p> That’s it! You have successfully blurred your theme! Run <code>npm start</code> and check it<span class="widont">&nbsp;</span>out.</p>
</div> </div>
</section> </section>

16
articles/015-sidebar/index.html
View file

@ -52,14 +52,14 @@
<h1>Sidebar</h1> <h1>Sidebar</h1>
<div class="subHeader"></div><p>The sidebar provides a convenient way to navigate the application. <div class="subHeader"></div><p>The sidebar provides a convenient way to navigate the application.
Only one sidebar is supported per angular application. Only one sidebar is supported per angular application.
This means that the sidebar is basically a singleton&nbsp;object.</p> This means that the sidebar is basically a singleton<span class="widont">&nbsp;</span>object.</p>
<p>The Sidebar can be added to the page using the <code>BaSidebar</code> component:</p> <p>The Sidebar can be added to the page using the <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> <pre><code class="lang-html"><span class="tag">&lt;<span class="title">ba-sidebar</span>&gt;</span><span class="tag">&lt;/<span class="title">ba-sidebar</span>&gt;</span>
</code></pre> </code></pre>
<p>The sidebar contains a <code>&lt;ba-menu&gt;&lt;/ba-menu&gt;</code> component which defines and renders the application menu based on routes provided. Generally the <code>ba-menu</code> component can be used separately from <code>ba-sidebar</code>. <p>The sidebar contains a <code>&lt;ba-menu&gt;&lt;/ba-menu&gt;</code> component which defines and renders the application menu based on routes provided. Generally the <code>ba-menu</code> component can be used separately from <code>ba-sidebar</code>.
All menu items information is defined inside the <code>data</code> property of a&nbsp;route.</p> All menu items information is defined inside the <code>data</code> property of a<span class="widont">&nbsp;</span>route.</p>
<h2 id="menu-configuration">Menu&nbsp;Configuration</h2> <h2 id="menu-configuration">Menu Configuration</h2>
<p>All menu items are located inside the <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> <p>All menu items are located inside the <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<span class="widont">&nbsp;</span>item:</p>
<pre><code class="lang-javascript"> { <pre><code class="lang-javascript"> {
<span class="comment">// first, router configuration</span> <span class="comment">// first, router configuration</span>
path: <span class="string">'dashboard'</span>, path: <span class="string">'dashboard'</span>,
@ -77,7 +77,7 @@ All menu items information is defined inside the <code>data</code> property of a
} }
} }
</code></pre> </code></pre>
<p>You also can define a list of sub-menu items like&nbsp;this:</p> <p>You also can define a list of sub-menu items like<span class="widont">&nbsp;</span>this:</p>
<pre><code class="lang-javascript"> { <pre><code class="lang-javascript"> {
<span class="comment">// parent route</span> <span class="comment">// parent route</span>
path: <span class="string">'charts'</span>, path: <span class="string">'charts'</span>,
@ -110,8 +110,8 @@ All menu items information is defined inside the <code>data</code> property of a
] ]
} }
</code></pre> </code></pre>
<h1 id="custom-menu-items">Custom menu&nbsp;items</h1> <h1 id="custom-menu-items">Custom menu items</h1>
<p>You also can define a menu item not connected to any existing route in the&nbsp;application:</p> <p>You also can define a menu item not connected to any existing route in the<span class="widont">&nbsp;</span>application:</p>
<pre><code class="lang-javascript"> { <pre><code class="lang-javascript"> {
path: <span class="string">''</span>, <span class="comment">// just leave the path empty</span> path: <span class="string">''</span>, <span class="comment">// just leave the path empty</span>
data: { data: {

20
articles/016-spinner/index.html
View file

@ -52,28 +52,28 @@
<h1>Theme Spinner</h1> <h1>Theme Spinner</h1>
<div class="subHeader"></div><p>Theme Spinner <code>BaThemeSpinner</code> is a small service helper allowing you to show a preloader spinner while <div class="subHeader"></div><p>Theme Spinner <code>BaThemeSpinner</code> is a small service helper allowing you to show a preloader spinner while
executing some long-running tasks. executing some long-running tasks.
This is the same spinner you can see after reloading a page - it is shown while the application is initializing Angular 2 and loading charts and&nbsp;images.</p> This is the same spinner you can see after reloading a page - it is shown while the application is initializing Angular 2 and loading charts and<span class="widont">&nbsp;</span>images.</p>
<p>The user interface in quite simple: there are two public methods: <code>show</code> and <code>hide</code>.</p> <p>The user interface in quite simple: there are two public methods: <code>show</code> and <code>hide</code>.</p>
<p>Theme Spinner comes with another small helper called <code>BaThemePreloader</code>. <p>Theme Spinner comes with another small helper called <code>BaThemePreloader</code>.
This service is globally integrated into the application and connected to the&nbsp;spinner.</p> This service is globally integrated into the application and connected to the<span class="widont">&nbsp;</span>spinner.</p>
<p>You can register any promise in any part of the application so that the spinner will be <p>You can register any promise in any part of the application so that the spinner will be
hidden only after your promise is completed&nbsp;(resolved).</p> hidden only after your promise is completed<span class="widont">&nbsp;</span>(resolved).</p>
<p>You can find an example of usage inside of the <code>app.component.ts</code> file. <p>You can find an example of usage inside of the <code>app.component.ts</code> file.
Here we are registering a loader (<code>this._imageLoader.load</code> just returns a <code>Promise</code>) which loads a background&nbsp;image:</p> Here we are registering a loader (<code>this._imageLoader.load</code> just returns a <code>Promise</code>) which loads a background<span class="widont">&nbsp;</span>image:</p>
<pre><code class="lang-javascript"> BaThemePreloader.registerLoader(<span class="keyword">this</span>._imageLoader.load(layoutPaths.images.root + <span class="string">'blur-bg-mobile.jpg'</span>)); <pre><code class="lang-javascript"> BaThemePreloader.registerLoader(<span class="keyword">this</span>._imageLoader.load(layoutPaths.images.root + <span class="string">'blur-bg-mobile.jpg'</span>));
</code></pre> </code></pre>
<p>Then we are starting all the registered promises and once they all are done - hiding the&nbsp;spinner.</p> <p>Then we are starting all the registered promises and once they all are done - hiding the<span class="widont">&nbsp;</span>spinner.</p>
<pre><code class="lang-javascript"> BaThemePreloader.load().then((values) =&gt; { <pre><code class="lang-javascript"> BaThemePreloader.load().then((values) =&gt; {
<span class="keyword">this</span>._spinner.hide(); <span class="keyword">this</span>._spinner.hide();
}); });
</code></pre> </code></pre>
<h2 id="example">Example</h2> <h2 id="example">Example</h2>
<p>You also can register a loader on any page you want. <p>You also can register a loader on any page you want.
Say you have a long-running task on the Charts page (you need to receive some data from a web service) and you want the spinner to be shown while the data is&nbsp;loading.</p> Say you have a long-running task on the Charts page (you need to receive some data from a web service) and you want the spinner to be shown while the data is<span class="widont">&nbsp;</span>loading.</p>
<p>First thing you need to do is to import BaThemePreloader&nbsp;service:</p> <p>First thing you need to do is to import BaThemePreloader<span class="widont">&nbsp;</span>service:</p>
<pre><code class="lang-javascript"> <span class="keyword">import</span> {BaThemePreloader} <span class="keyword">from</span> <span class="string">'../../../../theme/services'</span>; <pre><code class="lang-javascript"> <span class="keyword">import</span> {BaThemePreloader} <span class="keyword">from</span> <span class="string">'../../../../theme/services'</span>;
</code></pre> </code></pre>
<p>Then, say you have a method loading some data called <code>_loadData</code>, in our case we just mocked this method with <code>setTimeout</code> to emulate the loading&nbsp;process:</p> <p>Then, say you have a method loading some data called <code>_loadData</code>, in our case we just mocked this method with <code>setTimeout</code> to emulate the loading<span class="widont">&nbsp;</span>process:</p>
<pre><code class="lang-javascript"> private _loadData():<span class="built_in">Promise</span>&lt;any&gt; { <pre><code class="lang-javascript"> private _loadData():<span class="built_in">Promise</span>&lt;any&gt; {
<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>((resolve, reject) =&gt; { <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>((resolve, reject) =&gt; {
setTimeout(() =&gt; { setTimeout(() =&gt; {
@ -82,10 +82,10 @@ Say you have a long-running task on the Charts page (you need to receive some da
}); });
} }
</code></pre> </code></pre>
<p>Last thing you need to do is to register your&nbsp;loader:</p> <p>Last thing you need to do is to register your<span class="widont">&nbsp;</span>loader:</p>
<pre><code class="lang-javascript"> BaThemePreloader.registerLoader(<span class="keyword">this</span>._loadData()); <pre><code class="lang-javascript"> BaThemePreloader.registerLoader(<span class="keyword">this</span>._loadData());
</code></pre> </code></pre>
<p>That’s basically it! Once your data is loaded and all other registered loaders are completed - the spinner will be&nbsp;hidden.</p> <p>That’s basically it! Once your data is loaded and all other registered loaders are completed - the spinner will be<span class="widont">&nbsp;</span>hidden.</p>
</div> </div>
</section> </section>

2
css/main.css
View file

File diff suppressed because one or more lines are too long