Converting Angular Routing to Kendo UI Routing

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

    Posted 12 Jan 2015 Link to this post

    I am not very familiar with routing, so I appreciate any extra help with this (and some patience too - thanks!)...

    I have an existing index.html and app.js file using Angular routing.  I need to convert to Kendo UI routing to keep the SPA architecture.

    Here is my app.js

    var app = angular.module('App', [ 'ngRoute' ]);
     
    var busyIndicator = new WL.BusyIndicator('content', {
        text : "Loading ...",
        bounceAnimation : false,
        fullScreen : true,
        minDuration : 3,
        textColor : "black",
        opacity : 1,
        strokeOpacity : 0.25
    });
    app.factory("busyIndicator", function() {
        return busyIndicator;
    });
     
    app.config([ '$routeProvider', function($routeProvider) {
        $routeProvider.
        when('/module', {
            templateUrl : 'views/modules.html',
            controller : 'ModuleController'
        }).
        when('/module/:moduleId', {
            templateUrl : 'views/level.html',
            controller : 'LevelController'
        }).
        when('/module/:moduleId/:levelId', {
            templateUrl : 'views/quiz.html',
            controller : 'QuizController'
        }).
        when('/rank', {
            templateUrl : 'views/rank.html',
            controller : 'RankController'
        }).
        when('/help', {
            templateUrl : 'views/help.html',
            controller : 'HelpController'
        }).
        when('/result', {
            templateUrl : 'views/result.html',
            controller : 'ResultController'
        }).
        when('/nick', {
            templateUrl : 'views/nickname.html',
            controller : 'NickController'
        }).
        when('/login', {
            templateUrl : 'views/login.html',
            controller : 'LoginController'
        }).
        when('/loginSuccess', {
            templateUrl : 'views/loginSuccess.html',
            controller : 'LoginSuccessController'
        }).
        otherwise({
            redirectTo : '/login',
     
        });
        ;
    } ]);

    Here is the index.html (code where the SPA is used):
    ..
                <script src="js/app.js"></script>
            </head>
            <body>
     
                <div ng-class="tabClass">
                    <div class="app_view ng-view">
                    </div>
                </div>
     
            </body>
    ...

    I have read through some documentation and tutorials, but I am not sure how to begin this or what I should change.

    Please let me know what I need to do to get this up and running.

    Thanks!


  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 14 Jan 2015 Link to this post

    Hello Dan,

    The Kendo UI Routing and Views are somewhat similar to the Angular ones but feature several different concepts. I would like to suggest that you look through the SPA documentation article (and the corresponding Router/View API reference), and also examine the source code of the sample apps we have provided in our demos.

    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 06 Apr 2015 in reply to Petyo Link to this post

    Petyo,

    Thanks for the response -- I apologize for such a late response.  I was pulled off this project, but now have been put back on it...

    I went over the documentation, but I am still struggling with how to implement the <div> to handle the single page application as well as how to get the Router to work with an Angular app.

    The code that I cannot deviate from is in my app.js:

    var gcdApp = angular.module('gcdApp', [ 'kendo.directives' ]);
    How do I get the Router into the app?

    I have an index.html that has all the pages on it -- I need to break these out and create into separate .html pages and call from the router.  How do I reference the Router from the index.html?

    Are there any other samples you can provide that would help?  Or do you have sample code?  I need to know if I put the Router code in the app.js or it's own separate file -- not sure what the standard is...

    Thanks!
    Dan

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 08 Apr 2015 Link to this post

    Hello,

    Unlike AngularJS, Kendo UI does not feature dependency injection implementation. It is up to the developer to expose the various app level objects (like the router), the simplest thing being to assign it as a field to the window.

    In fact, the Kendo UI routing does not impose restrictions (or recommend standards for) on the application design and code structure, which is a bit different than AngularJS.  

    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