Skip to main content

Useful Resources

Mango's UI is built on the AngularJS (1.x) framework with Angular Material for UI components and layout. Understanding these technologies will help you get the most out of custom page development and Dashboard Designer customizations. Below are curated links to key documentation and learning resources.

Core Framework Documentation​

AngularJS​

  • AngularJS Official Website -- The main AngularJS site with documentation, tutorials, and the API reference. This covers directives, controllers, services, filters, and the core concepts that power Mango's custom pages.
  • AngularJS Developer Guide -- In-depth guides covering templates, expressions, data binding, dependency injection, and other fundamental concepts.
  • AngularJS API Reference -- Complete reference for all built-in directives (ng-repeat, ng-show, ng-click, ng-style, ng-class, etc.), services, and filters used in Mango pages.

Angular Material​

  • Angular Material Design -- Documentation for the Angular Material component library. Mango uses these components for buttons (<md-button>), cards (<md-card>), inputs (<md-input-container>), dialogs, toolbars, and layout directives (layout, flex).
  • Material Design Guidelines -- Google's Material Design specification. Useful for understanding color palettes, typography, spacing, and interaction patterns used throughout the Mango UI.

Learning Resources​

Mango-Specific Resources​

  • Mango API Docs -- Available within your Mango instance under the API Docs menu item. This is the definitive reference for all <ma-*> components, including their attributes, bindings, and usage examples.
  • Mango Examples -- Interactive demos accessible from the Examples menu section within Mango. These may need to be enabled in the menu editor.
  • Mango REST API -- Accessible at /rest/latest/ on your Mango instance. The REST API documentation provides details on all endpoints for data points, events, users, and other resources that you can interact with from custom pages.

Development Tools​

  • Chrome DevTools -- Essential for debugging AngularJS applications. Use the Elements panel to inspect Mango components, the Console for evaluating expressions, and the Network panel for monitoring REST API calls.
  • AngularJS Batarang -- A Chrome extension specifically designed for debugging AngularJS applications. It lets you inspect scopes, view dependency graphs, and profile performance.
  • Inkscape -- A free, open-source vector graphics editor useful for creating SVG graphics for Mango dashboards.