Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/igniteui/igniteui-angularjs
Ignite UI extensions for AngularJS
https://github.com/igniteui/igniteui-angularjs
angularjs angularjs-directives extensions ignite-ui infragistics
Last synced: 5 days ago
JSON representation
Ignite UI extensions for AngularJS
- Host: GitHub
- URL: https://github.com/igniteui/igniteui-angularjs
- Owner: IgniteUI
- License: other
- Created: 2014-02-26T14:33:56.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2024-01-09T07:41:53.000Z (12 months ago)
- Last Synced: 2024-12-17T21:06:37.752Z (5 days ago)
- Topics: angularjs, angularjs-directives, extensions, ignite-ui, infragistics
- Language: JavaScript
- Homepage: http://igniteui.github.io/igniteui-angularjs
- Size: 1.71 MB
- Stars: 106
- Watchers: 63
- Forks: 34
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: license.txt
Awesome Lists containing this project
README
# Ignite UI directives for AngularJS
[](https://github.com/IgniteUI/igniteui-angularjs/actions/workflows/node.js.yml)
[](https://coveralls.io/github/IgniteUI/igniteui-angularjs?branch=master)
[](https://badge.fury.io/js/igniteui-angularjs)
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) or quickly bootstrap your AngularJS project with this preconfigured application - [Ignite UI AngularJS seed](https://github.com/IgniteUI/igniteui-angularjs-seed/).
**IMPORTANT** The repository has been renamed from `igniteui-angular` to `igniteui-angularjs`. This is to avoid confusion caused by the new [naming convention](https://medium.com/google-developer-experts/angular-new-naming-guidelines-eacbebd09363) of Angular.
# 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 AngularJS directives *do not* work with the Ignite UI ASP.NET MVC Helpers
# Install
You can install this package either with `npm` or with `bower`. This is a development repo!
`igniteui-angularjs` depends on the `ignite-ui-full` licensed package. Follow [this guide](https://www.igniteui.com/help/using-ignite-ui-npm-packages) on setting up access to the Ignite UI private npm feed and add the dependency to the `package.json`.
```
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
```
### npm
```shell
npm install igniteui-angularjs
```
### bower
```shell
bower install igniteui-angularjs
```
# Building
Build will produce an obfuscated and minified version of the `src/igniteui-angularjs.js` in the `dist/igniteui-angularjs.min.js`.
The build will also put the original and the minified version of the `src/igniteui-angularjs.js` in the `dist/npm` for distribution to npm.
The build uses [Grunt](http://gruntjs.com/), so you need [Node.js](http://nodejs.org/) installed on your machine.
To build the project use the following steps:
1. Open a console in the folder where the **igniteui-angularjs** project is located
2. Run `npm install`
3. Run `grunt build`
# Getting Started
There are two ways of getting started with the Ignite UI directives. The first one is to use the Ignite UI AngularJS quick start application which is described below. The other way is to configure the application yourself following the page setup instructions step by step.
## Ignite UI AngularJS quick start application
[Ignite UI AngularJS seed](https://github.com/IgniteUI/igniteui-angular-seed/) is an application skeleton for a typical AngularJS web app using the Ignite UI directives for AngularJS. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects.
The seed contains a sample AngularJS application and is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.
## Page setup
In the page markup include the Ignite UI AngularJS directives file found in `dist/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
### 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 AngularJS 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 | `` |
### 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 | `` |
| igCombo.options.caseSensitive | `` |
Defining complex type control options (`arrays` & `objects`) are configured as a child elements of the main control.
#### Example:
### 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 | `` |
|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 AngularJS 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 | `` |
## Element placeholder considerations
By default all controls have default element placeholders. You can configure element placeholder by setting the `element` attribute to a name of a DOM element.
Example:
``
## One-way Data Binding
The following controls currently support one-way data binding:
1. igHtmlEditor
2. igDataChart
3. igSparkline
4. igFunnelChart
## 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 AngularJS framework you need to explicitly call [Scope.$apply()](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply) in order to see AngularJS view updated.
## Testing
There are two kinds of tests in igniteui-angularjs: Unit tests and End to End tests. All of them are written in [Jasmine](http://jasmine.github.io/).
#### 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](http://karma-runner.github.io/0.12/index.html) 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](https://github.com/angular/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)](http://www.oracle.com/technetwork/java/javase/downloads/index.html) 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-angularjs/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-angularjs/coverage/final/lcov/src). That is because the Protractor report is not easily readable by default.
---------------------------------------
## 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)