HOMER
AngularJS Responsive WebApp

Thank you for purchasing HOMER admin theme. If you have any questions about the template, please feel free to contact us via email: support@webapplayers.com.

Documentation created: 06/02/2015
Latest update: 26/07/2015
By: WebAppLayers Team

This documentation is focused on HOMER AngularJs version. It assumes a minimum knowledge of AngularJS framework and html/css/js language. It describe mainly files and structure in project.

Please note that this documentation is dedicated to the main element of the template. With each version, we will try to develop it.

But if you have any questions going beyond what is described here don't hesitate to write to us on support email. We would love to help.

support@webapplayers.com

Structure

Folders and files

File pack consists Homer_Full_Version, Homer_Seed_Project and Documentation folder. In Homer full/seed app folder, structure presents as below.

  1. Homer/
  2.     ├── app/
  3.     ├── bower_components/
  4.     ├── dist/
  5.     ├── node_modules/
  6.     ├── bower.json
  7.     ├── Gruntfile.js
  8.     ├── package.json

Source code of your app are located in app folder with structure:

  1. app/
  2.     ├── fonts/
  3.     ├── icons/
  4.     ├── images/
  5.     ├── less/
  6.     ├── scripts/
  7.     ├── styles/
  8.     ├── views/
  9.     ├── index.html
  10.     ├── favicon.ico

First run

Grunt environment

To run HOMER you will need a Node and Git instaled in your environment. If you don't have a node.js please go to this site http://nodejs.org and download and install proper version and for Git this site: http://git-scm.com/downloads.

Next you will need to install grunt 

  1.  
  2. npm install -g grunt-cli
  3.  

Next you will need to install bower 

  1.  
  2. npm install -g bower
  3.  

And after that go to Homer folder and run those commands to get all dependencies: *(in v.1.5 we include all bower packages) 

  1.  
  2. npm install
  3. bower install
  4.  

Grunt file is based on Yeoman angular generator with some changes. There are three main task that you can do:

  • grunt live to launch a browser sync server on your source files
  • grunt server to launch a server on your optimized application
  • grunt build to build an optimized version of your application in /dist

Layout structure

Main index file include only ui-view. Each state has own content layout that can be modified in /views/common/content.html file. Basic layout are created with few main elements:

  1. header top header.
  2. aside menu left sidebar navigation.
  3. ui-view main container for page elements.
  4. right-sidebar additional right sidebar.
  5. footer bottom footer.
page structure

Layout structure - file

This is example of basic (minimal version) layout structure. 

  1.  
  2. <!-- Header -->
  3. <div id="header" ng-include="'views/common/header.html'"></div>
  4.  
  5. <!-- Navigation -->
  6. <aside id="menu" ng-include="'views/common/navigation.html'"></aside>
  7.  
  8. <!-- Main Wrapper -->
  9. <div id="wrapper">
  10.  
  11.     <div ui-view ></div>
  12.  
  13.     <!-- Right sidebar -->
  14.     <div id="right-sidebar" ng-include="'views/common/right_sidebar.html'" class="sidebar-open" ng-show="rightSidebar"></div>
  15.  
  16.     <!-- Footer -->
  17.     <footer class="footer" ng-include="'views/common/footer.html'"></footer>
  18.  
  19. </div>
  20. </div>
  21. </div>
  22.  

Option - fixed sidebar

Fixed sidebar is a (left menu) sidebar that is sticked on screen.

To add fixed sidebar you need to add .fixed-sidebar class to body. 

  1.  
  2. <body class="fixed-sidebar" >
  3.  

Option - fixed navbar

Fixed navbar is a top navbar that is sticked on screen.

To add fixed sidebar you need to add .fixed-navbar class to body. 

  1.  
  2. <body class="fixed-navbar" >
  3.  

Layout structure - different version

