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!
3 Answers, 1 is accepted
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
Rank 1
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' ]);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
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