Xenon with AngularJS

Adding menu items and creating views

Adding menu item to sidebar or horizontal menu requires to edit two files: app/js/services.js to add the menu item in list, and app/js/app.js to setup the view for the menu item.   If...

  • 10
  • 2666

Dependency Loading

When you need to import external resources such as JavaScript or Stylesheets you should do this with the “resolve” object inside app.js in $stateProvider:     You can load as...

  • 5
  • 1436

Layout Options

Layout options are stored in cookies and provide an API to change them, but you can also apply manual configuration. To change layout settings open app/js/controllers.js and head to “MainCtrl“:  ...

  • 7
  • 1682

Controllers, Directives, Services and Factory

Controllers – Are the main part of the theme which handles the interactivity and provides with the data source and template files. Controllers are set up in app/js/controllers.js    Directives – includes...

  • 9
  • 1672

horizontalMenu

Usage: <horizontal-menu></horizontal-menu> Function: Will display the horizontal menu, search bar and user notifications. This should be added before “page-container” element and can be used only once.

  • 5
  • 1329

settingsPane

Usage: <settings-pane></settings-pane> Function: Will include the user settings pane, add this markup to the beginning of the app (before “page-container” and horizontal menu element). Settings pane toggle function is: settingsPaneToggle();

  • 7
  • 1318

xeFillCounter

Usage: <div class=”xe-widget xe-counter” xe-counter data-count=”.num” data-from=”0″ data-to=”99.9″ data-suffix=”%” data-duration=”2″></div> Function: Will start counting the specified “data-count” element right after is shown in the screen. For full options check Section 4.4

  • 9
  • 1436

sidebarMenu

Usage: <sidebar-menu></sidebar-menu> Function: Will display the sidebar menu. The usage of this directive is inside app/tpls/app-body.html if you want to learn more.

  • 2
  • 1496

Other Directives

There are total of 29 directives included in this theme, for full list open this file app/js/directives.js to learn more detailed information and how are they implemented.

  • 2
  • 1291