Separation layout gives you ability to create and modify own layout structure for different pages. For example Dashboard has layout without special header while all views from Interface has special header with automatic breadcrumb. 

  1.  
  2. <!-- Header -->
  3. <div id="header" ng-include="'views/common/header.html'"></div>
  4.  
  5. <!-- Navigation -->
  6. <aside id="menu" ng-include="'views/common/navigation.html'"></aside>
  7.  
  8. <!-- Main Wrapper -->
  9. <div id="wrapper">
  10.     <div small-header class="normalheader transition animated fadeIn">
  11.         <div class="hpanel">
  12.             <div class="panel-body">
  13.                 <a ng-click="small()" href="">
  14.                     <div class="clip-header">
  15.                         <i class="fa fa-arrow-up"></i>
  16.                     </div>
  17.                 </a>
  18.  
  19.                 <div id="hbreadcrumb" class="pull-right m-t-lg">
  20.                     <ol class="hbreadcrumb breadcrumb">
  21.                         <li><a ui-sref="dashboard">Dashboard</a></li>
  22.                         <li ng-repeat="state in $state.$current.path" ng-switch="$last || !!state.abstract" ng-class="{active: $last}">
  23.                             <a ng-switch-when="false" href="#{{state.url.format($stateParams)}}">{{state.data.pageTitle}}</a>
  24.                             <span ng-switch-when="true">{{state.data.pageTitle}}</span>
  25.                         </li>
  26.                     </ol>
  27.                 </div>
  28.                 <h2 class="font-light m-b-xs">
  29.                     {{ $state.current.data.pageTitle }}
  30.                 </h2>
  31.                 <small>{{ $state.current.data.pageDesc }}</small>
  32.             </div>
  33.         </div>
  34.     </div>
  35.     <div class="content">
  36.         <div ui-view animate-panel></div>
  37.     </div>
  38.  
  39. </div>
  40.  

Page styles and script

head contains lins for all CSS files of theme and for all plugins. In your app you can choose only that file that you will use. All css files are in special comment <!-- bower:css --> this comment is required for task that will merge all files to one in build process. 

  1.  
  2. <!-- build:css(.) styles/vendor.css -->
  3. <!-- bower:css -->
  4. <link rel="stylesheet" href="bower_components/angular-notify/dist/angular-notify.min.css" />
  5. <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
  6. <link rel="stylesheet" href="bower_components/metisMenu/dist/metisMenu.css" />
  7. <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
  8. <link rel="stylesheet" href="bower_components/sweetalert/lib/sweet-alert.css" />
  9. <link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.min.css" />
  10. <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
  11. <link rel="stylesheet" href="bower_components/summernote/dist/summernote.css" />
  12. <link rel="stylesheet" href="bower_components/ng-grid/ng-grid.min.css" />
  13. <link rel="stylesheet" href="bower_components/angular-ui-tree/dist/angular-ui-tree.min.css" />
  14. <!-- endbower -->
  15. <!-- endbuild -->
  16.  
  17. <!-- build:css({.tmp,app}) styles/style.css -->
  18. <link rel="stylesheet" href="fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css" />
  19. <link rel="stylesheet" href="fonts/pe-icon-7-stroke/css/helper.css" />
  20. <link rel="stylesheet" href="styles/style.css">
  21. <!-- endbuild -->
  22.  

The same with scripts. All scripts in build process are combined into a single file 

  1.  
  2. <!-- build:js(.) scripts/vendor.js -->
  3. <script src="bower_components/jquery/dist/jquery.min.js"></script>
  4. <script src="bower_components/jquery-ui/ui/minified/jquery-ui.min.js"></script>
  5. <script src="bower_components/slimScroll/jquery.slimscroll.min.js"></script>
  6. <script src="bower_components/angular/angular.min.js"></script>
  7. <script src="bower_components/angular-animate/angular-animate.min.js"></script>
  8. <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
  9. <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
  10. <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  11. <script src="bower_components/jquery-flot/jquery.flot.js"></script>
  12. <script src="bower_components/jquery-flot/jquery.flot.resize.js"></script>
  13. <script src="bower_components/jquery-flot/jquery.flot.pie.js"></script>
  14. <script src="bower_components/flot.curvedlines/curvedLines.js"></script>
  15. <script src="bower_components/jquery.flot.spline/index.js"></script>
  16. <script src="bower_components/angular-flot/angular-flot.js"></script>
  17. <script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
  18. <script src="bower_components/sweetalert/lib/sweet-alert.js"></script>
  19. <script src="bower_components/iCheck/icheck.min.js"></script>
  20. <script src="bower_components/sparkline/index.js"></script>
  21. <script src="bower_components/chartjs/Chart.min.js"></script>
  22. <script src="bower_components/angles/angles.js"></script>
  23. <script src="bower_components/peity/jquery.peity.min.js"></script>
  24. <script src="bower_components/angular-peity/angular-peity.js"></script>
  25. <script src="bower_components/sweetalert/lib/sweet-alert.min.js"></script>
  26. <script src="bower_components/angular-notify/dist/angular-notify.min.js"></script>
  27. <script src="bower_components/chartjs/Chart.min.js"></script>
  28. <script src="bower_components/angles/angles.js"></script>
  29. <script src="bower_components/angular-ui-utils/ui-utils.js"></script>
  30. <script src="bower_components/angular-ui-map/ui-map.js"></script>
  31. <script src="bower_components/moment/min/moment.min.js"></script>
  32. <script src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
  33. <script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
  34. <script src="bower_components/summernote/dist/summernote.min.js"></script>
  35. <script src="bower_components/angular-summernote/dist/angular-summernote.min.js"></script>
  36. <script src="bower_components/ng-grid/ng-grid-2.0.14.min.js"></script>
  37. <script src="bower_components/angular-ui-tree/dist/angular-ui-tree.min.js"></script>
  38. <!-- endbuild -->
  39.  
  40. <!-- build:js({.tmp,app}) scripts/scripts.js -->
  41. <script src="scripts/homer.js"></script>
  42. <script src="scripts/app.js"></script>
  43. <script src="scripts/config.js"></script>
  44. <script src="scripts/directives.js"></script>
  45. <script src="scripts/filters.js"></script>
  46. <script src="scripts/controllers.js"></script>
  47. <script src="scripts/factories/sweet-alert.js"></script>
  48. <script src="scripts/controllers/alerts.js"></script>
  49. <script src="scripts/controllers/modal.js"></script>
  50. <script src="scripts/controllers/charts_flot.js"></script>
  51. <script src="scripts/controllers/chartjs.js"></script>
  52. <script src="scripts/controllers/inline.js"></script>
  53. <script src="scripts/controllers/clock.js"></script>
  54. <script src="scripts/controllers/timeline.js"></script>
  55. <script src="scripts/controllers/googleMap.js"></script>
  56. <script src="scripts/controllers/calendar.js"></script>
  57. <script src="scripts/controllers/editor.js"></script>
  58. <script src="scripts/controllers/forms.js"></script>
  59. <script src="scripts/controllers/grid.js"></script>
  60. <script src="scripts/controllers/list.js"></script>
  61. <!-- endbuild -->
  62.  

