Kendo UI®

Developing with AngularJS 1.x?

HTML5 and JavaScript framework Kendo UI for jQuery saves you development time
with 70+ UI widgets built with AngularJS 1.x in mind

Build AngularJS 1.x Applications in
Half the Time

Kendo UI and AngularJS

AngularJS 1.x is one of the most popular JavaScript frameworks today as it enables developers to quickly build properly architectured apps. What it brings to the table that other frameworks don't is convenient code separation, declarative databinding and routing, components creation, form validation, event management and many more.

Although it gives you a great foundation, AngularJS 1.x doesn't provide advanced UI out of the box. If you're building professional HTML5 applications under tight deadlines and budget, you either need to build the UI yourself or turn to a third-party library. In both cases there's loss of productivity - you either build everything from scratch or you have to make that third-party UI wire up to AngularJS 1.x.

Telerik HTML5 and JavaScript Kendo UI for jQuery framework was built with AngularJS 1.x in mind to help you cut development time and cost. It provides 70+ UI widgets, ranging from the must haves for every app Grid, Charts and Menus, to the advanced and business-grade UIs like Map, Gantt, Diagram and more. What's more, all of these widgets include built-in AngularJS 1.x directives support, so all you have to think about is the business logic of your app.

Considering Angular 2? Check out Kendo UI for Angular 2.

Kendo UI for jQuery
Integrates Seamlessly with AngularJS 1.x

scripts

How Kendo UI for jQuery Saves You Time

The Kendo UI for jQuery® framework provides everything you need to integrate with AngularJS 1.x out of the box—bindings, component configuration, directives, template directives, form validation, event handlers, etc. All you have to do is include the proper Kendo UI for jQuery libraries into your project.

Yet, Kendo UI for jQuery tooling does not depend on AngularJS 1.x. Use it with AngularJS 1.x or not; it’s totally up to you. We’ve taken care to make this integration seamless and easy.


AngularJS 1.x Directives

Directives enable Angular to bring additional functionality to HTML. Imagine a world where HTML has so many rich elements (for example <accordion></accordion>, <lightbox></lightbox>, etc.) that we never have to manipulate the DOM to simulate them. All you need to do is assign directives to elements to get rich functionality out of the box.

Because of the built-in directives support, creating a Kendo UI for jQuery widget in an AngularJS 1.x application requires a single line of code - the widget's directive. For example, providing the “kendo-date-picker” directive on an <input> element will tell the AngularJS 1.x HTML compiler to create a Kendo UI for jQuery date picker widget:

<label>Birthday: <input kendo-date-picker /></label>

You can define all options supported by Kendo UI for jQuery components by adding the needed attributes. In the case of the date picker these could be minimum and maximum date, navigation depth, etc.

scope-binding-code-sample

Template Directives Code Sample

Template Directives

The Kendo UI for jQuery templating engine lets you render client-side templates with Javascript. You can insert HTML markup that can be automatically merged with Javascript data.

You can set Kendo UI for jQuery templates by using nested AngularJS 1.x directives (i.e. <div k-template> </div>)


Form Validation

Client-side form validation makes apps more responsive and improves the overall user experience. Traditionally, you would do this through JavaScript logic, while AngularJS 1.x lets you declare the validation rules without having to write JavaScript code.

angularjs-directives-code-sample

Sample Application

Northwind Dashboard

Telerik Northwind Dashboard is a web app built on AngularJS 1.x with Kendo UI for jQuery. It showcases some of the most popular Kendo UI for jQuery widgets, such as Scheduler, Grid, TabStrip, Charts and Map in a real world scenario. It has a simple and responsive UI based on Bootstrap and works on a wide range of devices. AngularJS 1.x source code is included.

Launch the app
sample-app

AngularJS 1.x Support in Complex Widgets

KendoUI Grid

Grid

Adding flexible data visualization and manipulation functionality to your AngularJS 1.x applications is easy with the Kendo UI for jQuery Grid widget. It comes with 100+ built-in features, including everything from paging, sorting, filtering and data editing to grouping and hierarchy. You can have it up and running in minutes.

See demo

Chart

With just a few lines of code you can enable users to analyze and drill down into data in a variety of visual formats, including pie, line, bar, candlestick, sparklines, funnel and more.

See demo
Kendo UI Chart

Kendo UI Scheduler

Scheduler

You can enable all the functionality you need from a scheduler with several properties. Kendo UI for jQuery Scheduler comes with a variety of appointment views (day, week, month, agenda and timeline), exporting, resource grouping and more.

See demo

Resources

  • Documentation

    AngularJS 1.x Directives for Kendo UI for jQuery

  • FAQ

    AngularJS 1.x and Kendo UI for jQuery, Your Questions Answered

  • Webinar

    Intro to AngularJS 1.x and Kendo UI for jQuery

  • Case Study

    HP uses Kendo UI for jQuery to Slash Development Time by Up to 40%

Sign Up for More Product Information