This will setup a working copy of ng2-admin on your local machine.
+Note: If you have any issues after the installation, additionally run the following:
+typings install && bower install
+To run a local copy in development mode, execute:
npm start
diff --git a/articles/011-changing-color-scheme/index.html b/articles/011-changing-color-scheme/index.html
index d88c53fc..5b964a87 100644
--- a/articles/011-changing-color-scheme/index.html
+++ b/articles/011-changing-color-scheme/index.html
@@ -5,7 +5,7 @@
- BlurAdmin documentation - Changing Color Scheme
+ ng2-admin documentation - Changing Color Scheme
diff --git a/articles/012-project-structure/index.html b/articles/012-project-structure/index.html
index 28c2ebd5..32cb5845 100644
--- a/articles/012-project-structure/index.html
+++ b/articles/012-project-structure/index.html
@@ -5,7 +5,7 @@
- BlurAdmin documentation - Project Structure
+ ng2-admin documentation - Project Structure
@@ -78,7 +78,7 @@
│ │ │
│ │ ├──app.loader.ts * requires initial css styles (most important for application loading stage)
│ │ │
- │ │ ├──app.menu.ts * sidebar menu configuration
+ │ │ ├──app.routes.ts * application routes and menu configuration
│ │ │
│ │ ├──app.state.ts * global application state for data exchange between components
│ │ │
diff --git a/articles/013-create-new-page/index.html b/articles/013-create-new-page/index.html
index c5ce675a..c7f41cbf 100644
--- a/articles/013-create-new-page/index.html
+++ b/articles/013-create-new-page/index.html
@@ -5,7 +5,7 @@
- BlurAdmin documentation - Create New Page
+ ng2-admin documentation - Create New Page
@@ -50,17 +50,16 @@
Create New Page
- 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.
-Basically any page is just a usual Angular 2 Component with some routes defined for it.
+ ng2-admin uses Angular 2 Component Router for navigation.
+We strongly recommend to follow pages 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.
Page creation example
-1) 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 a 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.
+
2) Let’s Create a new directory for our new page inside of src/app/pages. Let’s call the 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:
+3) Then let’s create a blank angular 2 component for our page called ‘new.component.ts’ inside of src/app/pages/new:
import {Component} from '@angular/core';
@Component({
@@ -78,21 +77,55 @@ If it doesn’t fit your needs please create a GitHub issue and tell us why. We
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
+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:
+// imports here
+// lets import our page
+import {New} from './new/new.component';
+
+
+//noinspection TypeScriptValidateTypes
+export const PagesRoutes:RouterConfig = [
{
- name: 'New',
- component: New,
- path: '/new',
+ path: 'pages',
+ component: Pages,
+ children: [
+ {
+ path: 'new', // path for our page
+ component: New, // component imported above
+ data: { // custom menu declaration
+ menu: {
+ title: 'New Page', // menu title
+ icon: 'ion-android-home', // menu icon
+ selected: false,
+ expanded: false,
+ order: 0
+ }
+ }
+ },
+
+
+ {
+ path: 'dashboard',
+ component: Dashboard,
+ data: {
+ menu: {
+ title: 'Dashboard',
+ icon: 'ion-android-home',
+ selected: false,
+ expanded: false,
+ order: 0
+ }
+ }
+ }
+ // rest of the routes
+ ]
}
-])
-export class Pages {
-}
+];
-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.
+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.
diff --git a/articles/014-switch-to-blur-theme/index.html b/articles/014-switch-to-blur-theme/index.html
index 81aa5ee7..32be1338 100644
--- a/articles/014-switch-to-blur-theme/index.html
+++ b/articles/014-switch-to-blur-theme/index.html
@@ -5,7 +5,7 @@
- BlurAdmin documentation - Enabling blur theme
+ ng2-admin documentation - Enabling blur theme
diff --git a/articles/015-sidebar/index.html b/articles/015-sidebar/index.html
index 1a96a8a0..754eeb3a 100644
--- a/articles/015-sidebar/index.html
+++ b/articles/015-sidebar/index.html
@@ -5,7 +5,7 @@
- BlurAdmin documentation - Sidebar
+ ng2-admin documentation - Sidebar
@@ -52,43 +52,80 @@
Sidebar
Sidebar is used to provide convenient way of navigation in the 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.
+That means sidebar is basically a singletone object.
Sidebar can be added to the page using BaSidebar component:
<ba-sidebar></ba-sidebar>
-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.
+The sidebar contains a <ba-menu></ba-menu> component which defines and renders application menu based on routes provided. Generally ba-menu component can be used separately from ba-sidebar.
+All menu items information defined inside the data properly of a route.
Menu Configuration
-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:
+All menu items are located inside src/app/app.routes.ts file. Each route item can have a menu property under data defining a menu item:
{
- title: 'Dashboard', // menu item title
- component: 'Dashboard', // component where the menu should lead, has a priority over url property
- url: 'http://google.com' // manual url address (used only when component is not specified)
- icon: 'ion-android-home', // icon class
- target: '_blank', // link target attribute (used only when url is specified)
- selected: false, // is item selected
- expanded: false, // is item expanded (used only when subItems list specified)
- order: 0 // order in a list
+ // first, router configuration
+ path: 'dashboard',
+ component: Dashboard,
+ data: {
+ // here additionaly we difine how the menu item should look like
+ menu: {
+ title: 'Dashboard', // menu title
+ icon: 'ion-android-home', // menu icon
+ selected: false, // selected or not
+ expanded: false, // expanded or not (if item has children)
+ order: 0 // and item order in the menu list
+ }
+ }
}
You also can define a list of sub-menu items like this:
{
- title: 'Charts',
- component: 'Charts',
- icon: 'ion-stats-bars',
- selected: false,
- expanded: false,
- order: 200,
- subMenu: [ // list of sub-menu items
+ // parent route
+ path: 'charts',
+ component: Charts,
+ data: {
+
+ // parent menu configuration
+ menu: {
+ title: 'Charts',
+ icon: 'ion-stats-bars',
+ selected: false,
+ expanded: false,
+ order: 200,
+ }
+ },
+
+ // children routes
+ children: [
{
- title: 'Chartist.Js', // sub-item title
- component: 'ChartistJs' // sum-item component
- },
+ path: 'chartist-js',
+ component: ChartistJs,
+ data: {
+
+ // children menu item configuration
+ menu: {
+ title: 'Chartist.Js',
+ }
+ }
+ }
]
}
-Routes configuration
-Routes configuration is specified in the Page Components according to Angular 2 Router specification. More information you can find here.
+Custom menu items
+You also can define a menu item not connected to any existing route in the application:
+ {
+ path: '', // just leave the path empty
+ data: {
+
+ // and define your menu item
+ menu: {
+ title: 'External Link', // title
+ url: 'http://akveo.com', // custom url
+ icon: 'ion-android-exit', // icon
+ order: 800, // order
+ target: '_blank' // target property of <a> tag (_self, _blank, etc)
+ }
+ }
+ }
+
diff --git a/articles/016-spinner/index.html b/articles/016-spinner/index.html
index b6154ef6..9d7158f0 100644
--- a/articles/016-spinner/index.html
+++ b/articles/016-spinner/index.html
@@ -5,7 +5,7 @@
- BlurAdmin documentation - Theme Spinner
+ ng2-admin documentation - Theme Spinner