Main app.js file

App.js files include all external module for angular. Below is a preview of app.js in full version. 

  1.  
  2. (function () {
  3.     angular.module('homer', [
  4.         'ui.router',                // Angular flexible routing
  5.         'ui.bootstrap',             // AngularJS native directives for Bootstrap
  6.         'angular-flot',             // Flot chart
  7.         'angles',                   // Chart.js
  8.         'angular-peity',            // Peity (small) charts
  9.         'cgNotify',                 // Angular notify
  10.         'angles',                   // Angular ChartJS
  11.         'ngAnimate',                // Angular animations
  12.         'ui.map',                   // Ui Map for Google maps
  13.         'ui.calendar',              // UI Calendar
  14.         'summernote',               // Summernote plugin
  15.         'ngGrid',                   // Angular ng Grid
  16.         'ui.tree',                   // Angular ui Tree
  17.         'bm.bsTour',                // Angular bootstrap tour
  18.         'datatables',               // Angular datatables plugin
  19.         'xeditable',                // Angular-xeditable
  20.         'ui.select',                // AngularJS ui-select
  21.         'ui.sortable'               // AngularJS ui-sortable
  22.     ])
  23. })();
  24.  

Route config

To manage all route we use great plugin Ui.Router. AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Below you can see example of configuration ui-view. Configuration routing are in config.js file 

  1. function configState($stateProvider, $urlRouterProvider, $compileProvider) {
  2.  
  3.     // Optimize load start with remove binding information inside the DOM element
  4.     $compileProvider.debugInfoEnabled(true);
  5.  
  6.     // Set default state
  7.     $urlRouterProvider.otherwise("/dashboard");
  8.     $stateProvider
  9.  
  10.         // Dashboard - Main page
  11.         .state('dashboard', {
  12.             url: "/dashboard",
  13.             templateUrl: "views/dashboard.html",
  14.             data: {
  15.                 pageTitle: 'Dashboard',
  16.             }
  17.         })

Homer Seed Project

It is an application skeleton for a typical AngularJS web app with HOMER style. You can use it to quickly bootstrap your angular webapp projects. It has all necessary resources/files to help you started new project. As your project will grow you will need to add new resources. Look at the full version to select the elements and resources you want to use.

File structure for Seed Project are same as full version but without all additional plugins: 

  1. Homer/
  2.     ├── app/
  3.     ├── bower_components/
  4.     ├── dist/
  5.     ├── node_modules/
  6.     ├── bower.json
  7.     ├── Gruntfile.js
  8.     ├── package.json

Contact

If you have any question or find some issue feel free to contact with us on

support@webapplayers.com