igniteui-angularjs

Use the directives found in igniteui-angularjs.js to use Ignite UI controls in AngularJS pages. Work with the running samples here.

#Requirements

- jQuery v1.8 and later
- AngularJS v1.0 and later
- Ignite UI 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:

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

Markup Initialization

$3

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 () over the self-closing tags (), because the latter are known to make issues on some browsers (depending on the used document mode).

#### Examples:

| Control Name | Tag |
|-----------------|-----------------------|
| igCombo | |
| igGrid | |
| igDataChart | |
| igDialog | |
| igDateEditor | |
| igEditor | |
| igMaskEditor | |
| igNumericEditor | |
| igPercentEditor | |
| igTextEditor | |
| igDatePicker | |
| igTree | |
| igMap | |
| igUpload | |
| igVideoPlayer | |

$3

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 | |
| igCombo.options.caseSensitive | |

Defining complex type control options (arrays & objects) are configured as a child elements of the main control.

#### Example:

$3

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 | |
|igCombo.events.textChanged | |
|igDateEditor.events.keypress | |

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 |

|
| igGrid | |
| igDataChart |

|
| igDialog |

|
| igDateEditor | |
| igEditor | |
| igMaskEditor | |
| igNumericEditor | |
| igPercentEditor | |
| igTextEditor | |
| igDatePicker | |
| igTree |

|
| igMap |

|
| igUpload |

|
| igVideoPlayer |

|

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() 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.