1 / 12

KendoUI Routing and SPA

KendoUI Routing and SPA. Using KendoUI for SPA Applications. Learning & Development. http://schoolacademy.telerik.com. Telerik School Academy. Table of Contents. Kendo MVVM Views and ViewModels Kendo Router Defining routes Routes with parameters Creating SPA apps with KendoUI

dakota
Download Presentation

KendoUI Routing and SPA

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. KendoUI Routing and SPA Using KendoUI for SPA Applications Learning & Development http://schoolacademy.telerik.com Telerik School Academy

  2. Table of Contents • Kendo MVVM • Views and ViewModels • Kendo Router • Defining routes • Routes with parameters • Creating SPA apps with KendoUI • Creating Views and ViewModels • Defining routes

  3. Kendo MVVM Just a recap

  4. Kendo MVVM • KendoUI has a powerful MVVM framework • Views – kendo.View • ViewModels – kendo.observable • Kendo Views Layout var layout = new kendo.Layout('…'), viewModel = kendo.observable({ title: 'Welcome to the Online video player' }), view = new kendo.View('…', { model: viewModel}); layout.render('#root'); layout.showIn('#view', view);

  5. Kendo MVVM Live Demo

  6. Kendo Router The creation of fake pages

  7. Routing • Routing is the way to create different pages in SPA apps • The pages are not real pages, but look like real • Different pages have different hash (#) suffix • Instead of http://site.com/home.htmlthe url is http://site.com/index.html/#home • Why use routes? • Routes present better end-user experience • The copy&paste of an ULR works • The end-user has history • Etc…

  8. Kendo Router • The router supports routing in KendoUI apps • Initialized with newkendo.Router() • Routes are added with .route(string, callback) • Each route has a function callback, that is executed when the route is reached • Executed with .start() var router = new kendo.Router(); router.route('/', showHome); router.route('/home', showHome); router.route('/about', showAbout); router.start();

  9. Routes in KendoUI Live Demo

  10. Routing and SPA http://academy.Telerik.com

  11. Homework • Create a SPA application for chatting • Use a SaaS cloud provider • Both Telerik Backend Services or Parse will do • Users can register/login • The username is unique • Allusers chat in a single channel • All users see the all messages

  12. Homework (2) • (cont.) Create a SPA application for chatting • Implement it using KendoUI MVVM and Router • The application should have three different pages (routes) • Homepage • Show information about the Web app • Login/register page • Login/register user • Chat page • Show messages from other users • Send new message

More Related