Adding a New Bootstrap Template

Preparation

• Copy the new code of the template as is and create a new folder for it under 'app/themes' - 'app/themes/example-template'
• Make a new copy of '/app/index.html' and name it 'index-example.html'
• Copy the 'Backand' folder under 'app/themes/AdminLTE-master' to 'app/theme//'

Main Index.html

• point to Backand main forms style: 'themes//backand/css/forms.css'
• add here all the style sheet(s) of the theme
• point to Backand theme main style css: 'themes//backand/css/app.css'
• add here all the javascript file(s) of the theme
• point to Backand main theme app.js that controls the controls and routes: 'themes//backand/js/app.js'
  • Update app.js to point to the partials files under Backand. e.g. templateUrl: 'themes//backand/partials/login/login.html'
  • If you need to add more pages, reference them here
• Update ng-include to the partial.html page:

<ng-include src="'themes/<example>/backand/partials/index/index.html'"></ng-include>

/partials/index/index.html

Update the ng-include files for the header, sidebar, menu and profile. Copy the content of the original index.html and relative parts to the include files. The main body of the template goes to index.html partial.

• partials/header.html - Include the upper top content of the template
• partials/sidebar.html - Include the menu and profile sections
  • partials/menu.html:
    • The top part is a dropdown with Backand's workspaces
    • For the pages do a repeater of pages and a nested repeater for sub-pages
  • partials/profile,html - Holds the name of the user and sometimes the logo
• Main content in index-.html
  • The main div or section of the content needs to add ng-view and class="ngback-container"
• Optional footer: there is no directive included for this

<!--Start Main Theme Body-->
    <section id="container">
        <!--header start-->
        <header ng-include="'themes/<example>/backand/partials/header/header.html'" class="header"></header>
        <!--header end-->
        <!--sidebar start-->
        <aside ng-include="'themes/<example>/backand/partials/sidebar/sidebar.html'"></aside>
        <!--sidebar end-->
        <!--main content start-->
        <section id="main-content">
            <section class="wrapper ngback-container" ng-view></section>
        </section>
        <!--main content end-->
        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                backand
                <a href="#" class="go-top">
                    <i class="fa fa-angle-up"></i>
                </a>
            </div>
        </footer>
        <!--footer end-->
    </section>
<!--End Main Theme Body-->

JavaScript modifications

• In the main JS file of the theme, replace the root function $function or $(document).ready with 'Init()' function. Add the following code to the end of the JS file:

$(function () {
    $(window).bind("appConfigCompleted", function (data) {
        <example>Init();
    });
});

• In the case of general initialization of HTML control e.g. $('#bar') = '' move the code to onready of Angular

function onready($scope) {
    angular.element(document).ready(function () {
    });
}

Backand Partials

• grids.html - Update the grid wrappers according to the original theme
• dashboard.html - Update the dashboard wrapper
• content.html - Update the content pages wrapper
• login.html - Login modal dialog
• forms.html - Edit and add form