docs(newPage): add sample new page creation document

pull/46/head
Vladimir Lugovsky 2016-05-13 21:40:45 +03:00
parent 5a88557ce6
commit c69b40cbda
1 changed files with 68 additions and 0 deletions

View File

@ -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.