I am using IBM Worklight Studio, Kendo UI and Angular JS. I want a basic mobile app with a header(nav bar), footer(tab strip) and a content area in the middle that will be populated based on the Angular JS route.
Using Kendo UI without Angular JS, everything is great. The screen is formatted nicely, fonts are crisp and all is well. See the 1st image attached below.
Using Kendo UI with Angular JS for routing, and things don't look as nice. I can't get the tab bar to stay at the bottom of the screen. It seems to be directly under the content, but is not fixed to the bottom of the visible area. Also, the fonts and images for the data icons don't look as nice. The app basically works ok. I can click on a tab bar item and Angular will route the request and show me the correct view. But it seems that the Kendo UI elements aren't displaying correctly.
Code snippets are shown below. If you have any recommendations I'd appreciate it. Thanks.
Sample Code - IBM Worklight and Kendo UI - index.html
Sample Code - IBM Worklight, Kendo UI and Angular JS
index.html
main.js
app.js
customers.js - Controller
login.js - Controller
login.html - View No. 1
customers.html - View No. 2
Using Kendo UI without Angular JS, everything is great. The screen is formatted nicely, fonts are crisp and all is well. See the 1st image attached below.
Using Kendo UI with Angular JS for routing, and things don't look as nice. I can't get the tab bar to stay at the bottom of the screen. It seems to be directly under the content, but is not fixed to the bottom of the visible area. Also, the fonts and images for the data icons don't look as nice. The app basically works ok. I can click on a tab bar item and Angular will route the request and show me the correct view. But it seems that the Kendo UI elements aren't displaying correctly.
Code snippets are shown below. If you have any recommendations I'd appreciate it. Thanks.
Sample Code - IBM Worklight and Kendo UI - index.html
<!DOCTYPE HTML>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>jktest</
title
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
>
<!--
<
link
rel
=
"shortcut icon"
href
=
"images/favicon.png"
>
<
link
rel
=
"apple-touch-icon"
href
=
"images/apple-touch-icon.png"
>
-->
<
link
rel
=
"stylesheet"
href
=
"css/main.css"
>
<
link
href
=
"js/libs/kendoui/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"js/libs/kendoui/styles/kendo.common.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"js/libs/kendoui/styles/kendo.silver.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"js/libs/kendoui/styles/kendo.silver.mobile.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"js/libs/kendoui/styles/kendo.dataviz.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"js/libs/kendoui/styles/kendo.dataviz.default.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<!-- jQuery -->
<!-- Using the jQuery in Kendo UI -->
<
script
src
=
"js/libs/kendoui/js/jquery.min.js"
></
script
>
</
head
>
<
body
style
=
"display: none;"
>
<!--application UI goes here-->
<
div
data-role
=
"view"
id
=
"navbar-home"
data-title
=
"JK Test App"
>
<!-- Header -->
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
>JK Test App</
span
>
</
div
>
</
header
>
<!-- Main Content -->
<
h2
>Hello Worklight</
h2
>
<!-- Footer -->
<
footer
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
data-icon
=
"home"
href
=
"#"
>Accounts</
a
>
<
a
data-icon
=
"organize"
href
=
"#"
>View All</
a
>
<
a
href
=
"#"
data-icon
=
"more"
>More</
a
>
</
div
>
</
footer
>
</
div
>
<
script
src
=
"js/initOptions.js"
></
script
>
<
script
src
=
"js/main.js"
></
script
>
<
script
src
=
"js/messages.js"
></
script
>
<!-- Kendo UI -->
<
script
src
=
"js/libs/kendoui/js/kendo.all.min.js"
></
script
>
<
script
> var kapp = new kendo.mobile.Application(); </
script
>
</
body
>
</
html
>
Sample Code - IBM Worklight, Kendo UI and Angular JS
index.html
01.
<!DOCTYPE HTML>
02.
<
html
>
03.
<
head
>
04.
<
meta
charset
=
"UTF-8"
>
05.
<
title
>Test App</
title
>
06.
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
>
07.
<!--
08.
<
link
rel
=
"shortcut icon"
href
=
"images/favicon.png"
>
09.
<
link
rel
=
"apple-touch-icon"
href
=
"images/apple-touch-icon.png"
>
10.
-->
11.
12.
<!-- CSS -->
13.
<
link
rel
=
"stylesheet"
href
=
"css/main.css"
>
14.
15.
<
link
href
=
"js/libs/kendoui/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
16.
<
link
href
=
"js/libs/kendoui/styles/kendo.common.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
17.
<
link
href
=
"js/libs/kendoui/styles/kendo.silver.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
18.
<
link
href
=
"js/libs/kendoui/styles/kendo.silver.mobile.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
19.
<
link
href
=
"js/libs/kendoui/styles/kendo.dataviz.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
20.
<
link
href
=
"js/libs/kendoui/styles/kendo.dataviz.default.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
21.
22.
23.
<!-- jQuery -->
24.
<!-- Using the jQuery in Kendo UI -->
25.
<
script
src
=
"js/libs/kendoui/js/jquery.min.js"
></
script
>
26.
27.
<!-- Angular JS -->
28.
<
script
src
=
"js/libs/angular/1.3/angular.min.js"
></
script
>
29.
<
script
src
=
"js/libs/angular/1.3/angular-route.min.js"
></
script
>
30.
31.
<!-- application scripts -->
32.
<
script
src
=
"js/app.js"
></
script
>
33.
34.
<!-- Controllers -->
35.
<
script
src
=
"js/controllers/login.js"
></
script
>
36.
<
script
src
=
"js/controllers/customers.js"
></
script
>
37.
38.
<!-- <script>window.$ = window.jQuery = WLJQ;</script> -->
39.
40.
41.
42.
</
head
>
43.
<
body
style
=
"display:none;"
>
44.
<
div
>
45.
<!--application UI goes here-->
46.
47.
<!-- Header -->
48.
<
kendo-mobile-header
>
49.
<
kendo-mobile-nav-bar
>
50.
<
kendo-view-title
>Test App</
kendo-view-title
>
51.
</
kendo-mobile-nav-bar
>
52.
</
kendo-mobile-header
>
53.
54.
55.
<!-- Main Content -->
56.
<
div
>
57.
<
div
class
=
"main"
ng-view></
div
>
58.
</
div
>
59.
60.
<!-- Footer -->
61.
<
kendo-mobile-footer
>
62.
<
kendo-mobile-tab-strip
>
63.
<
a
href
=
"#/"
data-icon
=
"contacts"
>Welcome</
a
>
64.
<
a
href
=
"#/customers"
data-icon
=
"home"
>Accounts</
a
>
65.
</
kendo-mobile-tab-strip
>
66.
</
kendo-mobile-footer
>
67.
68.
69.
</
div
>
70.
71.
<!-- Standard Worklight Stuff -->
72.
<
script
src
=
"js/initOptions.js"
></
script
>
73.
<
script
src
=
"js/main.js"
></
script
>
74.
<
script
src
=
"js/messages.js"
></
script
>
75.
76.
<!-- Kendo UI -->
77.
<
script
src
=
"js/libs/kendoui/js/kendo.all.min.js"
></
script
>
78.
79.
<
script
type
=
"text/javascript"
>
80.
WL.Logger.debug("Loading main page");
81.
</
script
>
82.
</
body
>
83.
</
html
>
main.js
1.
console.log("Loading Angular");
2.
angular.element(document).ready(function() {
3.
angular.bootstrap(document, ['App']);
4.
location.hash = "/login";
5.
});
app.js
01.
var app = angular.module('App', ['ngRoute','kendo.directives']);
02.
app.config(['$routeProvider', function($routeProvider) {
03.
$routeProvider.when('/customers',
04.
{
05.
templateUrl:'views/customers.html',
06.
controller: 'CustomersController'
07.
}).
08.
when('/login',
09.
{
10.
templateUrl:'views/login.html',
11.
controller: 'LoginController'
12.
}).
13.
otherwise({
14.
redirectTo: '/login'
15.
});;
16.
}]);
customers.js - Controller
1.
app.controller('CustomersController',
2.
function($scope) {
3.
$scope.custdata = {
4.
'custno':'12345',
5.
'custname':'JK, Inc'
6.
};
7.
}
8.
);
login.js - Controller
1.
app.controller('LoginController',
2.
function($scope) {
3.
$scope.username = 'JK';
4.
}
5.
);
login.html - View No. 1
1.
<
h1
>This is the login page</
h1
>
2.
<
br
/>
3.
<
br
/>
4.
Username is {{username}}
5.
<
br
/>
6.
<
a
href
=
"#/customers"
>Go to Customers</
a
>
customers.html - View No. 2
1.
<
h1
>This is the Customers page</
h1
>
2.
<
br
/>
3.
<
br
/>
4.
Customer Number: {{custdata.custno}}
5.
<
br
/>
6.
Customer Name: {{custdata.custname}}
7.
<
br
/>
8.
<
a
href
=
"#/login"
>Go to Login</
a
>