diff --git a/docs/contents/articles/001-getting-started/index.md b/docs/contents/articles/001-getting-started/index.md index c5e46fa7..03ac77b0 100644 --- a/docs/contents/articles/001-getting-started/index.md +++ b/docs/contents/articles/001-getting-started/index.md @@ -8,7 +8,7 @@ template: article.jade ## What is ng2-admin? -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. ## How can it help me? diff --git a/docs/contents/articles/002-installation-guidelines/index.md b/docs/contents/articles/002-installation-guidelines/index.md index 4d137445..8ff28978 100644 --- a/docs/contents/articles/002-installation-guidelines/index.md +++ b/docs/contents/articles/002-installation-guidelines/index.md @@ -8,7 +8,7 @@ template: article.jade ## Prerequisites -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. ## Install tools @@ -66,6 +66,6 @@ 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 simple put in under some web 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](https://github.com/AngularClass/angular2-webpack-starter) diff --git a/docs/contents/articles/011-changing-color-scheme/index.md b/docs/contents/articles/011-changing-color-scheme/index.md index 7bcc5930..3c0856da 100644 --- a/docs/contents/articles/011-changing-color-scheme/index.md +++ b/docs/contents/articles/011-changing-color-scheme/index.md @@ -14,13 +14,14 @@ 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 `ng2`. +As we want a dark theme, we're taking `mint`. -1) Copy `src/app/theme/sass/conf/colorScheme/_mint.scss` to `src/app/theme/sass/conf/colorScheme/_dark.scss`. +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 ```scss @import 'colorSchemes/ng2'; ``` @@ -30,8 +31,9 @@ to ```scss @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 @@ -53,11 +55,12 @@ For example like this: 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: +For example, after playing a bit with different colors, we changed 2 first main variables in `_dark.scss` file: ```sass $body-bg: #636363; $bootstrap-panel-bg: rgba(#000000, 0.2); @@ -119,4 +122,4 @@ That's basically it! Right now your admin application should look like this: For further reference, please look in - Colorscheme scss file (`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 changed -- If you want to know how to change theme to blur, read [following article](/ng2-admin/articles/014-switch-to-blur-theme/) \ No newline at end of file +- If you want to know how to change theme to blur, read the [following article](/ng2-admin/articles/014-switch-to-blur-theme/) \ No newline at end of file diff --git a/docs/contents/articles/012-project-structure/index.md b/docs/contents/articles/012-project-structure/index.md index 9f101aa7..497358ab 100644 --- a/docs/contents/articles/012-project-structure/index.md +++ b/docs/contents/articles/012-project-structure/index.md @@ -6,7 +6,7 @@ group: Customization template: article.jade --- -Project structure was originally based on [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter#file-structure). We made some changes we thought would be better in our particular case. +Project structure is originally based on [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter#file-structure). We made some changes we thought would be better in our particular case. The directory structure of this template is as follows: diff --git a/docs/contents/articles/013-create-new-page/index.md b/docs/contents/articles/013-create-new-page/index.md index 104d016e..98b763c4 100644 --- a/docs/contents/articles/013-create-new-page/index.md +++ b/docs/contents/articles/013-create-new-page/index.md @@ -6,63 +6,59 @@ group: Customization template: article.jade --- -Blur admin uses [Angular UI router](https://github.com/angular-ui/ui-router) for navigation. -That means to create new page you need to basically configure `ui-router` state. +ng2-admin uses [Angular Router](https://angular.io/docs/ts/latest/guide/router-deprecated.html) 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. ## Page creation example -0) Let's assume we want to create a blank page with title 'My New Page' +1) 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) Let's Create a new directory to contain our new page inside of `src/app/pages`. Let's call this directory `new`. +

-2) Then let's create blank angular module to contain our page called 'myNewPage.module.js' inside of `src/app/pages/myNewPage`: +3) Then let's create blank angular component to contain our page called 'new.component.module.js' inside of `src/app/pages/new`: ```javascript -(function () { - 'use strict'; +import {Component} from '@angular/core'; - angular.module('BlurAdmin.pages.myNewPage', []) - .config(routeConfig); +@Component({ + selector: 'new', + pipes: [], + providers: [], + styles: [], + template: `My page content here` +}) +export class New { - /** @ngInject */ - function routeConfig() { - + constructor() { } - -})(); +} ``` +This will create a simple Angular 2 component, for more detail please check out [official Angular 2 documentation](https://angular.io/docs/ts/latest/guide/displaying-data.html). +

-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: +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`: ```javascript -(function () { - 'use strict'; - - 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, - }, - }); +@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](http://localhost:3000/#/pages/new). +If you want to add a link to your page into Sidebar, please look at the [following article](/ng2-admin/articles/015-sidebar/). diff --git a/docs/contents/articles/014-switch-to-blur-theme/index.md b/docs/contents/articles/014-switch-to-blur-theme/index.md index 9462fea7..7f429b0e 100644 --- a/docs/contents/articles/014-switch-to-blur-theme/index.md +++ b/docs/contents/articles/014-switch-to-blur-theme/index.md @@ -13,9 +13,10 @@ That's why we need to tell the system that we want to use blur theme by specifyi ```javascript 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 in `src/app/theme/theme.config.ts`: ```javascript let colorScheme = { primary: '#209e91', @@ -57,6 +58,8 @@ 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`: @@ -78,5 +81,5 @@ Additionaly, if you would like to use some different background, replace the fol 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. \ No newline at end of file diff --git a/docs/contents/articles/015-sidebar/index.md b/docs/contents/articles/015-sidebar/index.md index 7704b6d9..c2be364b 100644 --- a/docs/contents/articles/015-sidebar/index.md +++ b/docs/contents/articles/015-sidebar/index.md @@ -7,7 +7,7 @@ template: article.jade --- 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. @@ -21,7 +21,7 @@ At the moment sidebar menu items configuration and Angular 2 Router should be co ## Menu Configuration -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: ```javascript { diff --git a/docs/contents/articles/016-spinner/index.md b/docs/contents/articles/016-spinner/index.md index bb873cd8..7bba04ed 100644 --- a/docs/contents/articles/016-spinner/index.md +++ b/docs/contents/articles/016-spinner/index.md @@ -17,7 +17,7 @@ This service globally integrated into the application and connected to the spinn 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: ```javascript BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'blur-bg-mobile.jpg')); ``` diff --git a/docs/templates/index.jade b/docs/templates/index.jade index 615c3836..fd3f8dc0 100644 --- a/docs/templates/index.jade +++ b/docs/templates/index.jade @@ -35,7 +35,7 @@ block content div.why-item img(src=contents.images['why-practices.svg'].url) h4 Ease for customization - p Check out #[a(href='/blur-admin/articles/011-changing-color-scheme') our article], where we describe how you can create different look in just 2 minutes! + p Check out #[a(href='/ng2-admin/articles/011-changing-color-scheme') our article], where we describe how you can create different look in just 2 minutes! div.index-block.black div.wrap h1 Is it free? @@ -46,7 +46,7 @@ block content h1 How can I support you guys? p Here's what you can do: ul - li Star #[a(href='https://github.com/akveo/blur-admin',target='_blank') our GitHub repo] + li Star #[a(href='https://github.com/akveo/ng2-admin',target='_blank') our GitHub repo] li Create pull requests, submit bugs, suggest new features li Follow #[a(href='https://twitter.com/akveo_inc',target='_blank') us on Twitter] li Like #[a(href='https://www.facebook.com/akveo/',target='_blank') our page on Facebook]