mirror of https://github.com/akveo/blur-admin
docs(newPage): add sample new page creation document
parent
5a88557ce6
commit
c69b40cbda
|
@ -0,0 +1,68 @@
|
||||||
|
---
|
||||||
|
title: Create New Page
|
||||||
|
author: vl
|
||||||
|
sort: 300
|
||||||
|
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.
|
||||||
|
|
||||||
|
We strongly recommend to follow pages structure in our 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.
|
||||||
|
|
||||||
|
## Page creation example
|
||||||
|
|
||||||
|
0) Let's assume we want to create a blank page with title 'My New Page'
|
||||||
|
|
||||||
|
1) Create new folder to contain `myNewPage` inside of `src/app/pages`. Let's call it `myNewPage` as well.
|
||||||
|
|
||||||
|
2) Then let's create blank angular module to contain our page called 'myNewPage.module.js' inside of `src/app/pages/myNewPage`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('BlurAdmin.pages.myNewPage', [])
|
||||||
|
.config(routeConfig);
|
||||||
|
|
||||||
|
/** @ngInject */
|
||||||
|
function routeConfig($stateProvider) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
```
|
||||||
|
|
||||||
|
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 :
|
||||||
|
```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,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
```
|
||||||
|
|
||||||
|
That's it! Your can now open your new page either from sidebar or through hash URL.
|
||||||
|
|
Loading…
Reference in New Issue