mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
Updates
This commit is contained in:
nixa
parent
e6c8deb7e4
commit
adef859159
9 changed files with 58 additions and 57 deletions
|
|
@ -51,7 +51,7 @@
|
|||
<div class="inner-content">
|
||||
<h1>Getting Started</h1>
|
||||
<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 data you can see on graphs, charts tables is mocked in Javascript so you can use backend of your choice with no limitations.</p>
|
||||
<p>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.</p>
|
||||
<h2 id="how-can-it-help-me-">How can it help 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, etc.</p>
|
||||
<p>ng2-admin aims to bootstrap the development of your product and provide ecosystem for building production-ready application or prototypes.</p>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
<div class="inner-content">
|
||||
<h1>Installation Guidelines</h1>
|
||||
<div class="subHeader"></div><h2 id="prerequisites">Prerequisites</h2>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<h2 id="install-tools">Install tools</h2>
|
||||
<p>If you don’t have any of these tools installed already, you will need to:</p>
|
||||
<ul>
|
||||
|
|
@ -96,7 +96,7 @@ npm install
|
|||
<pre><code class="lang-bash">npm run prebuild:prod && npm run build:prod && npm run server:prod
|
||||
</code></pre>
|
||||
<p>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 <code>dist</code> folder and use it with any backend framework or simple put in under some web server.</p>
|
||||
Now you can copy the sources from a <code>dist</code> folder and use it with any backend framework or simply put it under some web server.</p>
|
||||
<p>For addition information about build, please check out <a href="https://github.com/AngularClass/angular2-webpack-starter">Angular2 Webpack Starter documentation</a></p>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,16 +56,18 @@ This article will help you to create your own color profile.
|
|||
Let’s say you want to make ng2-admin dark theme.</p>
|
||||
<p>First we advice you to take some colorscheme file as a basis.
|
||||
For light themes we suggest taking <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> one and for dark <code>src/app/theme/sass/conf/colorScheme/_blue.scss</code> one.
|
||||
As we want a dark theme, we’re taking <code>ng2</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>
|
||||
As we want a dark theme, we’re taking <code>mint</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>:
|
||||
<br><br></p>
|
||||
<p>2) Include your colorscheme file in <code>src/app/theme/sass/conf/conf.scss</code>.</p>
|
||||
<p>To do this, replace </p>
|
||||
<p>To do this, replace</p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/ng2'</span>;
|
||||
</code></pre>
|
||||
<p>to</p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/dark'</span>;
|
||||
</code></pre>
|
||||
<p>3) Rename the color scheme enabled</p>
|
||||
<p><br><br></p>
|
||||
<p>3) Rename the color scheme enabled:</p>
|
||||
<p>Open <code>src/app/theme/theme.config.ts</code>.
|
||||
Uncomment the following line</p>
|
||||
<pre><code class="lang-javascript"> <span class="comment">//this._baConfig.changeTheme({name: 'my-theme'});</span>
|
||||
|
|
@ -79,9 +81,10 @@ Uncomment the following line</p>
|
|||
<span class="attribute">background-color</span>: white;
|
||||
}
|
||||
</code></pre>
|
||||
<p>4) Change the colors</p>
|
||||
<p><br><br></p>
|
||||
<p>4) Change the colors:</p>
|
||||
<p>Now your can start changing the colors.
|
||||
For example, after playing a bit with different colors, we changed 5 first main variables in <code>_dark.scss</code> file:</p>
|
||||
For example, after playing a bit with different colors, we changed 2 first main variables in <code>_dark.scss</code> file:</p>
|
||||
<pre><code class="lang-sass">$body-bg: #636363;
|
||||
$bootstrap-panel-bg: rgba(#000000, 0.2);
|
||||
</code></pre>
|
||||
|
|
@ -136,7 +139,7 @@ We also defined a couple of custom colors for dashboard charts.</p>
|
|||
<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><code>src/app/theme/theme.configProvider.js</code> to understand which javascript colors can be changed</li>
|
||||
<li>If you want to know how to change theme to blur, read <a href="/ng2-admin/articles/014-switch-to-blur-theme/">following article</a></li>
|
||||
<li>If you want to know how to change theme to blur, read the <a href="/ng2-admin/articles/014-switch-to-blur-theme/">following article</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Project Structure</h1>
|
||||
<div class="subHeader"></div><p>Project structure was 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 case.</p>
|
||||
<div class="subHeader"></div><p>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 case.</p>
|
||||
<p>The directory structure of this template is as follows:</p>
|
||||
<pre><code>ng2-admin/
|
||||
├──config/ * build configuration
|
||||
|
|
|
|||
|
|
@ -50,53 +50,49 @@
|
|||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Create New Page</h1>
|
||||
<div class="subHeader"></div><p>Blur admin uses <a href="https://github.com/angular-ui/ui-router">Angular <span class="caps">UI</span> router</a> for navigation.
|
||||
That means to create new page you need to basically configure <code>ui-router</code> state.</p>
|
||||
<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.
|
||||
Currently this version of the router is deprecated and we are going to move on to a new version once it’s stable.</p>
|
||||
<p>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. </p>
|
||||
<p>Also we recommend to put pages to separate modules.
|
||||
This will allow you to easily switch off some pages in the future if needed.</p>
|
||||
<p>Basically any page is just a usual Angular 2 Component with some routes defined for it.</p>
|
||||
<h2 id="page-creation-example">Page creation example</h2>
|
||||
<p>0) Let’s assume we want to create a blank page with title ‘My New Page’</p>
|
||||
<p>1) Let’s Create a new directory to contain our new page inside of <code>src/app/pages</code>. Let’s call this directory <code>myNewPage</code>.</p>
|
||||
<p>2) Then let’s create blank angular module to contain our page called ‘myNewPage.module.js’ inside of <code>src/app/pages/myNewPage</code>:</p>
|
||||
<pre><code class="lang-javascript">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
|
||||
<span class="meta"> 'use strict'</span>;
|
||||
<p>1) Let’s assume we want to create a blank page with 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>.
|
||||
<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>
|
||||
<pre><code class="lang-javascript"><span class="keyword">import</span> {Component} <span class="keyword">from</span> <span class="string">'@angular/core'</span>;
|
||||
|
||||
angular.module(<span class="string">'BlurAdmin.pages.myNewPage'</span>, [])
|
||||
.config(routeConfig);
|
||||
|
||||
<span class="comment">/** @ngInject */</span>
|
||||
<span class="function"><span class="keyword">function</span> <span class="title">routeConfig</span>(<span class="params"></span>) </span>{
|
||||
@Component({
|
||||
selector: <span class="string">'new'</span>,
|
||||
pipes: [],
|
||||
providers: [],
|
||||
styles: [],
|
||||
template: <span class="string">`<strong>My page content here</strong>`</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>() {
|
||||
}
|
||||
|
||||
})();
|
||||
}
|
||||
</code></pre>
|
||||
<p>3) Then let’s create empty html file called <code>my-new-page.html</code> inside of <code>src/app/pages/myNewPage</code>.</p>
|
||||
<p>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:</p>
|
||||
<pre><code class="lang-javascript">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
|
||||
<span class="meta"> 'use strict'</span>;
|
||||
|
||||
angular.module(<span class="string">'BlurAdmin.pages.myNewPage'</span>, [])
|
||||
.config(routeConfig);
|
||||
|
||||
<span class="comment">/** @ngInject */</span>
|
||||
<span class="function"><span class="keyword">function</span> <span class="title">routeConfig</span>(<span class="params">$stateProvider</span>) </span>{
|
||||
$stateProvider
|
||||
.state(<span class="string">'myNewPage'</span>, {
|
||||
url: <span class="string">'/myNewPage'</span>,
|
||||
templateUrl: <span class="string">'app/pages/myNewPage/my-new-page.html'</span>,
|
||||
title: <span class="string">'My New Page'</span>,
|
||||
sidebarMeta: {
|
||||
order: <span class="number">800</span>,
|
||||
},
|
||||
});
|
||||
<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>
|
||||
<pre><code class="lang-javascript">@RouteConfig([
|
||||
<span class="comment">// ... some routes here</span>
|
||||
{
|
||||
name: <span class="string">'New'</span>,
|
||||
component: New,
|
||||
path: <span class="string">'/new'</span>,
|
||||
}
|
||||
|
||||
})();
|
||||
])
|
||||
<span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Pages</span> </span>{
|
||||
}
|
||||
</code></pre>
|
||||
<p>That’s it! Your can now open your new page either from sidebar or through hash <span class="caps">URL</span>.</p>
|
||||
<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>.
|
||||
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>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -55,8 +55,9 @@
|
|||
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>});
|
||||
</code></pre>
|
||||
<p><br><br></p>
|
||||
<p>2) Also you need to change some colors.
|
||||
For our blur theme we use following configuration:</p>
|
||||
For our blur theme we use the following configuration in <code>src/app/theme/theme.config.ts</code>:</p>
|
||||
<pre><code class="lang-javascript"> <span class="keyword">let</span> colorScheme = {
|
||||
primary: <span class="string">'#209e91'</span>,
|
||||
info: <span class="string">'#2dacd1'</span>,
|
||||
|
|
@ -97,6 +98,7 @@ For our blur theme we use following configuration:</p>
|
|||
},
|
||||
});
|
||||
</code></pre>
|
||||
<p><br><br></p>
|
||||
<p>3) <span class="caps">CSS</span> should also be recompiled.
|
||||
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>
|
||||
|
|
@ -111,8 +113,8 @@ To do so replace theme in <code>src/app/theme/sass/conf/conf.scss</code>:</p>
|
|||
<li><code>src/assets/img/blur-bg-blurred.jpg</code> (blurred background image used on panels)</li>
|
||||
</ul>
|
||||
<p>We suggest using 10px Gaussian blur to blur an original image.</p>
|
||||
<hr>
|
||||
<p>That’s it! You have successfully blurred your theme! Run <code>npm start</code> and check it out.</p>
|
||||
<p><br><br>
|
||||
That’s it! You have successfully blurred your theme! Run <code>npm start</code> and check it out.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
<div class="inner-content">
|
||||
<h1>Sidebar</h1>
|
||||
<div class="subHeader"></div><p>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.</p>
|
||||
<p>Sidebar can be added to the page using <code>BaSidebar</code> component:</p>
|
||||
|
|
@ -59,7 +59,7 @@ Currently sidebar supports level 1 and 2 sub menus.</p>
|
|||
</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 stable.</p>
|
||||
<h2 id="menu-configuration">Menu Configuration</h2>
|
||||
<p>All menu items are located inside <code>src/app/app.menu.ts</code> file. The file contain a list of Menu Item objects with the following fields:</p>
|
||||
<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 fields:</p>
|
||||
<pre><code class="lang-javascript"> {
|
||||
title: <span class="string">'Dashboard'</span>, <span class="comment">// menu item title</span>
|
||||
component: <span class="string">'Dashboard'</span>, <span class="comment">// component where the menu should lead, has a priority over url property</span>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ Same spinner you can see after reloading a page - it is shown while application
|
|||
This service globally integrated into the application and connected to the spinner.</p>
|
||||
<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 (resolved).</p>
|
||||
<p>You can find an example of usage inside of the <code>app.component.ts</code> file.
|
||||
Here we registering a loader (<code>this._imageLoader.load</code> just returns a <code>Promise</code>) which loads a background image:</p>
|
||||
Here we are registering a loader (<code>this._imageLoader.load</code> just returns a <code>Promise</code>) which loads a background 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>));
|
||||
</code></pre>
|
||||
<p>Then we are starting all the registered promises and once they all are done - hiding the spinner.</p>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
<div class="why-item"><img src="/ng2-admin/images/why-practices.svg">
|
||||
<h4>Ease for customization</h4>
|
||||
<p>Check out <a href="/blur-admin/articles/011-changing-color-scheme">our article</a>, where we describe how you can create different look in just 2 minutes!</p>
|
||||
<p>Check out <a href="/ng2-admin/articles/011-changing-color-scheme">our article</a>, where we describe how you can create different look in just 2 minutes!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
<h1>How can I support you guys?</h1>
|
||||
<p>Here's what you can do:</p>
|
||||
<ul>
|
||||
<li>Star <a href="https://github.com/akveo/blur-admin" target="_blank">our GitHub repo</a></li>
|
||||
<li>Star <a href="https://github.com/akveo/ng2-admin" target="_blank">our GitHub repo</a></li>
|
||||
<li>Create pull requests, submit bugs, suggest new features</li>
|
||||
<li>Follow <a href="https://twitter.com/akveo_inc" target="_blank">us on Twitter</a></li>
|
||||
<li>Like <a href="https://www.facebook.com/akveo/" target="_blank">our page on Facebook</a></li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue