Kendo UI SPA/Routing broken into separate .html pages

4 posts, 0 answers
  1. Dan
    Dan avatar
    16 posts
    Member since:
    Aug 2014

    Posted 07 Apr 2015 Link to this post

    I have a few questions:

    1. With Kendo UI and its routing features, can they be broken into separate .html pages, so not to have all code in one index.html?  Or does it all have to be on one .html page with templates, routing, controllers, etc.?  I wanted to keep the index.html separate and easy to read and keep all other pages in a "views" folder.

    2. Is it better to use Angular routing with Kendo UI features or does it not work correctly?

    I see with Angular, you can use a placeholder:

    <div ng-view>
    </div>
    to display the .html that is chosen (as explained here -- https://docs.angularjs.org/tutorial/step_07) in the Angular routing process, such as:

    gcdApp.config([ '$routeProvider', function($routeProvider) {
        $routeProvider.
        when('/login', {
            templateUrl : 'views/login.html',
            controller : 'LoginController'
        }).
        when('/loginSuccess', {
            templateUrl : 'views/sushi.html',
            controller : 'LoginSuccessController'
        }).
        otherwise({
            redirectTo : '/login',
     
        });
        ;
    } ]);
    I have gone through the Sushi demo (http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial) as well as reviewing this GitHub demo (https://github.com/rstropek/Samples/blob/master/KendoOverviewSample/SPASample.html), but I am not sure how to break all this into separate .html pages.

    If there are any demos/tutorials that show exactly what I am looking for, please let me know.  Or if you can provide code that spells all this out, I would really appreciate this.  I am new to the Kendo UI SPA/Routing coding/processes and I can understand Angular a little better.

    Thanks!
    Dan

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 09 Apr 2015 Link to this post

    Hi Dan,

    Unlike AngularJS the kendo ui SPA toolkit does not provide built-in support for views in separate HTML documents. You may take the approach described here.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Dan
    Dan avatar
    16 posts
    Member since:
    Aug 2014

    Posted 09 Apr 2015 in reply to Petyo Link to this post

    Petyo,

    Thanks for the response.

    I just want to make sure I understand this.  So, the sample Angular routing -- how it points to another .html file in another folder, this will not work with Kendo UI Mobile/SPA.  The only way to make this work is to use the External Templates as explained in the link above.

    So, if I wanted to make a Kendo UI Mobile/SPA application, I should place the code/templates in the index.html.

    Please let me know if I have misunderstood this.

    Thanks!
    Dan

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 10 Apr 2015 Link to this post

    Hello,

    the mobile application is built on top of the router/view SPA offering, and features several differences, one of them being the remote views support. I linked several resources regarding the topic in your other thread - please check them.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready