Ease for customization
-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 different look in just 2 minutes!
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.
+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.
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.
diff --git a/articles/002-installation-guidelines/index.html b/articles/002-installation-guidelines/index.html index 42f012c2..7fce42ac 100644 --- a/articles/002-installation-guidelines/index.html +++ b/articles/002-installation-guidelines/index.html @@ -51,7 +51,7 @@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.
+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.
If you don’t have any of these tools installed already, you will need to:
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 simple put in under some web server.
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
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 ng2.
1) Copy src/app/theme/sass/conf/colorScheme/_mint.scss to src/app/theme/sass/conf/colorScheme/_dark.scss.
mint.
+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
+To do this, replace
@import 'colorSchemes/ng2';
to
@import 'colorSchemes/dark';
3) Rename the color scheme enabled
+3) Rename the color scheme enabled:
Open src/app/theme/theme.config.ts.
Uncomment the following line
//this._baConfig.changeTheme({name: 'my-theme'});
@@ -79,9 +81,10 @@ Uncomment the following line
background-color: white;
}
4) Change the colors
+4) Change the colors:
Now your can start changing the colors.
-For example, after playing a bit with different colors, we changed 5 first main variables in _dark.scss file:
_dark.scss file:
$body-bg: #636363;
$bootstrap-panel-bg: rgba(#000000, 0.2);
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 was originally based on Angular2 Webpack Starter. We made some changes we thought would be better in our particular case.
+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
diff --git a/articles/013-create-new-page/index.html b/articles/013-create-new-page/index.html
index e0d6decc..c5ce675a 100644
--- a/articles/013-create-new-page/index.html
+++ b/articles/013-create-new-page/index.html
@@ -50,53 +50,49 @@
Blur admin uses Angular UI router for navigation.
-That means to create new page you need to basically configure ui-router state.
ng2-admin uses Angular Router 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.
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.
-Also we recommend to put pages to separate modules. -This will allow you to easily switch off some pages in the future if needed.
+Basically any page is just a usual Angular 2 Component with some routes defined for it.
0) Let’s assume we want to create a blank page with title ‘My New Page’
-1) Let’s Create a new directory to contain our new page inside of src/app/pages. Let’s call this directory myNewPage.
2) Then let’s create blank angular module to contain our page called ‘myNewPage.module.js’ inside of src/app/pages/myNewPage:
(function () {
-;
+1) Let’s assume we want to create a blank page with title ‘My New Page’
+
+2) Let’s Create a new directory to contain our new page inside of src/app/pages. Let’s call this directory new.
+
+3) Then let’s create blank angular component to contain our page called ‘new.component.module.js’ inside of src/app/pages/new:
+import {Component} from '@angular/core';
- angular.module('BlurAdmin.pages.myNewPage', [])
- .config(routeConfig);
-
- /** @ngInject */
- function routeConfig() {
+@Component({
+ selector: 'new',
+ pipes: [],
+ providers: [],
+ styles: [],
+ template: `<strong>My page content here</strong>`
+})
+export class New {
+ constructor() {
}
-
-})();
+}
-3) Then let’s create empty html file called my-new-page.html inside of src/app/pages/myNewPage.
-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:
-(function () {
-;
-
- angular.module('BlurAdmin.pages.myNewPage', [])
- .config(routeConfig);
-
- /** @ngInject */
- function routeConfig($stateProvider) {
- $stateProvider
- .state('myNewPage', {
- url: '/myNewPage',
- templateUrl: 'app/pages/myNewPage/my-new-page.html',
- title: 'My New Page',
- sidebarMeta: {
- order: 800,
- },
- });
+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 in a parent component, in our case in Pages component src/app/pages/pages.component.ts:
+@RouteConfig([
+ // ... some routes here
+ {
+ name: 'New',
+ component: New,
+ path: '/new',
}
-
-})();
+])
+export class Pages {
+}
-That’s it! Your can now open your new page either from sidebar or through hash URL.
+
+And that’s it! now your page should be available by the following url http://localhost:3000/#/pages/new.
+If you want to add a link to your page into Sidebar, please look at the following article.
src/app/theme/theme.config.ts:
this._baConfig.changeTheme({name: 'blur'});
2) Also you need to change some colors. -For our blur theme we use following configuration:
+For our blur theme we use the following configuration insrc/app/theme/theme.config.ts:
let colorScheme = {
primary: '#209e91',
info: '#2dacd1',
@@ -97,6 +98,7 @@ For our blur theme we use following configuration:
},
});
3) CSS should also be recompiled.
Before running build command, switch to blur color profile.
To do so replace theme in src/app/theme/sass/conf/conf.scss:
src/app/theme/sass/conf/conf.scss:
src/assets/img/blur-bg-blurred.jpg (blurred background image used on panels)We suggest using 10px Gaussian blur to blur an original image.
-That’s it! You have successfully blurred your theme! Run npm start and check it out.
+That’s it! You have successfully blurred your theme! Run npm start and check it out.
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.
Sidebar can be added to the page using BaSidebar component:
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.
All menu items are located inside src/app/app.menu.ts file. The file contain a list of Menu Item objects with the following fields:
All menu items are located inside src/app/app.menu.ts file. The file contains a list of Menu Item objects with the following fields:
{
title: 'Dashboard', // menu item title
component: 'Dashboard', // component where the menu should lead, has a priority over url property
diff --git a/articles/016-spinner/index.html b/articles/016-spinner/index.html
index cb6da0cb..b6154ef6 100644
--- a/articles/016-spinner/index.html
+++ b/articles/016-spinner/index.html
@@ -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.
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 registering a loader (this._imageLoader.load just returns a Promise) which loads a background image:
+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'));
Then we are starting all the registered promises and once they all are done - hiding the spinner.
diff --git a/index.html b/index.html
index 04e5ce73..ea9d2da6 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@
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 different look in just 2 minutes!
Here's what you can do: