Ignite UI + AngularJS: Now in Preview

We are excited to announce that AngularJS support for Ignite UI is now available in a preview state!

You can work with the running samples as well as get your hand on the code on GitHub. We'd love to have you clone the code and tell us what you think.

Before you get started, here's a quick primer on what's happening when you use these directives.

Using the Directives

You can now use Ignite UI controls in your Angular pages and interact with the controls as Angular directives. For instance, in order to use the igGrid you can use the following syntax to declare a very bare-bones grid on the page:

...where northwind is an object array that exists on the controller's $scope and could be a result of an async request, but in our samples its just local data for now. The resulting grid looks something like this:

As the Angular application is loaded, the directives are recognized and processed allowing you to declare a grid with this simple syntax. So by declaring the control this way, the grid is instantiated and the current scope's northwind member is set to the grid's data source.

Now the above example is borderline interesting, but what about something a bit more involved which sets up some custom columns and uses some advanced features? This is the markup used in the grid sample:

Here you can see how even a relatively complex grid is created in a highly-readable fashion using custom HTML syntax - all thanks to the directive. Notice how you have full flexibility to define all the same custom column settings and feature values as you would had you created the grid in traditional jQuery code or via the MVC wrappers.

Full Two-Way Data Binding

One of the most compelling features of Angular itself is the two-way data binding based off POJOs. As you can see in the running sample, the igGrid (and combo, etc.) supports full two-way databinding even while features like sorting, filtering, paging and more are enabled on the grid.

The data binding implemented for Ignite UI supports both keeping in sync changes in the UI reflected on the model, as well as from the model to the UI. Beyond just keeping the data in sync, when changes in the model occur, the UI is updated at specific points without having to re-render the entire page. This approach is quicker, more efficient and a bit more sophisticated than what is offered by other third-party control vendors for their Angular support.

Available Directives

There are directives available for many of the Ignite UI controls. Here's the full list with associated links to the running samples:

• igGrid
• igCombo
• igDataChart
• igDialog
• igEditors
• igMap
• igTree
• igUpload
• igVideoPlayer

General Notes

Just a few things to keep in mind:

• In the past some of our work with Angular required you to use a fork of Angular, but our solution now works with out-of-the-box Angular
• The code is currently in a preview state, so expect to see some odd behavior for a little while. We'd love to hear your feedback so we know how to better direct our efforts.