Over a million developers have joined DZone.

AngularJS and KendoUI - Your Questions Answered

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

[This article was written by Cody Lindley]

angular_kendo_header

This week is the 2015 AngularJS conference (i.e. ng-conf) in Salt Lake City, Utah. Jen Looper and myself will be on hand, taking in the AngularJS community, and answering questions. In honor of the event, I’ve created this Q&A in an effort to answer what I believe are the most common questions asked about Kendo UI and AngularJS.

If I missed anything you think needs an answer go ahead and ask me in the comments and I’ll ask someone smarter than me. Or feel free to come and talk to me directly at ng-conf.

WHAT IS AN ANGULARJS DIRECTIVE AND HOW DOES KENDO UI INTEGRATE WITH THEM?

A directive is a predetermined bit of HTML that tells the AngularJS HTML compiler to do something particular with HTML. Because Kendo UI ships with a set of custom AngularJS directives, it’s possible to create Kendo UI widgets with simple HTML attributes (i.e. directives).

For example, to create a date picker in an AngularJS application, you only need provide the custom “kendo-date-picker” directive/attribute on an<input> element. When the AngularJS HTML compiler finds this directive/attribute on an <input>, it’s directed (because of the directives Kendo UI provides) to create a Kendo UI date picker widget.

HOW MUCH DOES IT COST TO USE KENDO UI ANGULARJS DIRECTIVES?

The directives themselves are free and open source. A developer can get them right now from the Kendo UI core GitHub repository. However, not all of the Kendo UI widgets are free for commercial use. To use Kendo UI professional widgets in an AngularJS application you’ll also need aprofessional Kendo UI license (starts at $699, per developer). If you are wondering which widgets are freely available and which require a license have a look at this Core v.s. Professional comparison table.

IS KENDO UI DEPENDENT ON ANGULARJS TO FUNCTION?

Kendo UI does not have a hard dependency on AngularJS. However, you should be aware that the Kendo UI directives are bundled into thekendo.ui.core.js and kendo.all.js files though they are not included by default if Kendo UI is being included on a per-widget basis. If you use Kendo UI on a per widget basis, you’ll have to remember to also include the directives (i.e. kendo.angular.js).

WHAT VERSION OF ANGULARJS IS SUPPORTED BY KENDO UI?

As of Kendo UI 2014.3.1119 (i.e. the third release in 2014) Kendo UI supportsAngularJS 1.3.x.

WILL KENDO UI WORK WITH ANGULARJS 2.0?

It’s on the road map but much is yet to unfold in terms of Angular 2.0 development. We are waiting and watching like everyone else. And when the waiting and watching is over, the plan is that Kendo UI will work with AngularJS 2.0.

IS JQUERY REQUIRED TO USE THE ANGULARJS DIRECTIVES?

While AngularJS does not have a hard dependency on jQuery, Kendo UI, in fact, does. Therefore, jQuery is required to make Kendo UI function, and thus the Kendo UI directives.

WILL ANGULARJS REPLACE THE KENDO UI SPA & MVVM OFFERINGS?

No. While Kendo UI offers its own templating, views, routers, layouts, and MVVM tools, there is no plan to fully replace these offerings with AngularJS and thereby making Angular a hard dependency. The directives were created to help our AngularJS customers create efficient and fast running applications the Angular way while not to forcing anyone who does not use Angular into the fold.

WHERE CAN I GET THE KENDO UI ANGULARJS DIRECTIVES?

You already have them if you are using Kendo UI by way of thekendo.ui.core.min.js or kendo.all.min.js files. As previously mentioned, the directives are bundled into these files and all that is required is the inclusion of angular.js to make Kendo UI work with Angular.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- 2.0.x -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <!-- 1.3.0 -->
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script> <!-- directives already included -->

WHO MAINTAINS AND SUPPORTS THE KENDO UI ANGULARJS DIRECTIVES?

The Kendo UI team directly develops, maintains, and supports these directives. The directives are not dependent on any third-party or community-driven effort.

IS EVERYTHING THAT KENDO UI OFFERS COMPATIBLE WITH ANGULARJS?

Kendo UI offers some overlapping functionality found in AngularJS and it shouldn’t be used in combination with AngularJS. For example, the following Kendo UI parts should be avoided when using Kendo UI with AngularJS:

DO ALL OF THE KENDO UI WIDGETS HAVE CORRESPONDING ANGULARJS DIRECTIVES?

Yes. The programmatic name of the widget (e.g. kendoDatePicker()) can be used to discern the name of the directive. Replacing the camel casing in the programmatic name by lower casing everything and adding dashes in-between the words gives the corresponding directive (e.g.kendo-date-picker) name for the widget.

DO KENDO UI MOBILE WIDGETS SUPPORT ANGULAR AS WELL?

Yes. We even have a detailed tutorial on how this is done: “Building applications with Kendo UI Mobile and AngularJS

Did I miss anything?

I couldn’t possibly anticipate all questions, so don’t be afraid to stop by the Kendo UI booth at the AngularJS conference and hit us up with your Kendo UI and AngularJS question. If you aren’t going to be at the conference, then feel free to post your question in the comments section and I’ll do my best to get it answered.

Also, be sure to check out TelerikNEXT happening in Boston on May 1-3 where there will be sessions dedicated around the topics of KendoUI and AngularJS.

If you are at ng-cong, stop by the Telerik booth and you can enter to win a sweet Parrot Bebop Drone.


After all, who doesn’t want the ability to roll some aerial video of your closest neighbors backyard happenings. I’m almost positive, legally, anything viewable from space or closer to the earth is fair game.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
java ,html5 ,frameworks ,web design ,tips and tricks ,kendo ui ,angular js

Published at DZone with permission of Burke Holland, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}