Version

AngularJS Samples

Topic Overview

This topic covers samples with Ignite UI directives for AngularJS.

In this topic

This topic contains the following sections:

Requirements

In order to run this sample, you need to have:

  • The required Ignite UI for jQuery JavaScript and CSS files
  • The Ignite UI AngularJS directives

Grid Sample​

This sample will demonstrate how we can use igGrid with AngularJS.

Preview

The following is a preview of the final result.

Details

This sample demonstrates how AngularJS directives are used with the igGrid when Updating, Paging and Sorting features are activated.

Editors Sample​

This sample will demonstrate how we can use igEditors with AngularJS.

Preview

The following is a preview of the final result.

Details

This sample demonstrates how to create a number of different editors using AngularJS directives.

Tile Manager Sample​

This sample will demonstrate how we can use igTileManager with AngularJS.

Preview

The following is a preview of the final result.

Details

In this sample we use the igTileManager AngularJS directive. Firstly we introduce a data variable in our controller which holds the data source. Then we declare an igTileManager AngularJS directive and bind it to the data variable.

Dialog Window Sample

This sample will demonstrate how we can use igDialog with AngularJS.

Preview

The following is a preview of the final result.

Details

In this sample we use the igDialog AngularJS directive. The Dialog Window is initialized with headerText and height options set.

Tree Sample

This sample will demonstrate how we can use igTree with AngularJS.

Preview

The following is a preview of the final result.

Details

In this sample we use the igTree AngularJS directive. Firstly we introduce a data variable in our controller which holds the data source. Then we declare an igTree AngularJS directive and bind it to the data variable.

Map Sample

This sample will demonstrate how we can use igMap with AngularJS.

Preview

The following is a preview of the final result.

Details

In the sample above we show how a zoomable map can be initialized using an AngularJS directive.

Layout Manager Sample

This sample demonstrates how AngularJS directives are used to instantiate igLayoutManager.

Preview

The following is a preview of the final result.

Details

In this sample we use the igLayoutManager AngularJS directive.

Data Chart Sample​

This sample demonstrates how AngularJS directives are used to instantiate igDataChart.

Preview

The following is a preview of the final result.

Details

This sample demonstrates how to link together the Data Chart and Zoombar Controls using AngularJS directives.

Related Content

The following topics provide additional information related to this one:

View on GitHub