Set Up Enviornment

[Prangya Tiwari]

Hi,

how would i set up enviornment for using sysncfusion grid in angular js as i am new to angular js.please help me out to do installation pre requirities.

[Subha Shree Ramanathan]

Hi Prangya Tiwari, 

Thanks for contacting Syncfusion support. 

The Essential JS 1 provides support for AngularJS framework through wrappers, which needs the dependencies jQuery and jsrender to render the components. Refer to the below code snippets which includes the scripts and theme files to get started with our components. 

<!-- Essential Studio for JavaScript  theme reference -->  

 <link rel="stylesheet" rel='nofollow' href="//cdn.syncfusion.com/16.1.0.24/js/web/flat-azure/ej.web.all.min.css" /> 

<!-- Essential Studio for JavaScript  script references --> 

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>  

 <script src="//cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script> 

<script src="//cdn.syncfusion.com/js/assets/external/angular.min.js" type="text/javascript"></script>   

 <script src="//cdn.syncfusion.com/16.1.0.24/js/web/ej.web.all.min.js"> </script> 

  <script src="//cdn.syncfusion.com/16.1.0.24/js/common/ej.widget.angular.min.js" type="text/javascript"></script 

 

The Essential JS 1 for AngularJS directives have been encapsulated into a single module called ejangular, so declare the dependency for this module within your application as like the below code snippet. 

angular.module('ejApp', ['ejangular']) 

        .controller('GridControl', function ($scope) { 

            $scope.shipdetails = [ 

                         { Name: 'Hanari Carnes', City: 'Brazil' }, 

                         { Name: 'Split Rail Beer & Ale', City: 'USA' }, 

                         { Name: 'Ricardo Adocicados', City: 'Brazil' } 

            ]; 

        }); 

For example, our ejGrid component can be rendered using ej-grid angular directive and its properties can be defined using the e- prefix followed by the property name. Refer to the below code snippet. 

<div id="Grid" ej-grid e-datasource="shipdetails" > 

</div> 

To know more about ej-grid directive, refer to the below AngularJS user guide documentation link.  

https://help.syncfusion.com/angularjs/grid/getting-started 

To getting started with AngularJS, refer to the below documentation link. 

https://help.syncfusion.com/angularjs/overview 

For your convenience, we have prepared a sample and attached below. Refer to the below sample link.  

 

Sample 

We have developed AngularJS sample browser using our components which is built on top of AngularJS framework. Refer to the below demo link. 

http://ngjq.syncfusion.com/  

Please let us know if you need further assistance on this. 

Thanks, 

Subha Shree D.R