contact me

You can simply update a few variables to change the default settings.

Open "./client/app/core/app.config.js" file, you'll find following code. You can change the value to update default settings.

 var main = {
    brand: 'Material',
    name: 'Lisa',
    year: year,
    layout: 'wide',                                 // 'boxed', 'wide'
    menu: 'vertical',                               // 'horizontal', 'vertical'
    isMenuCollapsed: true,                          // true, false
    fixedHeader: true,                              // true, false
    fixedSidebar: true,                             // true, false
    pageTransition: pageTransitionOpts[0],          // 0, 1, 2, 3... and build your own
    skin: '12'                                      // 11,12,13,14,15,16; 21,22,23,24,25,26; 31,32,33,34,35,36
};                                   

For example you want to set "boxed" layout as default, then you can update code like so:

 var main = {
    brand: 'Material',
    name: 'Lisa',
    year: year,
    layout: 'boxed',                                // 'boxed', 'wide'
    menu: 'vertical',                               // 'horizontal', 'vertical', 'collapsed'
    fixedHeader: true,                              // true, false
    fixedSidebar: true,                             // true, false
    pageTransition: pageTransitionOpts[0],          // 0, 1, 2, 3... and build your own
    skin: '12'                                      // 11,12,13,14,15,16; 21,22,23,24,25,26; 31,32,33,34,35,36
};                                       

Done and enjoy :)

To add a new page, you need to do following things:

  1. Add a new HTML page
  2. Add a new route
  3. Add a new sidebar item

Let me use a example to explain this:

Say we want to add a test page with route "http://mydomain.com/index.html#/form/test"

1 Add a new HTML page

Go to ./client/app/form folder, create a "test.html" file

2 Add a new route

Open ./client/app/core/config.route.js file, add your routes to routes variable, in this case 'form/test'

3 Add a new sidebar item

Open ./client/app/layout/sidebar.html file, add your own menu item to it, in this case, it's:

<li><a md-button aria-label="meanu" href="#/form/test"><i class="fa fa-circle"></i><span>Test</span></a></li>

Done :)

Additionally, if you want to add some extra functionalities, you also need to create an angular controller for the page

The admin template is built with AngularJS, to communicate with back end you can use Angular service like $http or $resource

By the way, the admin template is font-end only, it takes no assumption on what kinds of back-end you use, that is, it works with any back-end language you use, Ruby, PHP, NodeJS, Python, Java etc.

By default Bootstrap Glyphicons is disabled to make the admin template a bit light weight, since there are already two fonts loaded, font-awsome and material icons.

Enable Bootstrap Glyphicons is easy, you just need to:

1 Enable Bootstrap Glyphicons in Bootstrap.

Open ./client/styles/bootstrap/_bootstrap.scss

You will see following code:

// @import "bootstrap/glyphicons";

Uncomment it:

@import "bootstrap/glyphicons";

2 Recompile the stylesheet with gulp task

$ gulp serve

Done :)