# RequireJS

The minified Kendo UI JavaScript files are [AMD modules](https://en.wikipedia.org/wiki/Asynchronous_module_definition) and work with compatible loaders, such as [RequireJS](http://requirejs.org/), which load only the needed Kendo UI JavaScript files instead of `kendo.all.min.js`.

> * As of 2016, the RequireJS project is mostly superseded by solutions such as [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/) and [SystemJS](https://github.com/systemjs/systemjs), which provide much more extensible API.
> * You may check the help articles on their integration too—[Webpack support](https://www.telerik.com/kendo-jquery-ui/documentation/third-party/webpack) and [SystemJS support](https://www.telerik.com/kendo-jquery-ui/documentation/third-party/systemjs).
> * Due to a bug, the examples below do not work with the official Kendo UI Q1 2016 release. They should work as expected with the versions 2016.1.118 and later.
> * It is not possible to load packages produced by the [Download Builder](https://www.telerik.com/kendo-jquery-ui/documentation/intro/creating-custom-bundles#employ-download-builder) using RequireJS.

## Loading from Local Directories

The following example demonstrates how to load the Kendo UI JavaScript files from a local directory—for example, `js/my-kendo-scripts`. It is assumed that all Kendo UI scripts files are available there.

```pseudo
<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="/styles/my-kendo-styles/default-main.css" />
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
    </head>
    <body>
        <select id="dropdownlist"></select>
        <script>
        require.config({
          baseUrl: "js/my-kendo-scripts/", // the path where the kendo scripts are present
          paths: {
            "jquery": "https://code.jquery.com/jquery-1.9.1.min",
          }
        });

        require([ "jquery", "kendo.dropdownlist.min" ], function($, kendo) {
          console.log(kendo)

          $("#dropdownlist").kendoDropDownList({
            dataSource: {
              data: [{name:"Jane Doe", value: 1}, {name:"John Doe", value: 2}]
            },
            dataTextField: "name",
            dataValueField: "value"
          });
        });
        </script>
    </body>
</html>
```

## Using Bundle Scripts

The following example demonstrates how to use a bundle script with RequireJS.

```pseudo
<!DOCTYPE HTML>
<html>
  <head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@progress/kendo-theme-default@14.9.0/dist/default-main.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
  </head>
  <body>
    <div id="grid"></div>
    <script>

      require.config({
        paths: {
          "jquery": "https://code.jquery.com/jquery-1.9.1.min",
          "jszip": "https://unpkg.com/jszip@3.10.1/dist/jszip.min",
          "kendo.all.min": "https://cdn.jsdelivr.net/npm/@progress/kendo-ui@2026.4.1111/umd/kendo.all.min",
        }
      });

      require([ "jquery", "jszip", "kendo.all.min" ], function($, JSZip, kendo) {
        window.JSZip = JSZip;
        $("#grid").kendoGrid({
          toolbar:["excel"],
          dataSource: {
            data: [{name:"Jane Doe"}, {name:"John Doe"}]
          }
        });
      });
    </script>
  </body>
</html>
```

## Using AngularJS and Kendo UI

The following example demonstrates how to load AngularJS and initialize it with [`angular.bootsrap`](https://docs.angularjs.org/api/ng/function/angular.bootstrap) when all `.js` files are loaded.

```pseudo
<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@progress/kendo-theme-default@14.9.0/dist/default-main.css" />    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
  </head>
  <body>
    <div ng-controller="controller">
      <select kendo-drop-down-list k-options="options"></select>
    </div>

    <script>
      require.config({
        paths: {
          "angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min",
          "jquery": "https://code.jquery.com/jquery-1.9.1.min",
          "kendo.all.min": "https://cdn.jsdelivr.net/npm/@progress/kendo-ui@2026.4.1111/umd/kendo.all.min"
        },
        shim: {
          "angular": { deps: ["jquery"] },
          "kendo.all.min": { deps: ["angular"] }
        }
      });

      require([ "angular", "kendo.all.min" ], function() {
        var app = angular.module("app", ["kendo.directives"]);

        app.controller("controller", ["$scope", function($scope) {
          $scope.options = {
            dataSource: {
              data: [{name:"Jane Doe", value: 1}, {name:"John Doe", value: 2}]
            },
            dataTextField: "name",
            dataValueField: "value"
          };
        }]);

        angular.bootstrap(document, ["app"]);
      });
    </script>
  </body>
</html>
```

## Using Custom Kendo Scripts in AngularJS

The following example demonstrates how to use a [custom Kendo script created with `gulp`](https://www.telerik.com/kendo-jquery-ui/documentation/intro/creating-custom-bundles#use-gulp) with RequireJS and AngularJS. The script for the below example has been created with the following command: `npx gulp custom -c dropdownlist,angular`.

```pseudo
<!DOCTYPE HTML>
<html>
  <head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@progress/kendo-theme-default@14.9.0/dist/default-main.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
  </head>
  <body>
    <div ng-controller="controller">
      <select kendo-drop-down-list k-options="options"></select>
    </div>

    <script>
      require.config({
        paths: {
          "angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.8/angular.min",
          "jquery": "https://code.jquery.com/jquery-3.1.1.min",
          "kendo.angular.min": "dist/js/kendo.custom.min",
          "kendo.dropdownlist.min": "dist/js/kendo.custom.min"
        },
        shim: {
          "angular": { deps: ["jquery"] },
          "kendo.angular.min": { deps: ["angular"] },
          "kendo.dropdownlist.min": { deps: ["kendo.angular.min"] },
        }
      });

      require([ "jquery", "angular", "kendo.angular.min", "kendo.dropdownlist.min" ], function() {
        var app = angular.module("app", ["kendo.directives"]);

        app.controller("controller", ["$scope", function($scope) {
          $scope.options = {
            dataSource: {
              data: [{name:"Jane Doe", value: 1}, {name:"John Doe", value: 2}]
            },
            dataTextField: "name",
            dataValueField: "value"
          };
        }]);

        angular.bootstrap(document, ["app"]);
      });
    </script>
  </body>
</html>
```

## See Also

* [Twitter Bootstrap](https://www.telerik.com/kendo-jquery-ui/documentation/third-party/using-kendo-with-twitter-bootstrap)
* [Angular 2.0](https://www.telerik.com/kendo-jquery-ui/documentation/third-party/angular2)
* [TypeScript](https://www.telerik.com/kendo-jquery-ui/documentation/third-party/typescript)
* [Visual Studio IntelliSense](https://www.telerik.com/kendo-jquery-ui/documentation/third-party/vs-intellisense)
* [SystemJS Support](https://www.telerik.com/kendo-jquery-ui/documentation/third-party/systemjs)
* [Webpack Support](https://www.telerik.com/kendo-jquery-ui/documentation/third-party/webpack)
* [Module Bundlers](https://www.telerik.com/kendo-jquery-ui/documentation/third-party/module-bundlers)
