Sunday, June 14, 2015

Video: AngularJS and KendoUI

Although you may already know I’ve been working with AngularJS since it was in beta, you may not know I’ve had just as much experience with Telerik’s KendoUI control suite. For readers who aren’t familiar with KendoUI, it is a suite of jQuery-based UI widgets that also integrates directly with Angular. The core set of widgets is free and open source, and the more advanced widgets such as the grid are licensed.

kendouiangular

My team selected KendoUI for a Single Page Application we began writing several years ago that targeted HTML5. After reviewing several different vendors, we decided to go with KendoUI because the suite was built from the ground up with JavaScript, jQuery, and HTML5 in mind. Even before there was direct integration with Angular it served us well.

KendoUI_Badge_Horizontal_Certified_Big

As a result of my extensive experience working with the control suite I became one of the first certified KendoUI developers. I was also invited to speak at the TelerikNEXT conference about how AngularJS and KendoUI work together. You can view the presentation here:

The presentation is designed for developers with all levels of experience, from those who had never heard of Angular before to those who are advanced Angular developers and want to learn how to integrate KendoUI.

I also posted the full slide deck and source code that I used in the presentation to GitHub.

For easy navigation you can jump to the following sections of the video:

If you have some time I highly encourage you to watch the full video regardless of your experience. The examples range from a basic live demo demonstrating various Angular features to several miniature apps, including a rate grid and a health application that computes basal metabolic rate. I enjoyed giving the presentation and welcome all suggestions, comments, and feedback below.

Thank you,

signature[2]

5 comments:

  1. Hi Jeremy, I have a dumb newbie question. I've been dipping in and out of your blog since the Silverlight days, and have one of your books too.

    I'm someone still stuck in the WPF and (cough) Silverlight world and am keen to start investigating angular/kendo/typescript etc.

    Having no peers around that have any experience the first stumbling blocks I have is how to lay a project Visual Studio? In the Silverlight world I would have my view models in a folder, views in another folder etc etc.

    Whenever I watch one of these videos everything seems to be in one file. I realise that's probably for demo purposes, but I'd really like to know how you recommend organising a production project.

    Do you have a post or video floating about that might help?

    Thanks and keep up the good work!
    LJ.

    ReplyDelete
    Replies
    1. In my opinion the only dumb questions are the ones people don't ask.

      I don't have a video but am looking into producing one for "full stack" best practices. To answer your question, however, I typically have separate projects for the Web API and MVC components. For MVC I use the conventions that are built-in and for Angular the folders are mapped by controllers, directives, etc. It's a bit of a preference whether you want to do module/function (i.e. have an accounts folder, then under that a folder for controllers, services, etc.) or do function/module (i.e. controllers/accounts) but segmenting by function and module is always a good way to keep track of moving parts and scale the application.

      If you watch my MVA on Web API you'll see some more in depth examples for server side, and if you're looking for a more in-depth/mature Angular app check out my Angular Health app.

      Let me know if that helps!

      Jeremy

      Delete
    2. Thanks Jeremy I'll check them out.

      Delete