This is a migrated thread and some comments may be shown as answers.

integration with Angular

1 Answer 178 Views

Apache Cordova

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Alexander asked on 16 Dec 2014, 10:21 AM

I am trying integrate kendo ui in my project.
I have error:

TypeError: undefined is not a function
at d (http://localhost:4429/scripts/kendo/kendo.angular.min.js:9:1142)
at o (http://localhost:4429/scripts/kendo/kendo.angular.min.js:9:1567)
at link (http://localhost:4429/scripts/kendo/kendo.angular.min.js:9:11776)
at nodeLinkFn (http://localhost:4429/scripts/angular/angular.js:6737:13)
at compositeLinkFn (http://localhost:4429/scripts/angular/angular.js:6131:13)
at compositeLinkFn (http://localhost:4429/scripts/angular/angular.js:6134:13)
at publicLinkFn (http://localhost:4429/scripts/angular/angular.js:6027:30)
at link (http://localhost:4429/scripts/angular-route/angular-route.js:915:7)
at nodeLinkFn (http://localhost:4429/scripts/angular/angular.js:6737:13)
at compositeLinkFn (http://localhost:4429/scripts/angular/angular.js:6131:13) <div kendo-mobile-application="" ng-app="myApp">angular.js:10103 (anonymous function)

Some code from my files:
index.html

...<body>

<header class="bar bar-nav">

<button class="btn btn-link btn-nav pull-left">

<a class="" href="#" ><span class="icon icon-left-nav"></span>Back</a>

</button>

<a class="tab-item" href="#/"><h1 class="title">Title</h1></a>

</header>

<div class="content" ng-view ></div>

<script src="cordova.js"></script>

<script src="scripts/platformOverrides.js"></script>

<script src="scripts/angular/angular.js"></script>

<script src="scripts/angular-route/angular-route.js"></script>

<script src="scripts/angular-filter/dist/angular-filter.js"></script>

<script src="scripts/kendo/jquery.min.js"></script>

<script src="scripts/kendo/kendo.all.min.js"></script>

<script src="scripts/kendo/kendo.angular.min.js"></script>

<script src="scripts/index.js"></script>

<script src="scripts/app.js"></script>

<script src="scripts/services.js"></script>

<script src="scripts/controllers.js"></script>

<script src="scripts/filters.js"></script>

<script src="scripts/directives.js"></script>

</body>

app.js

angular.module('myApp', [

'ngRoute', 'angular.filter', 'kendo.directives',

'myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers'

]).

config(['$routeProvider', function($routeProvider) {

$routeProvider.when('/', { templateUrl: 'partials/main.html', controller: 'MainCtrl' });

$routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'Ctrl1' });

$routeProvider.otherwise({redirectTo: '/'});

}])

partial1.html

<div style="padding: 10px;">

<div kendo-mobile-application ng-app="myApp">

<kendo-mobile-view id="index" ng-controller="Ctrl1">

<kendo-mobile-list-view id="featured" class="item-list" k-data-source="sushiCart.productsDataSource">

<div k-template>{{dataItem.name}}</div>

</kendo-mobile-list-view>

</kendo-mobile-view>

</div>

controllers.js

angular.module('myApp.controllers', ['kendo.directives'])

.run(['sushiCart', function (sushiCart) {

sushiCart.init();

}])

.service('sushiCart', function () {

var menuJSON = [

{

"id": 1,

"name": "Sashimi salad",

"price": 12.00,

"image": "sashimi-salad.jpg",

"category": "Cold starters",

"description": "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.",

"featured": true

},

{

"id": 19,

"name": "Yaki Udon",

"price": 11.50,

"image": "yaki-udon.jpg",

"category": "Hot Dishes",

"description": "Udon noddles with chicken, king prawns and vegetables.",

"featured": true

}

];

this.init = function () {

//the application DataSource

this.productsDataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/echo",

data: {

"json": JSON.stringify(menuJSON)

},

dataType: "json"

}

});

//observable array that will be used to store products that user has selected

this.added = new kendo.data.ObservableArray([]);

//field that will hold reference to the last selected product (used for displaying the details)

this.currentItem = null;

};

})

.controller('Ctrl1', ['$scope', 'sushiCart', function ($scope, sushiCart) {

$scope.sushiCart = sushiCart;

}]);

I think problem in kendo-mobile-application inside ng-view. How to resolve it?

integration with Angular

1 Answer, 1 is accepted