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.
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.
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 v.s. Professional comparison table.
Kendo UI does not have a hard dependency on AngularJS. However, you should be aware that the Kendo UI directives are bundled into the
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).
As of Kendo UI 2014.3.1119 (i.e. the third release in 2014) Kendo UI supports AngularJS 1.3.x.
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.
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.
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.
You already have them if you are using Kendo UI 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 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 -->
The Kendo UI team directly develops, maintains, and supports these directives. The directives are not dependent on any third-party or community-driven effort.
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:
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.
Yes. We even have a detailed tutorial on how this is done: “Building applications with Kendo UI Mobile and AngularJS“
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. Or, check out the high level description of the integration between Kendo UI and AngularJS on telerik.com.
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.