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

integration with Angular

1 Answer 133 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
Top achievements
Rank 1
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>
        <!-- Make sure all your bars are the first things in your <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>
 
 
    <!-- Cordova reference, this is added to your app when it's built. -->
    <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>
</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?



1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 18 Dec 2014, 12:06 PM
Hello Alexander,

you should move the jQuery script reference before the angular one.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Apache Cordova
Asked by
Alexander
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or