diff --git a/articles/013-create-new-page/index.html b/articles/013-create-new-page/index.html index 69cb2d3..0c5ed98 100644 --- a/articles/013-create-new-page/index.html +++ b/articles/013-create-new-page/index.html @@ -49,13 +49,13 @@

Create New Page

Blur admin uses Angular 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. +

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.

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.

+

1) Let’s Create a new directory to contain our new page inside of src/app/pages. Let’s call this directory myNewPage.

2) Then let’s create blank angular module to contain our page called ‘myNewPage.module.js’ inside of src/app/pages/myNewPage:

(function () {
   'use strict';
@@ -64,14 +64,14 @@ This will allow you to easily switch off some pages in the future if needed
       .config(routeConfig);
 
   /** @ngInject */
-  function routeConfig($stateProvider) {
+  function routeConfig() {
 
   }
 
 })();

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 :

+

4) Lastly let’s create ui router state for this page. To do this we need to modify module.js file we created on step 2:

(function () {
   'use strict';
 
diff --git a/articles/051-sidebar/index.html b/articles/051-sidebar/index.html
index 95d8c70..8d27cd4 100644
--- a/articles/051-sidebar/index.html
+++ b/articles/051-sidebar/index.html
@@ -47,15 +47,15 @@
         
         

           
Sidebar

-          
Sidebar is used to provide convenient way of navigation in our application. 
+          
Sidebar is used to provide convenient way of navigation in the application. 
 Application support 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 created using baSidebar directive:

 
<ba-sidebar></ba-sidebar>
 

-
For now it support only javascript configuration. And can be configured manually or via ui-router states.
-They can be used either combined or one at a time.

+
For now it support only javascript configuration. Though it can be configured manually or via ui-router states.
+This methods can be used either together or one at a time.

 
Manual configuration

 
For manual configuration you need to use baSidebarServiceProvider provider in angular configuration block.
 The provider has addStaticItem method, which receives menuItem object as an argument, which can have following properties:

@@ -78,7 +78,7 @@ The provider has addStaticItem method, which receives menuItem obje
 
 icon
 String
-Icon (it’s class name) to be displayed near title
+Icon (it’s a class name) to be displayed near title
 
 
 
@@ -108,12 +108,18 @@ The provider has addStaticItem method, which receives menuItem obje
 
 
 
+
Sample manual configuration:

+
    baSidebarServiceProvider.addStaticItem({
+      title: 'Menu Level 1',
+      icon: 'ion-ios-more'
+    });
+

 
Route configuration

-
By default sidebar iterates through all ui-router states you defined in your application and looks for sidebarMeta property in them.
-For each state with this property found sidebar element is created. 

+
By default sidebar iterates through all ui-router states you defined in your application and searches for sidebarMeta object in them.
+For each state, which has this property, sidebar element is created. 

 
States are being grouped hierarchically. 
-That means if there’s parent abstract state for some state and they both have sidebarMeta property, it will be displayed as a sub item of that abstract state menu item.  

-
Name of the item is taken from state‘s title property. Sample state configuration, which will be included in sidebar:

+That means if there’s a parent abstract state for some state and they both have sidebarMeta property, it will be displayed as a sub item of that abstract state’s menu item.  

+
Name of the item is taken from state‘s title property. Sample state configuration, which will add an item to sidebar:

 
$stateProvider
         .state('dashboard', {
           url: '/dashboard',
@@ -139,7 +145,7 @@ That means if there’s parent abstract state for some state and they both have
 
 icon
 String
-Icon (it’s class name) to be displayed near title
+Icon (it’s a class name) to be displayed near title