| title | Welcome to Syncfusion Essential AngularJS |
|---|---|
| description | This section describes the overview of Syncfusion Essential AngularJS and How to render a Syncfusion AngularJS component. |
| platform | AngularJS |
| control | Introduction |
| documentation | ug |
The Syncfusion Angular components of Essential JavaScript 1 (jQuery-based widgets) are no longer actively developed, and the 2022 Volume 4 marked the last release. Users are encouraged to switch to the Syncfusion Angular components of the Essential JS 2 library, which has been specifically designed to be lightweight and modular. Its size can be further optimized by including only the necessary controls and features for your application. For more information, please check out the Syncfusion Angular of Essential JS 2 library’s documentation and demo.
Essential JS includes AngularJS directives for all controls in the ej.widget.angular.min.js script file. All the Essential JS directives have been encapsulated into a single module called ejangular. To render our ej controls in angular, you need to refer the angular.min.js and ej.widget.angular.min.js in your application.
Create a new HTML file and include the below code:
{% highlight html %}
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script> <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script> <script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/ej.web.all.min.js"></script> <script src="http://cdn.syncfusion.com/{{ site.releaseversion }}/js/common/ej.widget.angular.min.js"></script>{% endhighlight %}
The ng-app directive explains the root element ( or tags) of the application. You will assign a name to the ng-app directive, then you must create a module with that name. In this module, you will have to define your directives, services, filters and configurations.
A controller is defined using ng-controller directive. Each controller accepts an object $scope which we pass as a parameter. This object is used to bind the controller with view.
All the Syncfusion widget’s control directives are prefixed with ej- to avoid conflict with other library directives and its properties are defined using e- prefix followed by the property name. The code example for defining controls in AngularJS is as follows,
Create INPUT element and add in the body tag as below.
{% highlight html %}
<title>Essential Studio for JavaScript : DatePicker - AngularJS</title>{% endhighlight %}
In the above code snippet, ej-datepicker denotes the control directive for the Syncfusion’s datepicker widget and all its properties are prefixed with the letter e- (For example, e-value).
To render the ejDatePicker using angular directive, we need to inject the ejangular module with modules.
{% highlight javascript %}
angular.module('DateCtrl', ['ejangular']) .controller('DatePickerCtrl', function ($scope) { $scope.dateValue = "2/3/2013"; });
{% endhighlight %}
When a widget's model (ng-model) attribute is bound to a scope variable, it can reflect the changes both ways. In general, we could have more than one property bound to the same variable.
The below table depicts the properties of all the Syncfusion widgets that supports model binding -
| Control | Supported properties |
|---|---|
| ejAccordion | - |
| ejAutoComplete | value |
| ejBarcode | - |
| ejBulletGraph |
value comparativeMeasureValue |
| ejButton | - |
| ejChart |
xZoomFactor yZoomFactor xZoomPosition yZoomPosition |
| ejCheckBox | - |
| ejCircularGauge |
value minimum maximum |
| ejDatePicker | value |
| ejDateTimePicker | value |
| ejDiagram | - |
| ejDialog | - |
| ejDigitalGauge | value |
| ejDropDownList | value |
| ejGantt | selectedItem |
| ejGrid |
dataSource selectedRow pageSettings.currentPage selectedRowIndices |
| ejLinearGauge |
value minimum maximum |
| ejMaps |
zoomLevel minZoom zoomFactor maxZoom baseMapIndex |
| ejMaskEdit | value |
| ejMenu | - |
| ejOlapChart |
title.text commonSeriesOptions.type locale |
| ejOlapClient |
Title gridLayout displaySettings.mode displaySettings.defaultView displaySettings.controlPlacement displaySettings.enableTogglePanel locale |
| ejOlapGauge |
rowsCount columnsCount showHeaderLabel locale radius frameType |
| ejPivotGrid |
Layout enableCellContext hyperlinkSettings.enableValueCellHyperlink hyperlinkSettings.enableRowHeaderHyperlink hyperlinkSettings.enableColumnHeaderHyperlink hyperlinkSettings.enableSummaryCellHyperlink |
| ejRadioButton | - |
| ejRangeNavigator | - |
| ejRating | currentValue |
| ejRTE | value |
| ejRotator | - |
| ejSchedule |
fields.dataSource currentView currentDate |
| ejScroller |
scrollTop scrollLeft |
| ejSlider |
value values |
| ejSplitButton | - |
| ejSplitter | - |
| ejTab | - |
| ejTagCloud | - |
| ejNumericTextbox | value |
| ejPercentageTextbox | value |
| ejCurrencyTextbox | value |
| ejTimePicker | value |
| ejToggleButton | - |
| ejToolbar | - |
| ejTreemap |
dataSource colorValuePath weightValuePath |
| ejTreeView | - |
| ejUploadbox | - |
| ejWaitingPopup | - |
Model binding has been demonstrated in the below code,
{% highlight html %}
<title>Essential Studio for JavaScript : DatePicker - Angular</title> <script type="text/javascript"> angular.module('DateCtrl', ['ejangular']) .controller('DatePickerCtrl', function ($scope) { $scope.dateValue = "01/01/2015"; }); </script>{% endhighlight %}
##Event binding
Events can be bind to controls using the prefix e- and particular event name. For example, to bind change event on ejDatePicker, we need to define attribute as e-change="dateChanged". Refer the following snippet for complete example.
{% highlight html %}
{% endhighlight %}
In controller, you can get the reference to the ej widgets using the ID of particular widget in AngularJS scope. Refer the following code example.
{% highlight html %}
<script type="text/javascript">
angular.module('DateCtrl', ['ejangular'])
.controller('DatePickerCtrl',["$scope", function ($scope) {
$scope.dateValue = "01/01/2015";
$scope.dateChanged = function(e){
alert($scope.datepicker.model.value)
}
}]);
</script>
{% endhighlight %}
N> Since the widgets rendered after the controller, we can’t access the widget object and their members like properties/methods inside controller. So we need to use callback functions or '$postLink' (in case of custom directives). For more information about component Life-cycle refer the link
You can set whole ej widgets configuration using particular component attribute. Please find the code snippet for the same:
{% highlight html %}
<script type="text/javascript">
angular.module('DateCtrl', ['ejangular'])
.controller('DatePickerCtrl', ["$scope", function ($scope) {
$scope.dateSettings = { value: new Date(2013, 06, 28), dateFormat: "MM/dd/yyyy" }
}]);
</script>
{% endhighlight %}