Documentation - Color Admin

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 */

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">
    © 2020 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 -->

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

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

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>

<!-- 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 -->

<!-- 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 -->

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 -->

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>

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;
  $rootScope.setting.layout.pageSidebarSearch = false;
});

Color Admin

A) File Structure - top

B) Page Structure - top

C) Beginning of Page - top

D) Page Head - top

E) Top Menu - top

F) Sidebar - top

G) Page Content - top

H) End of Page (Javascript) - top

I) Page Options - top

Option List