Kendo UI 2017不适用于angular + angularAMD + requirejs

时间:2017-09-19 07:13:29

标签: angularjs kendo-ui requirejs angular-amd

Kendo UI 2017似乎不适用于requirejs + angular + angularAMD。但是当我改用2015年的剑道版时,它运行正常。

关于如何克服这个问题的任何建议?

这是示例应用。 请注意 - 如果我将剑道版本更改为2015,则可以使用。

https://plnkr.co/edit/DjOq6BfOVSHvIuSHliH8?p=preview

的index.html

<!DOCTYPE html>
<html>
<head>
       <script data-main="main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
       <link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" rel="stylesheet" />
</head>
<body>
       <h1>Hello Plunker!</h1>
       <div kendo-tab-strip k-content-urls="[ null, null]">
              <ul>
                     <li class="k-state-active">First tab</li>
                     <li>Second tab</li>
              </ul>
              <div style="padding: 1em">
                     This is the first tab
              </div>
              <div style="padding: 1em">
                     This is the second tab
              </div>
       </div>
</body>
</html>

main.js

require.config({
       baseUrl: "",
       waitSeconds: 0,
       paths: {
              'jquery': 'https://code.jquery.com/jquery-2.1.3.min',
              'angular': 'https://code.angularjs.org/1.3.12/angular',
              'angularamd': '//cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min',
              'kendo': 'https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min',
              //'kendo' : 'https://kendo.cdn.telerik.com/2015.1.429/js/kendo.all.min'  --This version works
       },
       shim: {
              'angularAMD': ['angular'],
              'kendo': ['jquery', 'angular']
       },
       deps: ['application-configuration']
});

应用configuration.js

define(['angularamd', 'kendo'], function (angularAMD) {
       var app = angular.module("mainModule", ['kendo.directives']);
       angularAMD.bootstrap(app);
       return app;
});

1 个答案:

答案 0 :(得分:-1)

在引用require.js后,添加以下代码块:

<script>
  define.amd = null;
</script>

define.amd是一种通知javascript库正在使用脚本加载器的标准方法。我还没有找到线索,但我看到一些库检查了define.amd。从Kendo UI的文档https://docs.telerik.com/kendo-ui/third-party/using-kendo-with-requirejs,有一个声明表明Kendo UI js已经是AMD模块。

The minified Kendo UI JavaScript files are AMD modules and work with compatible loaders such as RequireJS. You can use this feature to load only the needed Kendo UI JavaScript files instead of kendo.all.min.js.

我的解决方法欺骗脚本认为没有任何脚本加载器存在。希望这个帮助