AngularJS and KendoUI: Your Questions Answered

This week is the 2015 AngularJS conference (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 framework 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 one?

A directive is a predetermined bit of HTML that tells the AngularJS HTML compiler to do something particular with HTML. Because Kendo UI framework 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 a professional 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 vs. Professional comparison table.

Is Kendo UI framework dependent on AngularJS to function?

Kendo UI framework does not have a hard dependency on AngularJS. However, you should be aware that the Kendo UI directives are bundled into the kendo.ui.core.js and kendo.all.js files, though they are not included by default if Kendo UI framework is being included on a per-widget basis. If you use Kendo UI framework 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 framework?

As of Kendo UI 2014.3.1119 (the third release in 2014), it supports AngularJS 1.3.x.

Will Kendo UI framework work with AngularJS 2.0?

It’s on the roadmap, but much is yet to be 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 framework 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 framework, in fact, does. Therefore, jQuery is required to make Kendo UI widgets function, and thus the Kendo UI directives.

Will AngularJS replace the Kendo UI SPA & MVVM offerings?

No. While Kendo UI framework offers its own templating, views, routers, layouts and MVVM tools, there is no plan to fully replace these offerings with AngularJS, 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 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 framework by way of the kendo.ui.core.min.js or kendo.all.min.js files. As previously mentioned, the directives are bundled into these files; all that is required is the inclusion of angular.js to make Kendo UI framework 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 framework offers compatible with AngularJS?

Kendo UI framework 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 framework with AngularJS:

• MVVM
• Router
• View
• Layout

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 making everything lower-case 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 framework and AngularJS question. If you aren’t going to be at the conference, 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 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.