Documentation

Color Admin

“Angular 1.X Version” Documentation by “Sean Ngu” v5.5.2

1.X

Updated on: 08/July/2025
By: Sean Ngu

If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to send us a message through Wrapbootstrap. We are more than happy to help.

Thank you very 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.

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

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

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

<!-- begin #content -->
<div id="content" view-content class="app-content" ng-class="setting.layout.appContentClass" ui-view>
</div>
<!-- end #content -->

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

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

<!-- BEGIN scroll-top-btn -->
<a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top" data-toggle="scroll-to-top"><i class="fa fa-angle-up"></i></a>
<!-- END scroll-top-btn -->

C) Page Head - top

Page head contains metadata, javascript and css files:

<!DOCTYPE html>
<html lang="en" ng-app="colorAdminApp">
<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 core-css ================== -->
  <link href="../assets/css/vendor.min.css" rel="stylesheet" />
  <link href="../assets/css/default/app.min.css" rel="stylesheet" />
  <!-- ================== END core-css ================== -->
  
  <!-- ================== BEGIN page-css ================== -->
  <script src="../assets/plugins/angular/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 page-css ================== -->
</head>
<body ng-controller="appController" ng-class="{'pace-top': setting.layout.paceTop, 'boxed-layout': setting.layout.appBoxedLayout, 'bg-white': setting.layout.pageBgWhite }">

D) Top Menu - top

<!-- BEGIN #header -->
<div id="header" class="app-header" ng-controller="headerController" ng-attr-data-bs-theme="{{setting.layout.appSidebarLight ? 'dark' : 'light'}}">>
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-end-mobile" 
      ng-if="setting.layout.appSidebarTwo">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a ui-sref="app.dashboard.v1" class="navbar-brand">
      <span class="navbar-logo"></span> 
      <b>Color</b> Admin
    </a>
    <button type="button" class="navbar-mobile-toggler" ng-if="setting.layout.appMegaMenu" 
      data-bs-toggle="collapse" data-bs-target="#top-navbar">
      <span class="fa-stack fa-lg">
        <i class="far fa-square fa-stack-2x"></i>
        <i class="fa fa-cog fa-stack-1x mt-1px"></i>
      </span>
    </button>
    <button type="button" class="navbar-mobile-toggler" ng-if="setting.layout.appTopMenu" 
      data-toggle="app-top-menu-mobile">
      <span class="fa-stack fa-lg">
        <i class="far fa-square fa-stack-2x"></i>
        <i class="fa fa-cog fa-stack-1x mt-1px"></i>
      </span>
    </button>
    <button type="button" class="navbar-mobile-toggler" ng-if="!setting.layout.appSidebarNone" 
      data-toggle="app-sidebar-mobile">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <!-- END navbar-header -->
  
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <!-- BEGIN navbar-collapse -->
    <div class="collapse navbar-collapse" id="top-navbar" ng-if="setting.layout.appHeaderMegaMenu">
      <div ng-include src="'template/header-mega-menu.html'"></div>
    </div>
    <!-- end navbar-collapse -->
    <div class="navbar-item navbar-form">
      <form action="" method="POST" name="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Enter keyword" />
          <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
        </div>
      </form>
    </div>
    ...
    <div class="navbar-item dropdown" ng-if="setting.layout.appHeaderLanguageBar">
      <a href="#" class="navbar-link dropdown-toggle" data-bs-toggle="dropdown">
        <span class="flag-icon flag-icon-us" title="us"></span>
        <span class="d-none d-sm-inline ms-1">EN</span> <b class="caret"></b>
      </a>
      <div class="dropdown-menu dropdown-menu-end">
        ...
      </div>
    </div>
    <div class="navbar-item navbar-user dropdown">
      <a href="#" class="navbar-link dropdown-toggle d-flex align-items-center" 
        data-bs-toggle="dropdown">
        <img src="../assets/img/user/user-13.jpg" alt="" /> 
        <span>
          <span class="d-none d-md-inline">Adam Schwartz</span>
          <b class="caret"></b>
        </span>
      </a>
      <div class="dropdown-menu dropdown-menu-end me-1">
        ...
      </div>
    </div>
    <div class="navbar-divider d-none d-md-block" ng-if="setting.layout.appSidebarTwo"></div>
    <div class="navbar-item d-none d-md-block" ng-if="setting.layout.appSidebarTwo">
      <a href="javascript:;" data-toggle="app-sidebar-end" class="navbar-link icon">
        <i class="fa fa-th"></i>
      </a>
    </div>
  </div>
  <!-- END header-nav -->
