1.X

Last Updated: 05/August/2019
By: Sean Ngu
Email: nguoksiong@live.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so much!

### A) File Structure - top

File structure overview for Angular JS 1.X Version

    template_angularjs/
    ├── angular-app.js
    ├── angular-controller.js
    ├── angular-directive.js
    ├── angular-setting.js
    ├── index.html
    ├── template/
    │   ├── app.html
    │   ├── header.html
    │   ├── sidebar-right.html
    │   ├── sidebar.html
    │   ├── theme-panel.html
    │   └── top-menu.html
    └── views/
        └── /* List of View Files Here */

### B) Page Structure - top

Below is the `/template/app.html` which include the, header, sidebar, right sidebar, top menu, page content and footer. You may remove the component if you are not using it.

    <!-- begin #header -->
    <div ng-include src="'template/header.html'"></div>
    <!-- end #header -->

    <!-- begin #top-menu -->
    <div ng-if="setting.layout.pageTopMenu">
      <div ng-include src="'template/top-menu.html'"></div>
    </div>
    <!-- end #top-menu -->

    <!-- begin #sidebar -->
    <div ng-if="setting.layout.pageWithoutSidebar === false">
      <div ng-include src="'template/sidebar.html'"></div>
    </div>
    <!-- end #sidebar -->

    <!-- begin #content -->
    <div id="content" view-content class="content" ng-class="{
      'content-full-width': setting.layout.pageContentFullWidth,
      'height-full': setting.layout.pageContentFullHeight,
      'content-inverse-mode': setting.layout.pageContentInverseMode
    }">
      <div ui-view ng-class="{ 'height-full': setting.layout.pageContentFullHeight }"></div>
    </div>
    <!-- end #content -->

    <!-- begin #footer -->
    <div ng-if="setting.layout.pageWithFooter">
      <div id="footer" class="footer">
        © 2019 Color Admin Responsive Admin Template - Sean Ngu All Rights Reserved
      </div>
    </div>
    <!-- end #footer -->

    <!-- begin #sidebar-right -->
    <div ng-if="setting.layout.pageTwoSidebar === true">
      <div ng-include src="'template/sidebar-right.html'"></div>
    </div>
    <!-- end #sidebar-right -->

    <!-- begin #theme-panel -->
    <div ng-include src="'template/theme-panel.html'"></div>
    <!-- end #theme-panel -->

    <!-- begin scroll to top btn -->
    <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
      data-click="scroll-top">
      <i class="fa fa-angle-up"></i>
    </a>
    <!-- end scroll to top btn -->

### C) Beginning of Page - top

Below code is used to detect the internet explorer for browser compatibility & styling setting usage.

    <!DOCTYPE html>
    <html lang="en" ng-app="colorAdminApp">

### D) Page Head - top

Page head contains metadata, javascript and css files:

    <head>
      <meta charset="utf-8" />
      <title data-ng-bind="'AngularJS | ' + $state.current.data.pageTitle">AngularJS</title>
      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
            name="viewport" />
      <meta content="" name="description" />
      <meta content="" name="author" />

      <!-- ================== BEGIN BASE CSS STYLE ================== -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
      <link href="../assets/css/default/app.min.css" rel="stylesheet" />
      <!-- ================== END BASE CSS STYLE ================== -->

      <!-- ================== BEGIN BASE ANGULAR JS ================== -->
      <script src="../assets/plugins/angularjs/angular.min.js"></script>
      <script src="../assets/plugins/angular-ui-router/release/angular-ui-router.min.js"></script>
      <script src="../assets/plugins/angular-ui-router/release/stateEvents.min.js"></script>
      <script src="../assets/plugins/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
      <script src="../assets/plugins/ocLazyLoad/dist/ocLazyLoad.min.js"></script>
      <!-- ================== END BASE ANGULAR JS ================== -->
    </head>

