AngularJS

Overview

  • AngularJS version of Ace depends on Angular UI Bootstrap, jQuery, Bootstrap and Ace's files.
  • It's not a pure AngularJS implementation and except for some components, it's mostly composed of wrappers for jQuery plugins and Ace's elements.

Angular Files

  • AngularJS files are inside angular folder.
  • The entry HTML file is angular/index.html and main application file is angular/js/app.js

Controllers

  • Main controller file is angular/js/controllers/main.js which contains 3 controllers:
    1. MainController: doesn't have much except for a few global variables, loading progressbar (spinner icon) and getData function as described in 'Data Files' section
    2. SettingsCtrl: optional controller for responding to settings box changes
    3. SidebarCtrl: optional controller that loads sidebar items from $stateProvider states defined inside angular/js/app.js

    And two optional services:
    1. SidebarList: converts app.js $stateProvider states to a list of sidebar items to be used in sidebar template
    2. StorageGet: loads localStorage stored values, such as ace.settings, ace.sidebar, etc...
  • Each page's controller is inside js/controllers/pages folder.
    For example angular/js/controllers/pages/dashboard.js

Data Files

  • In Ace's demo, some pages and the app in general may have data which is dynamically loaded via getData function in angular/js/controllers/main.js
    For example in Dashboard, it is used to load angular/data/pages/dashboard/conversations.json, etc: 
    
 ...
  • You don't need this and you can organize and load data in anyway which is appropriate for your app

Sidebar

  • If your sidebar list is static, you can place all your sidebar html in one file, but in Ace's demo it's a partial template which is rendered using angular/js/app.js router states!
  • The optional SidebarList service defined in angular/js/controllers/main.js converts those states to a list which is used by
    angular/views/layouts/default/partial/sidebar.html
    and angular/views/layouts/default/partial/sidebar/item.html
    to render sidebar!
  • Sidebar options are defined inside
    angular/js/controllers/main.js
    as $scope.ace.sidebar which includes:
    1. minimized: collapse/expand sidebar
    2. toggle: toggle in/out sidebar in mobile mode
    3. reset: reset sidebar scrollbars and submenu position

Settings

  • Optional Settings. User options are saved in localStorage and retrieved later on reload!
  • Options are defined inside
    angular/js/controllers/main.js
    as $scope.ace.settings.

Directives

Ace Directives

  • The following directives are wrappers for Ace's custom elements and are inside:
    angular/js/directives/ace.js
  • For examples about directives, please see demo pages and controllers at angular/js/controllers
  • ui-breadcrumb is required for determining current active item and sidebar highlight.
    If you don't need breadcrumbs, you may still use it but hide it!
  • ace-scroll: It's a wrapper for ace_scroll, so you can use the same options: 
     
    
  ...
  • widget-box: Basically a wrapper for widget box and you can use scope variables to change its state.
    Following optional variables are available:
    1. wb-reloading: Puts widget in loading state
    2. wb-fullscreen: Toggles fullscreen mode on/off
    3. wb-closed: If set to true widget box is removed
    4. wb-hidden: If true, widget box becomes hidden
    5. wb-toggle: If true, widget box is shown otherwise hidden. Should be initialized with !wbHidden value
    6. save: If true, widget box's state(collapsed or note) will be saved/restored using localStorage. Widget box should have an id attribute
    7. save-name: Optional name used to save its state in localStorage.

    You can watch above variables for changes but following callbacks are also available when clicking widget toolbar buttons:
    1. on-reload
    2. on-close
    3. on-fullscreen
    4. on-show
    5. on-hide
    
  Widget Box Title
  
  
    
    ...
    And inside controller: 
    $scope.is_reloading = false;
$scope.on_reload_widget = function() {
  //after content is loaded
  //$scope.is_reloading = false;
}
  • widget-header: widget box's header.
    Following optional variables are available:
    1. toolbar: Specify what buttons should be used in toolbar
    2. toggle-icon-down & toggle-icon-up: Optional toggle icons
    3. wb-hidden: You should use the same wbHidden variable used for widget box!
      Widget Box Title
  • ace-colorpicker is a directive for colorpicker element:
    Following variables are available:
    1. colors: A list of colors with optional values to be used
    2. options: Options are pull_right and caret
    3. add-new: If true and ngModel is assigned a new color value, it will be added to our list. Default is false
    4. ng-value: In your list you can specify a value for each color, and ngValue will be updated according to selected color
    $scope.widgetColors = {
  '#307ECC': 'blue', '#5090C1': 'blue2', '#6379AA': 'blue3'
};
  • ace-fileinput is a wrapper for Ace's file input element:
    Following variables and callbacks are available:
    1. options: file input options
    2. props: properties such as 'loading', 'enabled', 'reset_button'
    3. file-list: list of file names to display on intial display of file input
    4. on-change: when file selection is changed
    5. on-error: when there is an error
    6. on-preview: when preview is ready
    

    $scope.files1 = null;//it will contain a list of File objects when selection changes
$scope.fileInputProps1 = {
   'loading': false,
   'enabled': true,
   'reset_button': true
};
    Note that you can reset file input when you set the model to null: 
    $scope.resetFile = function() {
    $scope.files1 = null;
}
  • ace-sidebar enables sidebar functions such as scroll bar and hover menu.
    Following variables are available:
    1. options: same as ace_sidebar options
    2. props: properties such as 'minimized' & 'toggle'(used in mobile menu)
    3. scroll: set true or an object like ace_sidebar_scroll options to enable sidebar scroll
    4. hover: set true or an object like ace_sidebar_hover options to enable sidebar hover

Vendor Directives

Other directives

  • Other directives are located inside their own separate folder
  • You can find a list of them in the Angular Plugins section