Use the directives found in igniteui-angularjs.js to use Ignite UI controls in AngularJS pages. Work with the running samples here.
Requirements
Note: The Ignite UI Angular directives do not work with the Ignite UI ASP.NET MVC Helpers
Getting Started
Page setup
In the page markup include the Ignite UI AngularJS directives file found in ./node_modules/igniteui-angularjs/igniteui-angularjs.min.js along with the Ignite UI scripts:
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="angular.min.js"></script>
<script src="infragistics.core.js"></script>
<script src="infragistics.lob.js"></script>
<script src="igniteui-angularjs.min.js"></script>
Reference the igniteui-directives in your AngularJS module:
var sample_app = angular.module('igniteui-sample-app', ['igniteui-directives']);
Initializing controls
Controls can be initialized in two ways:
- Markup Initialization: directly in an HTML page by using custom tags
- Controller Initialization: a control placeholder is located in an HTML page, but its initialization options are located in the page controller
Markup Initialization
Custom tags
Each control implements a custom tag directive where the tag name is formed by splitting each capital letter in the control name with the - symbol (This naming convention follows the standard Angular normalization process).
Note: It is recommended to use closing tags (</ig-combo>) over the self-closing tags (<ig-combo/>), because the latter are known to make issues on some browsers (depending on the used document mode).
Examples:
| Control Name | Tag |
|---|---|
| igCombo | <ig-combo> |
| igGrid | <ig-grid> |
| igDataChart | <ig-data-chart> |
| igDialog | <ig-dialog> |
| igDateEditor | <ig-date-editor> |
| igEditor | <ig-editor> |
| igMaskEditor | <ig-mask-editor> |
| igNumericEditor | <ig-numeric-editor> |
| igPercentEditor | <ig-percent-editor> |
| igTextEditor | <ig-text-editor> |
| igDatePicker | <ig-date-picker> |
| igTree | <ig-tree> |
| igMap | <ig-map> |
| igUpload | <ig-upload> |
| igVideoPlayer | <ig-video-player> |
Configuring Control Options
Simple type control options (string, number, bool etc.) are configured as an attributes on the control element. The options follow the same naming convention logic as the tag name.
Examples:
| Option | Markup |
|---|---|
| igGrid.options.localSchemaTransform | <ig-grid local-schema-transform="true"> |
| igCombo.options.caseSensitive | <ig-combo case-sensitive="true"> |
Defining complex type control options (arrays & objects) are configured as a child elements of the main control.
Example:
<ig-grid>
<features>
<feature name="Filtering">
</feature>
</features>
</ig-grid>
Handling events
Binding to control events is done again with attributes. Event attribute names are prefixed with the prefix event- followed by the event name delimited with the - symbol. Once defined the attribute values corresponds to a function name in the scope so you can gain access to the events.
Examples:
| Event | Markup |
|---|---|
| igGrid.events.dataBind | <ig-grid event-data-bind="dataBindHandler"> |
| igCombo.events.textChanged | <ig-combo event-text-changed="textChangedHandler"> |
| igDateEditor.events.keypress | <ig-date-editor event-keypress="keypressHandler"> |
Controller Initialization
Each control also implements a custom attribute directive where the attribute name is formed by splitting each capital letter in the control name with the - symbol (this naming convention follows the standard Angular normalization process) and the attribute value corresponds to the scope object holding the control options.
Examples:
| Control | Markup |
|---|---|
| igCombo | <div id="combo" data-ig-combo="combo_options"></div> |
| igGrid | <table id="grid" data-ig-grid="grid_options"></table> |
| igDataChart | <div id="chart" data-ig-data-chart="data_chart_options"></div> |
| igDialog | <div id="dialog" data-ig-dialog="dialog_options"></div> |
| igDateEditor | <input id="dialog" data-ig-date-editor="date_editor_options"></input> |
| igEditor | <input id="editor" data-ig-editor="editor_options"></input> |
| igMaskEditor | <input id="editor" data-ig-mask-editor="mask_editor_options"></input> |
| igNumericEditor | <input id="editor" data-ig-numeric-editor="numeric_editor_options"></input> |
| igPercentEditor | <input id="editor" data-ig-percent-editor="precent_editor_options"></input> |
| igTextEditor | <input id="editor" data-ig-text-editor="text_editor_options"></input> |
| igDatePicker | <input id="editor" data-ig-date-picker="date_picker_options"></input> |
| igTree | <ul id="tree" data-ig-tree="tree_options"></ul> |
| igMap | <div id="map" data-ig-map="map_options"></div> |
| igUpload | <div id="upload" data-ig-upload="upload_options"></div> |
| igVideoPlayer | <div id="video" data-ig-video-player="video_options"></div> |
One-way Data Binding
The following controls currently support one-way data binding:
- igHtmlEditor
Two-way Data Binding
The following controls currently support two-way data binding:
- igGrid
- igCombo
- igEditors
- igTree
Note: When using control API methods which modify the data source outside the Angular framework you need to explicitly call Scope.$apply() in order to see Angular view updated.
What is Ignite UI?
Ignite UI is an advanced HTML5+ toolset that helps you create stunning, modern Web apps. Building on jQuery and jQuery UI, it primarily consists of feature rich, high-performing UI controls/widgets such as all kinds of charts, data visualization maps, (hierarchical, editable) data grids, pivot grids, enhanced editors (combo box, masked editors, HTML editor, date picker, to name a few), flexible data source connectors, and a whole lot more. Too many to list here - check out the site for more info and to download a trial.
Ignite UI is not just another library created in someone's free time. It is commercial-ready, extremely well-tested, tuned for top performance, designed for good UX, and backed by Infragistics, an experience-focused company with a track record of over 24 years of experience in providing enterprise-ready, high-performance user interface tools for web, windows and mobile environments.
