igniteui-angularjs
Version:
A packaged version of IgniteUI directives for AngularJS
144 lines (103 loc) • 8.12 kB
Markdown
Use the directives found in `igniteui-angularjs.js` to use [Ignite UI](http://igniteui.com) controls in [AngularJS](http://angularjs.com) pages. [Work with the running samples here](http://igniteui.github.io/igniteui-angularjs).
#Requirements
- [jQuery](http://www.jquery.com) v1.8 and later
- [AngularJS](http://www.angularjs.org) v1.0 and later
- [Ignite UI](http://www.igniteui.com) 13.1 and later
> **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:
1. Markup Initialization: directly in an HTML page by using custom tags
2. Controller Initialization: a control placeholder is located in an HTML page, but its initialization options are located in the page controller
<a id="markup"></a>
## 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:
1. igHtmlEditor
## Two-way Data Binding
The following controls currently support two-way data binding:
1. igGrid
2. igCombo
3. igEditors
4. igTree
**Note**: When using control API methods which modify the data source outside the Angular framework you need to explicitly call [Scope.$apply()](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply) in order to see Angular view updated.
---------------------------------------
##What is Ignite UI?
[](http://igniteui.com)
[Ignite UI](http://igniteui.com/) 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](http://igniteui.com/) for more info and to [download](https://igniteui.com/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](http://www.infragistics.com/), 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.
[](http://infragistics.com)