</div>
<!-- END #header -->

E) Sidebar - top

<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar" 
  ng-controller="sidebarController" 
  ng-class="{ 'app-sidebar-transparent': setting.layout.appSidebarTransparent }"
  ng-attr-data-bs-theme="{{!setting.layout.appSidebarLight ? 'dark' : 'light'}}">
  <!-- BEGIN scrollbar -->
  <div class="app-sidebar-content" data-scrollbar="true" data-height="100%">
    <!-- BEGIN menu -->
    <div class="menu">
      <div class="menu-header">Navigation</div>
      <div class="menu-item has-sub" ng-class="{active:$state.includes('app.dashboard')}">
        <a class="menu-link" href="javascript:;">
          <div class="menu-icon"><i class="fa fa-th-large"></i></div>
          <div class="menu-text">Dashboard</div>
          <div class="menu-caret"></div>
        </a>
        <div class="menu-submenu">
          <div class="menu-item" ui-sref-active="active">
            <a class="menu-link" ui-sref="app.dashboard.v1"><
              div class="menu-text">Dashboard v1</div>
            </a>
          </div>
        </div>
      </div>
      
      <!-- BEGIN minify-button -->
      <div class="menu-item d-flex">
        <a href="javascript:;" class="app-sidebar-minify-btn ms-auto" data-toggle="app-sidebar-minify">
          <i class="fa fa-angle-double-left"></i>
        </a>
      </div>
      <!-- END minify-button -->
    </div>
    <!-- end sidebar nav -->
  </div>
  <!-- END scrollbar -->
</div>
<div class="app-sidebar-bg" ng-attr-data-bs-theme="{{!setting.layout.appSidebarLight ? 'dark' : 'light'}}"></div>
<div class="app-sidebar-mobile-backdrop"><a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"></a></div>
<!-- END #sidebar -->

F) 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="app-content" ng-class="setting.layout.appContentClass" ui-view>
</div>
<!-- end #content -->

G) End of Page (Javascript) - top

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

  <!-- ================== BEGIN core-js ================== -->
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script src="../assets/js/vendor.min.js"></script>
  <script src="../assets/js/app.min.js"></script>
  <!-- ================== END core-js ================== -->
  
  <!-- ================== BEGIN page-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-js ================== -->
</body>
</html>

H) Page Options - top

Here is the general option for the each case of page options. You may set the option in controller or change it from angular-setting.js to make it affected globally.

Option List

colorAdminApp.controller('dashboardController', function($scope, $rootScope, $state) {
  $rootScope.setting.layout.paceTop = false;
  $rootScope.setting.layout.appClass = '';
  $rootScope.setting.layout.appBoxedLayout = false;
  $rootScope.setting.layout.appTopMenu = false;
  $rootScope.setting.layout.appSidebarMinified = false;
  $rootScope.setting.layout.appSidebarEnd = false;
  $rootScope.setting.layout.appSidebarTwo = false;
  $rootScope.setting.layout.appSidebarNone = false;
  $rootScope.setting.layout.appSidebarTransparent = false;
  $rootScope.setting.layout.appSidebarLight = false;
  $rootScope.setting.layout.appSidebarSearch = false;
  $rootScope.setting.layout.appHeaderMegaMenu = false;
  $rootScope.setting.layout.appHeaderLanguageBar = false;
  $rootScope.setting.layout.appHeaderNone = false;
  $rootScope.setting.layout.appContentFullHeight = false;
  $rootScope.setting.layout.appContentClass = '';
  $rootScope.setting.layout.appFooterFixed = false;
});

