AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

17
Kendo UI with AngularJS K. Sco’ Allen Ode To Code sco’@odetocode.com @odetocode Jesse Liberty Master Consultant Falafel So?ware [email protected] @jesseliberty

description

Two of the hottest technologies now work together to create phenomenal client-side applications. This session assumes you have some experience with AngularJS, and want to see how adding Kendo can greatly enhance your AngularJS application. Topics include widgets, data visualization, integrating MV* and managing data.

Transcript of AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Page 1: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Kendo  UI  with  AngularJS K.  Sco'  Allen  Ode  To  Code  

sco'@odetocode.com  @odetocode  

Jesse  Liberty  Master  Consultant  Falafel  So?ware  

[email protected]  @jesseliberty  

Page 2: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Am  I  In  The  Right  Presenta;on?

Know  Angular  

Know  Kendo  

Know  Neither  

Page 3: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

What  We  Will  Cover

• Very  brief  introducFon  to  Kendo  • Very  brief  introducFon  to  Angular  • Kendo  UI  controls  with  Angular  •  SeIng  properFes  in  Angular  • Working  with  DataVisualizaFon  

Page 4: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Brief  Introduc;on  to  Kendo  UI •  Library  for  creaFng  great  looking  applicaFons    • Core  library  (free):  40+  widgets  • Professional:  70+  widgets    

 +  support  

Page 5: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Kendo  UI

• Also  MVC  Wrappers  • PHP  Wrappers  •  JSP  Wrappers  Each  $999  

h"p://kendoui.com  

Page 6: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Brief  Introduc;on  to  Kendo  UI

• UnFl  recently,  Kendo  UI  +  jQuery  • Now  fully  integrated  AngularJS  • New  AngularJS  features  for  Kendo  coming  in  Nov.  

Page 7: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Brief  Introduc;on  to  AngularJS

•  Library  for  creaFng  Single  Page  ApplicaFons  (SPA)  • AngularJS  is  strictly  client-­‐side  • Key  is  adding  "DirecFves"  to  HTML5  

Page 8: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Brief  Introduc;on  to  AngularJS

• Rather  than  finding  a  widget  and  manipulaFng  it,            Angular  modifies  the  widget  with  a'ributes  •  EssenFally,  extends  HTML5  • Create  dynamic  views  •  Extensible  

Page 9: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014
Page 10: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014
Page 11: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014
Page 12: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Kendo  UI  With  Angular

• Modify  the  element  • Angular  code  to  support  • No  direct  use  of  jQuery  

Page 13: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014
Page 14: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Demos,  Demos,  Demos

Page 15: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014
Page 16: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Ques;ons?

Page 17: AngularJS and Kendo UI - Jesse Liberty | FalafelCON 2014

Contact  Us

•  Jesse  Liberty  •  Falafel  So?ware  •  [email protected]    • @jesseliberty  

K.  Sco'  Allen  Ode  To  Code  

sco'@odetocode.com  @odetocode