#Ignite UI directives for AngularJS (Preview)
Use the directives found in igniteui-angular.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
#Building
Build will produce an obfuscated and minified version of the src/igniteui-angular.js in the dist/igniteui-angular.min.js.
The build uses Grunt, so you need Node.js installed on your machine.
To build the project use the following steps:
- Open a console in the folder where the igniteui-angular project is located
- Run
npm install - Run
grunt build
#Getting Started
In the page markup include the Ignite UI AngularJS directives file found in dist/igniteui-angular.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-angular.min.js"></script>
Reference the igniteui-directives in your AngularJS module:
var sample_app = angular.module('igniteui-sample-app', ['igniteui-directives']);
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
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).
| 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> |
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.
| 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.
<ig-grid>
<features>
<feature name="Filtering">
</feature>
</features>
</ig-grid>
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.
| 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"> |
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.
| 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> |
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.
##Testing There are two kinds of tests in Igniteui-angular: Unit tests and End to End tests. All of them are written in Jasmine.
####Setup Simply do:
npm install
The command is preconfigured and it will also call bower install behind the scenes.
####Running Unit Tests The easiest way to run the unit tests is to use the npm script:
npm test
This will start the Karma test runner and execute the tests.
####End to end testing These tests are run with the Protractor test runner, it simulates interaction. So first the web server should be brought up:
npm start
So that Protractor can execute the tests against it. Starting the tests is done with:
npm run protractor
Note: Protractor is built upon WebDriver and this should be installed:
npm run update-webdriver
This will download and install the latest version of the stand-alone WebDriver tool.
##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.