### E) Top Menu - top

    <!-- begin #header -->
    <div id="header" class="header navbar-default" ng-controller="headerController">
      <!-- begin navbar-header -->
      <div class="navbar-header">
        ...
      </div>
      <!-- end navbar-header -->

      <!-- begin navbar-collapse -->
      <div class="collapse navbar-collapse pull-left" id="top-navbar"
        ng-if="setting.layout.pageMegaMenu === true">
        ...
      </div>
      <!-- end navbar-collapse -->

      <!-- begin header-nav -->
      <ul class="navbar-nav navbar-right">
        ...
      </ul>
      <!-- end header navigation right -->
    </div>
    <!-- end #header -->

### F) Sidebar - top

    <!-- begin #sidebar -->
    <div id="sidebar" class="sidebar" ng-controller="sidebarController"
      ng-class="{ 'sidebar-transparent': setting.layout.pageSidebarTransparent }">
        <!-- begin sidebar scrollbar -->
        <div data-scrollbar="true" data-height="100%">
        <!-- begin sidebar nav -->
        <ul class="nav">
          <li class="nav-header">Navigation</li>
          <li class="has-sub" ng-class="{active:$state.includes('app.dashboard')}">
            <a href="javascript:;">
              <b class="caret"></b>
              <i class="fa fa-th-large"></i>
              <span>Dashboard</span>
            </a>
            <ul class="sub-menu">
              <li ui-sref-active="active"><a ui-sref="app.dashboard.v1">Dashboard v1</a></li>
              <li ui-sref-active="active"><a ui-sref="app.dashboard.v2">Dashboard v2</a></li>
            </ul>
          </li>
          ...
          <!-- begin sidebar minify button -->
          <li>
            <a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify">
              <i class="fa fa-angle-double-left"></i>
            </a>
          </li>
          <!-- end sidebar minify button -->
        </ul>
        <!-- end sidebar nav -->
      </div>
      <!-- end sidebar scrollbar -->
    </div>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->

### G) Page Content - top

Page content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below:

    <!-- begin #content -->
    <div id="content" view-content class="content" ng-class="{
      'content-full-width': setting.layout.pageContentFullWidth,
      'height-full': setting.layout.pageContentFullHeight,
      'content-inverse-mode': setting.layout.pageContentInverseMode
    }">
      <div ui-view ng-class="{ 'height-full': setting.layout.pageContentFullHeight }"></div>
    </div>
    <!-- end #content -->

### H) End of Page (Javascript) - top

Javascript files loaded in the end of page. This will reduce page load time.

      <!-- ================== BEGIN BASE JS ================== -->
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
      <script src="../assets/js/app.min.js"></script>
      <script src="../assets/js/theme/default.min.js"></script>
      <!-- ================== END BASE JS ================== -->

      <!-- ================== BEGIN PAGE LEVEL JS ================== -->
      <script src="angular-app.js"></script>
      <script src="angular-setting.js"></script>
      <script src="angular-controller.js"></script>
      <script src="angular-directive.js"></script>
      <!-- ================== END PAGE LEVEL JS ================== -->
    </body>
    </html>

### I) Page Options - top

Here is the general option for the each case of page options. You may set the option in controller

#### Option List

    colorAdminApp.controller('dashboardController', function($scope, $rootScope, $state) {
      $rootScope.setting.layout.pageSidebarMinified = false;
      $rootScope.setting.layout.pageFixedFooter = false;
      $rootScope.setting.layout.pageRightSidebar = false;
      $rootScope.setting.layout.pageTwoSidebar = false;
      $rootScope.setting.layout.pageTopMenu = false;
      $rootScope.setting.layout.pageBoxedLayout = false;
      $rootScope.setting.layout.pageWithoutSidebar = false;
      $rootScope.setting.layout.pageContentFullHeight = false;
      $rootScope.setting.layout.pageContentFullWidth = false;
      $rootScope.setting.layout.paceTop = false;
      $rootScope.setting.layout.pageLanguageBar = false;
      $rootScope.setting.layout.pageSidebarTransparent = false;
      $rootScope.setting.layout.pageWideSidebar = false;
      $rootScope.setting.layout.pageLightSidebar = false;
      $rootScope.setting.layout.pageWithFooter = false;
      $rootScope.setting.layout.pageMegaMenu = false;
      $rootScope.setting.layout.pageWithoutHeader = false;
      $rootScope.setting.layout.pageBgWhite = false;
      $rootScope.setting.layout.pageContentInverseMode = false;
    });