mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
docs(routes): new docs for sidebar, new page and project structure
This commit is contained in:
nixa
parent
7152220b90
commit
6a7f51c904
4 changed files with 118 additions and 45 deletions
|
|
@ -57,7 +57,7 @@ npm install
|
|||
```
|
||||
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
|
||||
typings install && bower install
|
||||
```
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ ng2-admin/
|
|||
│ │ │
|
||||
│ │ ├──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
|
||||
│ │ │
|
||||
|
|
|
|||
|
|
@ -6,24 +6,23 @@ group: Customization
|
|||
template: article.jade
|
||||
---
|
||||
|
||||
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.
|
||||
ng2-admin uses [Angular 2 Component Router](https://angular.io/docs/ts/latest/guide/router.html) for navigation.
|
||||
|
||||
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
|
||||
|
||||
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>
|
||||
|
||||
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>
|
||||
|
||||
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
|
||||
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).
|
||||
<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
|
||||
@RouteConfig([
|
||||
// ... some routes here
|
||||
// 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 {
|
||||
}
|
||||
];
|
||||
|
||||
```
|
||||
<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).
|
||||
If you want to add a link to your page into Sidebar, please look at the [following article](/ng2-admin/articles/015-sidebar/).
|
||||
And that's it! Now your page is available by the following url [http://localhost:3000/#/pages/new](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.
|
||||
|
||||
|
|
|
|||
|
|
@ -9,50 +9,88 @@ template: article.jade
|
|||
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.
|
||||
|
||||
Sidebar can be added to the page using `BaSidebar` component:
|
||||
```html
|
||||
<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:
|
||||
|
||||
```javascript
|
||||
{
|
||||
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:
|
||||
```javascript
|
||||
{
|
||||
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',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
# 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue