CODEWITHSUNDEEP
angularjskendo-uikendo-mobile
coach_rob
coach_rob

Reputation: 901

Angular working with KendoUI mobile

So, I'm trying to get angularjs working with KendoUI mobile...hybrid mobile app.

HTML:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="kendo/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />

<script src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ngApp.js"></script>
</head>
<body>

<div data-role="layout" data-id="main">
    <div data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
        </div>
    </div>

    <!-- application views will be rendered here -->

</div>

<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation">
    <div data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </div>
    <ul data-role="listview">
        <li>
            <a href="views/home.html">Home</a>
        </li>
        <li>
            <a href="views/settings.html">Settings</a>
        </li>
        <li>
            <a href="views/contacts.html">Contacts</a>
        </li>
    </ul>
</div>

AngularJS:

(function () {

var ngApp = angular.module("MyApp", ["kendo.directives"]);

ngApp.controller('HomeController', ['$scope', function ($scope) {
    $scope.foo = 'something';
    alert("HOME CONTROLLER");
}]);
}());

Part View HTML:

<div data-role="view" data-title="AskLaw" data-layout="main" data-model="APP.models.home" ng-controller="HomeController">
<h1 data-bind="html: title"></h1>
<span>{{foo}}</span>
</div>

What I'm thinking "should" happen is the ng-controller="HomeController" should cause the HomeController to fire and populate the $scope.foo variable. This should bind to the {{foo}} on the view page as well as show the alert...not happenin'.

Any ideas?

Upvotes: 1

Views: 815

Answers (2)

Gatsby
Gatsby

Reputation: 765

The Telerik resource linked here should be helpful to devs looking to optimally integrate AngularJS functionality into Kendo UI Mobile: http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial

Upvotes: 1

Petyo Ivanov
Petyo Ivanov

Reputation: 1137

Kendo UI developer here, the Kendo UI mobile application and AngularJS do not work well together currently. The good news is that this is something we are actually working on right now - it will be released in our upcoming 2014 Q3 release, due November.

Upvotes: 3

Related Questions