igniteui-angular

#Ignite UI directives for AngularJS

Use the directives found in igniteui-angular.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

#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:

1. Open a console in the folder where the igniteui-angular project is located
2. Run npm install
3. Run grunt build

#Getting Started

Page setup

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']);

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

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

Then you need to instrument the source file with:

npm run instrument

####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. By default the browser is Chrome.

To run the tests for a single run you can use:

npm run test-single

To run the tests on Firefox you can use:

npm run test-single-firefox

###End to end testing These tests are run with the Protractor test runner, it simulates interaction.

####Setup

Before proceeding you need to download and install the latest version of the stand-alone WebDriver tool:

npm run update-webdriver

After that make sure you have Java Development Kit (JDK) installed on your machine. It is required for the Standalone Selenium Server.

####Running tests

So first the web server should be brought up so that Protractor can execute the tests against it:

npm start

Running the tests is done with:

npm run protractor

Note: You will need to run the protractor on a separate bash

###Code coverage After running the Karma or Protractor tests by default a coverage will be created for each of them.

To combine the both reports into one single report you need to execute:

npm run cover-combined

After that the default directory where you can open the code coverage is igniteui-angular/coverage/final/lcov/src.

Running specific coverage:

To view only the Karma coverage you can see it under coverage/karma/**/lcov-report/src.

To view the code coverage only for the Protractor you need to run the command:

npm run cover-protractor

After that the location is the same(igniteui-angular/coverage/final/lcov/src). That is because the Protractor report is not easily readable by default.

---

##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.

Changelog

11.0.0

General

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

  • Added a new directive for re-templating the Excel style filtering header icon - IgxExcelStyleHeaderIconDirective.

  • Breaking Change

    Changed the how the grid toolbar is instantiated in the grids. The toolbar is now templated rather than being activated through a property on the parent grid. The toolbar features are also exposed as templatable components and the old properties are deprecated. The implementation of the Column Hiding UI has been changed in order to select which columns should be displayed, instead of hidden.

    Refer to the official documentation for more information.

• FilteringStrategy
  • Breaking Change - filter method exposed by the FilteringStrategy class now requires 3rd advancedExpressionsTree and 4th grid parameters. If not needed, just pass null.

New Features

• IgxCalendar
  • Is now fully accessible to screen readers.

Improvements

• IgxOverlay
  • New functionality to automatically determine the correct animation that is needed when showing an overlay content. This is used with Auto Position strategy, where the IgxOverlay content is flipped, depending on the available space.