“Angular 1.X Version” Documentation by “Sean Ngu” v5.3.3
Last Updated: 28/March/2024
By: Sean Ngu
If you have any questions that are beyond the scope of this help file, please feel free to inbox me your question or send me an email via support email. Thanks so much!
* Support email can be found via downloaded version of 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.
<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 -->
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 }">
<!-- 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 -->
<!-- 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 -->
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 -->
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>
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.
colorAdminApp.controller('dashboardController', function($scope, $rootScope, $state) { $rootScope.setting.layout.paceTop = false; $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; });
Add the data-bs-theme="dark"
attribute to <html>
in template_angularjs/index.html
order to enable the dark mode.
<html lang="en" data-bs-theme="dark">
template_angularjs/index.html
.<link href="../assets/css/apple/app.min.css" rel="stylesheet" /> <link href="../assets/plugins/ionicons/css/ionicons.min.css" rel="stylesheet" />
<div class="menu-icon"> <i class="ion-ios-pulse bg-gradient-blue"></i> </div>
template_angularjs/index.html
.<link href="../assets/css/facebook/app.min.css" rel="stylesheet" />
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>
template_angularjs/index.html
.<link href="../assets/css/transparent/app.min.css" rel="stylesheet" />
.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>
template_angularjs/index.html
.<link href="../assets/css/google/app.min.css" rel="stylesheet" />
<div class="menu-icon"> <i class="material-icons">home</i> </div>
.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>
.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>
template_angularjs/index.html
.<link href="../assets/css/material/app.min.css" rel="stylesheet" />
<div class="menu-icon"> <i class="material-icons">home</i> </div>
.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>
.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>
.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>
.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 -->