Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(routes): new docs for sidebar, new page and project structure

Browse source
This commit is contained in:
nixa 2016-07-12 13:49:07 +03:00
parent 7152220b90
commit 6a7f51c904
4 changed files with 118 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/contents/articles/002-installation-guidelines/index.md
View file

@ -57,7 +57,7 @@ npm install
``` ```
This will setup a working copy of ng2-admin on your local machine. This will setup a working copy of ng2-admin on your local machine.
**Note**: If you have any issues after the installation please run the following command: **Note**: If you have any issues after the installation, additionally run the following:
```bash ```bash
typings install && bower install typings install && bower install
``` ```

2
docs/contents/articles/012-project-structure/index.md
View file

@ -37,7 +37,7 @@ ng2-admin/
│ │ │ │ │ │
│ │ ├──app.loader.ts * requires initial css styles (most important for application loading stage) │ │ ├──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 │ │ ├──app.state.ts * global application state for data exchange between components
│ │ │ │ │ │

71
docs/contents/articles/013-create-new-page/index.md
View file

@ -6,24 +6,23 @@ group: Customization
template: article.jade template: article.jade
--- ---
ng2-admin uses [Angular Router](https://angular.io/docs/ts/latest/guide/router-deprecated.html) for navigation. ng2-admin uses [Angular 2 Component Router](https://angular.io/docs/ts/latest/guide/router.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. 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. 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 usual Angular 2 Component with some routes defined for it. Basically any page is just a common Angular 2 Component with a route defined for it.
## Page creation example ## 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'
<br><br> <br><br>
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`.
<br><br> <br><br>
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`:
```javascript ```javascript
import {Component} from '@angular/core'; import {Component} from '@angular/core';
@ -44,21 +43,57 @@ export class New {
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). 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).
<br><br> <br><br>
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`: 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:
```javascript ```javascript
@RouteConfig([ // imports here
// ... some routes here // lets import our page
import {New} from './new/new.component';
//noinspection TypeScriptValidateTypes
export const PagesRoutes:RouterConfig = [
{ {
name: 'New', path: 'pages',
component: New, component: Pages,
path: '/new', 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
} }
]) }
export class Pages { },
}
{
path: 'dashboard',
component: Dashboard,
data: {
menu: {
title: 'Dashboard',
icon: 'ion-android-home',
selected: false,
expanded: false,
order: 0
}
}
}
// rest of the routes
]
}
];
``` ```
<br><br> <br><br>
And that's it! now your page should be available by the following url [http://localhost:3000/#/pages/new](http://localhost:3000/#/pages/new). And that's it! Now your page is 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/). 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.

76
docs/contents/articles/015-sidebar/index.md
View file

@ -9,50 +9,88 @@ template: article.jade
Sidebar is used to provide convenient way of navigation in the application. Sidebar is used to provide convenient way of navigation in the application.
Application supports only one sidebar per angular application. Application supports only one sidebar per angular application.
That means sidebar is basically a singletone object. 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: Sidebar can be added to the page using `BaSidebar` component:
```html ```html
<ba-sidebar></ba-sidebar> <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 ## 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:
```javascript ```javascript
{ {
title: 'Dashboard', // menu item title // first, router configuration
component: 'Dashboard', // component where the menu should lead, has a priority over url property path: 'dashboard',
url: 'http://google.com' // manual url address (used only when component is not specified) component: Dashboard,
icon: 'ion-android-home', // icon class data: {
target: '_blank', // link target attribute (used only when url is specified) // here additionaly we difine how the menu item should look like
selected: false, // is item selected menu: {
expanded: false, // is item expanded (used only when subItems list specified) title: 'Dashboard', // menu title
order: 0 // order in a list 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: You also can define a list of sub-menu items like this:
```javascript ```javascript
{ {
// parent route
path: 'charts',
component: Charts,
data: {
// parent menu configuration
menu: {
title: 'Charts', title: 'Charts',
component: 'Charts',
icon: 'ion-stats-bars', icon: 'ion-stats-bars',
selected: false, selected: false,
expanded: false, expanded: false,
order: 200, order: 200,
subMenu: [ // list of sub-menu items }
{
title: 'Chartist.Js', // sub-item title
component: 'ChartistJs' // sum-item component
}, },
// children routes
children: [
{
path: 'chartist-js',
component: ChartistJs,
data: {
// children menu item configuration
menu: {
title: 'Chartist.Js',
}
}
}
] ]
} }
``` ```
# Custom menu items
## Routes configuration You also can define a menu item not connected to any existing route in the application:
Routes configuration is specified in the Page Components according to Angular 2 Router specification. More information you can find [here](https://angular.io/docs/ts/latest/guide/router-deprecated.html). ```javascript
{
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)
}
}
}
```