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.
+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.
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.
-ng2-admin aims to bootstrap the development of your product and provide ecosystem for building production-ready application or prototypes.
-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 UI components with unified color scheme, plus it based on a modern Angular 2 framework and has a flexible components-based structure.
-As well you can use ng2-admin for learning purposes of Angular 2.
+ng2-admin aims to bootstrap the development of your product and provide an +ecosystem for building production-ready application or prototypes.
+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 UI components with a unified color scheme, +plus it is based on a modern Angular 2 framework and has a flexible component based structure.
+You can also use ng2-admin for the purpose of learning Angular 2.
Welcome abroad!
-You can start with Installation Guidelines. There we describe how you can download and run the template on you local machine.
+Welcome aboard!
+You can start with the Installation Guidelines. +There we describe how you can download and run the template on your local machine.
Good luck and have fun!
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.
+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.
If you don’t have any of these tools installed already, you will need to:
You will need to clone the source code of ng2-admin GitHub repository:
git clone https://github.com/akveo/ng2-admin.git
After repository is cloned, go inside of the repository directory and install dependencies:
+After the repository is cloned, go inside of the repository directory and install dependencies:
cd ng2-admin
npm install
## Running local copy
To run a local copy in development mode, execute:
+
```bash
npm start
Go to http://0.0.0.0:3000 or http://localhost:3000 in your browser.
To run the local copy in production mode and build the sources, execute:
npm run prebuild:prod && npm run build:prod && npm run server:prod
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 dist folder and use it with any backend framework or simply put it under some web server.
For addition information about build, please check out Angular2 Webpack Starter documentation
+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 dist folder and use it with any backend framework or
+simply put it under a web server.
For addition information about creating a build, please check out Angular2 Webpack Starter documentation
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.
-First we advice you to take some colorscheme file as a basis.
-For light themes we suggest taking src/app/theme/sass/conf/colorScheme/_mint.scss one and for dark src/app/theme/sass/conf/colorScheme/_blue.scss one.
-As we want a dark theme, we’re taking mint.
First we advise you to take some existing colorscheme file as a starting point.
+For light themes we suggest taking src/app/theme/sass/conf/colorScheme/_mint.scss and for
+dark src/app/theme/sass/conf/colorScheme/_blue.scss.
+As we want a dark theme, we’re taking blue.
1) Copy src/app/theme/sass/conf/colorScheme/_mint.scss to src/app/theme/sass/conf/colorScheme/_dark.scss:
2) Include your colorscheme file in src/app/theme/sass/conf/conf.scss.
To do this, replace
@import 'colorSchemes/ng2';
to
+with
@import 'colorSchemes/dark';
3) Rename the color scheme enabled:
+3) Change the color scheme enabled:
Open src/app/theme/theme.config.ts.
Uncomment the following line
//this._baConfig.changeTheme({name: 'my-theme'});
and put you theme name, in our case it is dark
and put your theme name, in our case it is dark
this._baConfig.changeTheme({name: 'dark'});
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.
+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.
For example like this:
. dark .card-body {
background-color: white;
@@ -83,12 +85,13 @@ Uncomment the following line
4) Change the colors:
-Now your can start changing the colors.
-For example, after playing a bit with different colors, we changed 2 first main variables in _dark.scss file:
Now you can start changing the colors.
+For example, after playing a bit with different colors, we changed the 2 first main variables in _dark.scss file:
$body-bg: #636363;
$bootstrap-panel-bg: rgba(#000000, 0.2);
After this is done, you need to setup javascript to use same colors. These color are used for javascript charts and other components (maps, etc); +
After this is done, you need to setup javascript to use the same colors. These colors
+are used for javascript charts and other components (maps, etc);
Let’s completely change the JS colors to a new set.
To do this, add the following code to the configuration block inside src/app/theme/theme.config.ts:
let colorScheme = {
@@ -131,7 +134,7 @@ To do this, add the following code to the configuration block inside src/a
},
});
Here we defined a list of main colors colorScheme and then made light and dark version of those using colorHelper methods.
+
Here we defined a list of main colors colorScheme and then made light and dark versions of those using colorHelper methods.
We also defined a couple of custom colors for dashboard charts.
That’s basically it! Right now your admin application should look like this:
src/app/theme/sass/conf/colorScheme/_ng2.scss, src/app/theme/sass/conf/colorScheme/_mint.scss and src/app/theme/sass/conf/colorScheme/_blur.scss)src/app/theme/theme.configProvider.js to understand which javascript colors can be changedProject structure is originally based on Angular2 Webpack Starter. We made some changes we thought would be better in our particular case.
+The project structure is originally based on Angular2 Webpack Starter. We made some changes we thought would be better in our particular case.
The directory structure of this template is as follows:
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
-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.
+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.
ng2-admin uses Angular 2 Component Router for navigation.
-We strongly recommend to follow pages structure in your application. +
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.
Basically any page is just a common Angular 2 Component with a route defined for it.
This will create a simple Angular 2 component, for more detail please check out official Angular 2 documentation. +
This will create a simple Angular 2 component. For more detail please check out official Angular 2 documentation.
4) Last thing we need to do is to define a Router configuration. Routes for pages are located inside of src/app/pages/pages.routes.ts.
-Typically all pages are children for /pages routes and defined under children property of root pages route like this:
4) The last thing we need to do is to define a Router configuration. Routes for pages are located
+inside of src/app/pages/pages.routing.ts.
+Typically all pages are children of the /pages route and defined under the children property of the root pages route like this:
// imports here
// lets import our page
import {New} from './new/new.component';
@@ -124,8 +125,9 @@ Typically all pages are children for /pages routes and defined unde
];
And that’s it! Now your page is available by the following url http://localhost:3000/#/pages/new.
-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 menu declaration under data property.
And that’s it! Now your page is available by the following this url http://localhost:3000/#/pages/new.
+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 menu declaration under the data property.
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.
-Sidebar can be added to the page using the BaSidebar component:
The Sidebar can be added to the page using the BaSidebar component:
<ba-sidebar></ba-sidebar>
The sidebar contains a <ba-menu></ba-menu> component which defines and renders the application menu based on routes provided. Generally the ba-menu component can be used separately from ba-sidebar.
diff --git a/articles/016-spinner/index.html b/articles/016-spinner/index.html
index 24661d91..6c0c2e38 100644
--- a/articles/016-spinner/index.html
+++ b/articles/016-spinner/index.html
@@ -50,12 +50,14 @@
Theme Spinner BaThemeSpinner 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.
The usage interface in quite simple, there are two public methods: show and hide.
Theme Spinner BaThemeSpinner 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.
The user interface in quite simple: there are two public methods: show and hide.
Theme Spinner comes with another small helper called BaThemePreloader.
-This service globally integrated into the application and connected to the spinner.
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).
+This service is globally integrated into the application and connected to the spinner. +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).
You can find an example of usage inside of the app.component.ts file.
Here we are registering a loader (this._imageLoader.load just returns a Promise) which loads a background image:
BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
diff --git a/index.html b/index.html
index f248751a..36e7e129 100644
--- a/index.html
+++ b/index.html
@@ -46,11 +46,11 @@
We have put a lot of efforts and carefully selected each color and font for this template!
+We have put a lot of effort and carefully selected each color and font for this template!
Check out our article, where we describe how you can create different look in just 2 minutes!
+Check out our article, where we describe how you can create a different look in just 2 minutes!