mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-26 20:28:48 +01:00
Updates
This commit is contained in:
nixa
parent
d70c1f3bf5
commit
43257a6081
8 changed files with 59 additions and 40 deletions
|
|
@ -51,12 +51,17 @@
|
|||
<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 and 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 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 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>
|
||||
<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 unified color scheme, plus it based on a modern Angular 2 framework and has a flexible components-based structure.</p>
|
||||
<p>As well you can use ng2-admin for learning purposes of Angular 2.</p>
|
||||
<p>ng2-admin aims to bootstrap the development of your product and provide an
|
||||
ecosystem for building production-ready application or prototypes.</p>
|
||||
<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,
|
||||
plus it is based on a modern Angular 2 framework and has a flexible component based structure.</p>
|
||||
<p>You can also use ng2-admin for the purpose of learning Angular 2.</p>
|
||||
<h2 id="list-of-features">List of features</h2>
|
||||
<ul>
|
||||
<li>Responsive layout</li>
|
||||
|
|
@ -71,8 +76,9 @@
|
|||
<li>and many more!</li>
|
||||
</ul>
|
||||
<h2 id="i-want-to-start-developing-with-ng2-admin">I want to start developing with ng2-admin</h2>
|
||||
<p>Welcome abroad!</p>
|
||||
<p>You can start with <a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a>. There we describe how you can download and run the template on you local machine.</p>
|
||||
<p>Welcome aboard!</p>
|
||||
<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 machine.</p>
|
||||
<p>Good luck and have fun!</p>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,8 @@
|
|||
<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. In general following instructions allow you to run a local copy on your machine.</p>
|
||||
<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 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>
|
||||
|
|
@ -78,7 +79,7 @@
|
|||
<p>You will need to clone the source code of ng2-admin GitHub repository:</p>
|
||||
<pre><code class="lang-bash">git <span class="built_in">clone</span> https://github.com/akveo/ng2-admin.git
|
||||
</code></pre>
|
||||
<p>After repository is cloned, go inside of the repository directory and install dependencies:</p>
|
||||
<p>After the repository is cloned, go inside of the repository directory and install dependencies:</p>
|
||||
<pre><code class="lang-bash"><span class="built_in">cd</span> ng2-admin
|
||||
npm install
|
||||
</code></pre>
|
||||
|
|
@ -86,15 +87,18 @@ npm install
|
|||
<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 browser.</p>
|
||||
<p>To run the local copy in production mode and build the sources, execute:</p>
|
||||
<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 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>
|
||||
<p>This will clear up your dist folder (where release files are located), generate a release build and start the
|
||||
built-in server.
|
||||
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 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 documentation</a></p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -54,28 +54,30 @@
|
|||
<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.
|
||||
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>mint</code>.</p>
|
||||
<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
|
||||
dark <code>src/app/theme/sass/conf/colorScheme/_blue.scss</code>.
|
||||
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>:
|
||||
<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>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/ng2'</span>;
|
||||
</code></pre>
|
||||
<p>to</p>
|
||||
<p>with</p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/dark'</span>;
|
||||
</code></pre>
|
||||
<p><br><br></p>
|
||||
<p>3) Rename the color scheme enabled:</p>
|
||||
<p>3) Change 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>
|
||||
</code></pre>
|
||||
<p>and put you 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>});
|
||||
</code></pre>
|
||||
<p>Beside this notifies the system which scheme currently enabled, it also puts a css class to a main element of the page. Thus you can freely create theme-specific css selectors in you code without braking other themes’ styles.</p>
|
||||
<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’ styles.</p>
|
||||
<p>For example like this:</p>
|
||||
<pre><code class="lang-scss">. dark <span class="selector-class">.card-body</span> {
|
||||
<span class="attribute">background-color</span>: white;
|
||||
|
|
@ -83,12 +85,13 @@ Uncomment the following line</p>
|
|||
</code></pre>
|
||||
<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 2 first main variables in <code>_dark.scss</code> file:</p>
|
||||
<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>
|
||||
<pre><code class="lang-sass">$body-bg: #636363;
|
||||
$bootstrap-panel-bg: rgba(#000000, 0.2);
|
||||
</code></pre>
|
||||
<p>After this is done, you need to setup javascript to use <strong>same colors</strong>. These color are used for javascript charts and other components (maps, etc);
|
||||
<p>After this is done, you need to setup javascript to use the <strong>same colors</strong>. These colors
|
||||
are used for javascript charts and other components (maps, etc);
|
||||
Let’s completely change the <span class="caps">JS</span> colors to a new set.
|
||||
To do this, add the following code to the configuration block inside <code>src/app/theme/theme.config.ts</code>:</p>
|
||||
<pre><code class="lang-javascript"> <span class="keyword">let</span> colorScheme = {
|
||||
|
|
@ -131,7 +134,7 @@ To do this, add the following code to the configuration block inside <code>src/a
|
|||
},
|
||||
});
|
||||
</code></pre>
|
||||
<p>Here we defined a list of main colors <code>colorScheme</code> and then made light and dark version 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 charts.</p>
|
||||
<p>That’s basically it! Right now your admin application should look like this:</p>
|
||||
<p><img src="/ng2-admin/articles/011-changing-color-scheme/new-color-scheme.png" alt=""></p>
|
||||
|
|
@ -139,7 +142,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 the <a href="/ng2-admin/articles/014-switch-to-blur-theme/">following 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 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 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>
|
||||
<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 case.</p>
|
||||
<p>The directory structure of this template is as follows:</p>
|
||||
<pre><code>ng2-admin/
|
||||
├──config/ * build configuration
|
||||
|
|
@ -95,7 +95,9 @@
|
|||
├──typedoc.json * typescript documentation generator
|
||||
├──tsconfig.json * config that webpack uses for typescript
|
||||
└──package.json * what npm uses to manage it's dependencies
|
||||
</code></pre><p>In our template we tried to separate 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 don’t need.</p>
|
||||
</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
|
||||
don’t need.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
<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.html">Angular 2 Component Router</a> for navigation.</p>
|
||||
<p>We strongly recommend to follow pages 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 discuss. </p>
|
||||
<p>Basically any page is just a common Angular 2 Component with a route defined for it.</p>
|
||||
<h2 id="page-creation-example">Page creation example</h2>
|
||||
|
|
@ -75,10 +75,11 @@ If it does not fit your needs please create a GitHub issue and tell us why. We w
|
|||
}
|
||||
}
|
||||
</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>.
|
||||
<br><br></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>.
|
||||
Typically all pages are children for <code>/pages</code> routes and defined under <code>children</code> property of root <code>pages</code> route like this:</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>.
|
||||
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 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>;
|
||||
|
|
@ -124,8 +125,9 @@ Typically all pages are children for <code>/pages</code> routes and defined unde
|
|||
];
|
||||
</code></pre>
|
||||
<p><br><br></p>
|
||||
<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>.
|
||||
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>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -52,8 +52,8 @@
|
|||
<h1>Sidebar</h1>
|
||||
<div class="subHeader"></div><p>The sidebar provides a convenient way to navigate the application.
|
||||
Only one sidebar is supported per angular application.
|
||||
This means that sidebar is basically a singleton object.</p>
|
||||
<p>Sidebar can be added to the page using the <code>BaSidebar</code> component:</p>
|
||||
This means that the sidebar is basically a singleton object.</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"><<span class="name">ba-sidebar</span>></span><span class="tag"></<span class="name">ba-sidebar</span>></span>
|
||||
</code></pre>
|
||||
<p>The sidebar contains a <code><ba-menu></ba-menu></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>.
|
||||
|
|
|
|||
|
|
@ -50,12 +50,14 @@
|
|||
</div>
|
||||
<div class="inner-content">
|
||||
<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 executing some long-running tasks.
|
||||
Same spinner you can see after reloading a page - it is shown while application is initializing Anuglar 2 and loading charts and images.</p>
|
||||
<p>The usage interface in quite simple, there are two public methods: <code>show</code> and <code>hide</code>.</p>
|
||||
<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.
|
||||
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 images.</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>.
|
||||
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>
|
||||
This service is 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 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>));
|
||||
|
|
|
|||
|
|
@ -46,11 +46,11 @@
|
|||
</div>
|
||||
<div class="why-item"><img src="/ng2-admin/images/why-design.svg">
|
||||
<h4>Neat design</h4>
|
||||
<p>We have put a lot of efforts and carefully selected each color and font for this template!</p>
|
||||
<p>We have put a lot of effort and carefully selected each color and font for this template!</p>
|
||||
</div>
|
||||
<div class="why-item"><img src="/ng2-admin/images/why-practices.svg">
|
||||
<h4>Ease of customization</h4>
|
||||
<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>
|
||||
<p>Check out <a href="/ng2-admin/articles/011-changing-color-scheme">our article</a>, where we describe how you can create a different look in just 2 minutes!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue