integration with Angular

2 posts, 0 answers
  1. Alexander
    Alexander avatar
    1 posts
    Member since:
    Dec 2014

    Posted 16 Dec 2014 Link to this post

    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?



  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 18 Dec 2014 Link to this post

    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!
     
Back to Top