jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

Update 2016-05-13T18:58:43.171Z

pull/217/head
Vladimir Lugovsky 2016-05-13 21:58:46 +03:00
parent 31c8cd9a87
commit 21c37aec1e
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
articles/013-create-new-page/index.html
View File

@ -49,13 +49,13 @@
<h1>Create New Page</h1>
<div class="subHeader"></div><p>Blur admin uses <a href="https://github.com/angular-ui/ui-router">Angular <span class="caps">UI</span> router</a> for navigation.
That means to create new page you need to basically configure <code>ui-router</code> state.</p>
<p>We strongly recommend to follow pages structure in our application.
<p>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&nbsp;discuss. </p>
<p>Also we recommend to put pages to separate modules.
This will allow you to easily switch off some pages in the future if&nbsp;needed.</p>
<h2 id="page-creation-example">Page creation&nbsp;example</h2>
<p>0) Let’s assume we want to create a blank page with title ‘My New&nbsp;Page’</p>
<p>1) Create new folder to contain <code>myNewPage</code> inside of <code>src/app/pages</code>. Let’s call it <code>myNewPage</code> as&nbsp;well.</p>
<p>1) Let’s Create a new directory to contain our new page inside of <code>src/app/pages</code>. Let’s call this directory <code>myNewPage</code>.</p>
<p>2) Then let’s create blank angular module to contain our page called ‘myNewPage.module.js’ inside of <code>src/app/pages/myNewPage</code>:</p>
<pre><code class="lang-javascript">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
<span class="meta"> 'use strict'</span>;
@ -64,14 +64,14 @@ This will allow you to easily switch off some pages in the future if&nbsp;needed
.config(routeConfig);
<span class="comment">/** @ngInject */</span>
<span class="function"><span class="keyword">function</span> <span class="title">routeConfig</span>(<span class="params">$stateProvider</span>) </span>{
<span class="function"><span class="keyword">function</span> <span class="title">routeConfig</span>(<span class="params"></span>) </span>{
}
})();
</code></pre>
<p>3) Then let’s create empty html file called <code>my-new-page.html</code> inside of <code>src/app/pages/myNewPage</code>.</p>
<p>4) Lastly let’s create ui router state for this page. To do this we need to modify&nbsp;:</p>
<p>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&nbsp;2:</p>
<pre><code class="lang-javascript">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
<span class="meta"> 'use strict'</span>;

24
articles/051-sidebar/index.html
View File

@ -47,15 +47,15 @@
</div>
<div class="inner-content">
<h1>Sidebar</h1>
<div class="subHeader"></div><p>Sidebar is used to provide convenient way of navigation in our application.
<div class="subHeader"></div><p>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&nbsp;menus.</p>
<p>Sidebar can be created using <code>baSidebar</code> directive:</p>
<pre><code class="lang-html"><span class="tag">&lt;<span class="name">ba-sidebar</span>&gt;</span><span class="tag">&lt;/<span class="name">ba-sidebar</span>&gt;</span>
</code></pre>
<p>For now it support only javascript configuration. And can be configured manually or via <code>ui-router</code> states.
They can be used either combined or one at a&nbsp;time.</p>
<p>For now it support only javascript configuration. Though it can be configured manually or via <code>ui-router</code> states.
This methods can be used either together or one at a&nbsp;time.</p>
<h2 id="manual-configuration">Manual&nbsp;configuration</h2>
<p>For manual configuration you need to use <code>baSidebarServiceProvider</code> provider in angular <a href="https://docs.angularjs.org/guide/module#configuration-blocks">configuration block</a>.
The provider has <code>addStaticItem</code> method, which receives menuItem object as an argument, which can have following&nbsp;properties:</p>
@ -78,7 +78,7 @@ The provider has <code>addStaticItem</code> method, which receives menuItem obje
<tr>
<td>icon</td>
<td>String</td>
<td>Icon (it’s class name) to be displayed near title</td>
<td>Icon (it’s a class name) to be displayed near title</td>
</tr>
<tr>
@ -108,12 +108,18 @@ The provider has <code>addStaticItem</code> method, which receives menuItem obje
</tbody>
</table>
<p>Sample manual&nbsp;configuration:</p>
<pre><code class="lang-javascript"> baSidebarServiceProvider.addStaticItem({
title: <span class="string">'Menu Level 1'</span>,
icon: <span class="string">'ion-ios-more'</span>
});
</code></pre>
<h2 id="route-configuration">Route&nbsp;configuration</h2>
<p>By default sidebar iterates through all <strong>ui-router</strong> states you defined in your application and looks for <code>sidebarMeta</code> property in them.
For each state with this property found sidebar element is&nbsp;created. </p>
<p>By default sidebar iterates through all <strong>ui-router</strong> states you defined in your application and searches for <code>sidebarMeta</code> object in them.
For each state, which has this property, sidebar element is&nbsp;created. </p>
<p>States are being grouped hierarchically.
That means if there’s parent abstract state for some state and they both have <code>sidebarMeta</code> property, it will be displayed as a sub item of that abstract state menu&nbsp;item. </p>
<p>Name of the item is taken from <code>state</code>‘s <code>title</code> property. Sample state configuration, which will be included in&nbsp;sidebar:</p>
That means if there’s a parent abstract state for some state and they both have <code>sidebarMeta</code> property, it will be displayed as a sub item of that abstract state’s menu&nbsp;item. </p>
<p>Name of the item is taken from <code>state</code>‘s <code>title</code> property. Sample state configuration, which will add an item to&nbsp;sidebar:</p>
<pre><code class="lang-javascript">$stateProvider
.state(<span class="string">'dashboard'</span>, {
url: <span class="string">'/dashboard'</span>,
@ -139,7 +145,7 @@ That means if there’s parent abstract state for some state and they both have
<tr>
<td>icon</td>
<td>String</td>
<td>Icon (it’s class name) to be displayed near title</td>
<td>Icon (it’s a class name) to be displayed near title</td>
</tr>
<tr>