I) Dark Mode - top

Add the data-bs-theme="dark" attribute to <html> in template_angularjs/index.html order to enable the dark mode.

If you have pre-select the dark-mode option in theme panel, do not forget to clear the browser cookie or remove the theme panel so that it won't affect the dark-mode class while page load. 
<html lang="en" data-bs-theme="dark">

J) RTL Mode - top

Add the dir="rtl" attribute to <html> in order to enable Right-To-Left (RTL) layout direction.

<html lang="en" dir="rtl">

This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.

K) Switch Design - top

Apple Design

  1. Change the base css file from default to apple in template_angularjs/index.html.
    <link href="../assets/css/apple/app.min.css" rel="stylesheet" />
<script src="../assets/plugins/ionicons/dist/ionicons/ionicons.js"></script>
  2. Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
    <div class="menu-icon">
  <ion-icon name="pulse-outline" class="bg-gradient-blue"></ion-icon>
</div>

Facebook Design

  1. Change the base css file from default to facebook in template_angularjs/index.html.
    <link href="../assets/css/facebook/app.min.css" rel="stylesheet" />
  2. Add the attribute data-bs-theme="dark" to the .app-header container in template_angularjs/template/header.html.
    <div id="header" class="app-header" data-bs-theme="dark">
  ...
</div>

Transparent Design

  1. Change the base css file from default to facebook in template_angularjs/index.html.
    <link href="../assets/css/transparent/app.min.css" rel="stylesheet" />
  2. Add the .app-cover next to the <body> tag in template_angularjs/index.html.
    <body>
  <!-- BEGIN page-cover -->
  <div class="app-cover"></div>
  <!-- END page-cover -->
  
  ...
</body>

Google Design

  1. Change the base css file from default to facebook in template_angularjs/index.html.
    <link href="../assets/css/google/app.min.css" rel="stylesheet" />
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Add the class .app-with-wide-sidebar to the .app container in template_angularjs/index.html.
    <div id="app" class="app app-header-fixed app-sidebar-fixed app-with-wide-sidebar">
  ...
</div>
  4. Add the navbar desktop toggler to the .app-header in template_angularjs/template/header.html.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler" data-toggle="app-sidebar-minify">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      ...
    </button>
    <a href="index.html" class="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Material Design

  1. Change the base css file from default to material in template_angularjs/index.html.
    <link href="../assets/css/material/app.min.css" rel="stylesheet" />
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Add the class .app-with-wide-sidebar to the .app container in template_angularjs/index.html.
    <div id="app" class="app app-header-fixed app-sidebar-fixed app-with-wide-sidebar">
  ...
</div>
  4. Add the navbar desktop toggler to the .app-header in template_angularjs/template/header.html.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler" data-toggle="app-sidebar-minify">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      ...
    </button>
    <a href="index.html" class="navbar-brand">
      Color Admin Material
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>
  5. Add the floating navbar form to the .app-header in template_angularjs/template/header.html AND REMOVE the default .navbar-form.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <div class="navbar-item">
      <a href="#" data-toggle="app-header-floating-form" class="navbar-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- REMOVE IT -->
      <div class="navbar-item navbar-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="navbar-floating-form">
    <button class="search-btn" type="submit"><i class="material-icons">search</i></button>
    <input type="text" class="form-control" placeholder="Search Something..." />
    <a href="#" class="close" data-dismiss="app-header-floating-form">
      <i class="material-icons">close</i>
    </a>
  </div>
</div>
  6. Change the .app-loader in template_angularjs/index.html.
    <!-- BEGIN #loader -->
<div id="loader" class="app-loader">
  <div class="material-loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
    </svg>
    <div class="message">Loading...</div>
  </div>
</div>
<!-- END #loader -->