DevExtreme Angular - Link Modules
DevExtreme comes in pre-assembled bundles. dx.viz.js includes Charts, Gauges, Funnel, VectorMap, and other data visualization widgets. dx.web.js includes Grids, Scheduler, Form, and various editors. dx.viz-web.js and dx.all.js compile the previous two bundles. Bundles that include a particular widget are listed on the widget's overview page in the API reference.
Alternatively, you can use DevExtreme modules to import only the functionality you require. Unlike the bundles, modules are compact and can be loaded on demand. This optimizes memory consumption and speeds up your application.
You can create a smaller bundle from modules using Webpack or load modules using jspm or RequireJS.
Use Webpack
First, ensure the Webpack is installed globally. If not, execute the following command.
npm install webpack -g
Install the DevExtreme package to the directory where you wish to store the files.
npm install devextreme
To link up the modules to your application using Webpack, begin by defining the configuration object.
var path = require('path'); module.exports = { entry: './index.js', output: { filename: 'bundle.js' } };
Link the bundle script file to your HTML page.
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
Add themes to your application.
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
Create an entry script of your application. For example, it can specify required modules.
var $ = require('jquery'); var dialog = require('devextreme/ui/button'); ...
Then, create the bundle.
webpack
The example below demonstrates how to create an application with a single button using modules, and how to configure Webpack to pick up and bundle all the required scripts to your application.
jQuery
You can download the example from GitHub. To use it, follow the instructions on GitHub.
webpack.config.js
var path = require('path'); module.exports = { entry: './index.js', output: { filename: 'bundle.js' } };
index.js
var $ = require('jquery'); var dialog = require('devextreme/ui/dialog'); require('devextreme/ui/button'); $("#myButton").dxButton({ text: "Say 'Hello world'", onClick: function() { dialog.alert('Hello world!', '', false); } });
index.html
<!DOCTYPE html> <html> <head> <title>DevExtreme with Webpack and Knockout example</title> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" /> </head> <body> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"> <div id="myButton"></div> </div> <!-- Include the bundle script --> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
AngularJS
You can download the example from GitHub. To use it, follow the instructions on GitHub.
webpack.config.js
var path = require('path'); module.exports = { entry: './index.js', output: { filename: 'bundle.js' } };
index.js
var angular = require('angular'); var dialog = require('devextreme/ui/dialog'); require('devextreme/integration/angular'); require('devextreme/ui/button'); var myApp = angular.module('myApp', ['dx']); myApp.controller("myController", function($scope) { $scope.buttonOptions = { text: "Say 'Hello world'", onClick: function() { dialog.alert('Hello world!', '', false); } }; }); angular.bootstrap(document, ['myApp']);
index.html
<!DOCTYPE html> <html> <head> <title>DevExtreme with Webpack and AngularJS example</title> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" /> </head> <body> <div ng-controller="myController"> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"> <div dx-button="buttonOptions"></div> </div> </div> <!-- Include the bundle script --> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
Knockout
You can download the example from GitHub. To use it, follow the instructions on GitHub.
webpack.config.js
var path = require('path'); module.exports = { entry: './index.js', output: { filename: 'bundle.js' } };
index.js
var ko = require('knockout'); var dialog = require('devextreme/ui/dialog'); require('devextreme/integration/knockout'); require('devextreme/ui/button'); var viewModel = { buttonOptions: { text: "Say 'Hello world'", onClick: function() { dialog.alert('Hello world!', '', false); } } }; ko.applyBindings(viewModel);
index.html
<!DOCTYPE html> <html> <head> <title>DevExtreme with Webpack and Knockout example</title> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" /> </head> <body> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"> <div data-bind="dxButton: buttonOptions"></div> </div> <!-- Include the bundle script --> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
Use jspm
First, install jspm in your application folder. For detailed information on installing, see the jspm documentation.
npm install jspm
jspm install npm:devextreme
To link up the modules to your application using jspm, first add links to the library and then the configuration file to your application.
<script src="jspm_packages/system.js"></script> <script src="config.js"></script>
Create an entry script of your application. For example, it can specify the required modules.
import $ from 'jquery'; import 'devextreme/ui/button'; ...
Then, in the HTML page, import your application's main entry point.
<script> System.import('./index.js'); </script>
The example below demonstrates how to create an application with a single button using the modules from a local directory.
jQuery
You can download the example from GitHub. To use it, follow the instructions on GitHub.
index.js
import 'devextreme/dist/css/dx.common.css!'; import 'devextreme/dist/css/dx.light.css!'; import $ from 'jquery'; import 'devextreme/ui/button'; import dialog from 'devextreme/ui/dialog'; $("#myButton").dxButton({ text: "Say 'Hello world'", onClick: function() { dialog.alert('Hello world!', '', false); } });
index.html
<!DOCTYPE html> <html> <head> <title>DevExtreme with Jspm and jQuery example</title> <!--Include SystemJS loader and the config file--> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> </head> <body> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"> <div id="myButton"></div> </div> <!--Import of the application main entry point--> <script> System.import('./index.js'); </script> </body> </html>
AngularJS
You can download the example from GitHub. To use it, follow the instructions on GitHub.
index.js
import 'devextreme/dist/css/dx.common.css!'; import 'devextreme/dist/css/dx.light.css!'; import angular from 'angular'; import 'devextreme/integration/angular'; import dialog from 'devextreme/ui/dialog'; import 'devextreme/ui/button'; var myApp = angular.module('myApp', ['dx']); myApp.controller("myController", function($scope) { $scope.buttonOptions = { text: "Say 'Hello world'", onClick: function() { dialog.alert('Hello world!', '', false); } }; }); angular.bootstrap(document, ['myApp']);
index.html
<!DOCTYPE html> <html> <head> <title>DevExtreme with Jspm and AngularJS example</title> <!--Include SystemJS loader and the config file--> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> </head> <body> <div ng-controller="myController"> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"> <div dx-button="buttonOptions"></div> </div> </div> <!--Import of the application main entry point--> <script> System.import('./index.js'); </script> </body> </html>
Knockout
You can download the example from GitHub. To use it, follow the instructions on GitHub.
index.js
import 'devextreme/dist/css/dx.common.css!'; import 'devextreme/dist/css/dx.light.css!'; import ko from 'knockout'; import 'devextreme/integration/knockout'; import dialog from 'devextreme/ui/dialog'; import 'devextreme/ui/button'; var viewModel = { buttonOptions: { text: "Say 'Hello world'", onClick: function() { dialog.alert('Hello world!', '', false); } } }; ko.applyBindings(viewModel);
index.html
<!DOCTYPE html> <html> <head> <title>DevExtreme with Webpack and Knockout example</title> <!--Include SystemJS loader and the config file--> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> </head> <body> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"> <div data-bind="dxButton: buttonOptions"></div> </div> <!--Import of the application main entry point--> <script> System.import('./index.js'); </script> </body> </html>
Use RequireJS
First, install RequireJS to your application folder.
npm install requirejs
Then, install the DevExtreme package.
npm install devextreme
DevExtreme modules are defined using the CommonJS format. RequireJS does not support this format. Thus, convert DevExtreme modules to the AMD format before using them with RequireJS. Use the RequireJS conversion tool to convert modules. Follow these steps to convert the modules.
Add the devextreme package to the 'node_modules/devextreme' directory
npm i devextreme
Add global 'r_js' command
npm i r.js -g
Convert the devextreme package and save it to the 'devextreme_amd' directory
r_js -convert node_modules/devextreme devextreme_amd
To link up the modules to your application using RequireJS, begin by adding themes to your application.
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
Then, link RequireJS and define the configuration object.
<script src="node_modules/requirejs/require.js"></script>
The example below demonstrates how to create an application with a single button using the modules from a local directory.
jQuery
You can download the example from GitHub. To use it, follow the instructions on GitHub.
<!DOCTYPE html> <html> <head> <title>DevExtreme with RequireJS and jQuery example</title> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" /> <!-- Include RequireJS --> <script src="node_modules/requirejs/require.js"></script> </head> <body> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"> <div id="myButton"></div> </div> <script> require.config({ paths: { "jquery": "node_modules/jquery/dist/jquery", // The path where the devExtreme modules are located. "devextreme": "node_modules/devextreme" } }); // Loads the required scripts. require(["jquery", "devextreme/ui/dialog", "devextreme/ui/button"], function($, dialog) { $("#myButton").dxButton({ text: "Say 'Hello world'", onClick: function() { dialog.alert('Hello world!', '', false); } }); }); </script> </body> </html>
AngularJS
You can download the example from GitHub. To use it, follow the instructions on GitHub.
<!DOCTYPE html> <html> <head> <title>DevExtreme with RequireJS and AngularJS examples</title> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" /> <!-- Include RequireJS --> <script src="node_modules/requirejs/require.js"></script> </head> <body> <div ng-controller="myController"> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"> <div dx-button="buttonOptions"></div> </div> </div> <script> require.config({ paths: { "jquery": "node_modules/jquery/dist/jquery", "angular": "node_modules/angular/angular", // The path where the devExtreme modules are located. "devextreme": "node_modules/devextreme" }, shim: { "angular": { deps: ["jquery"], exports: 'angular' }, "devextreme/integration/angular": { deps: ['angular'] } } }); // Loads the required scripts. Note that for correct integration with AngularJS, // you should load the DevExtreme integration module. require(["angular", "devextreme/ui/dialog", "devextreme/integration/angular", "devextreme/ui/button"], function(angular, dialog) { var myApp = angular.module('myApp', ['dx']); myApp.controller("myController", function($scope) { $scope.buttonOptions = { text: "Say 'Hello world'", onClick: function() { dialog.alert('Hello world!', '', false); } }; }); angular.bootstrap(document, ['myApp']); }); </script> </body> </html>
Knockout
You can download the example from GitHub. To use it, follow the instructions on GitHub.
<!DOCTYPE html> <html> <head> <title>DevExtreme with RequireJS and Knockout examples</title> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" /> <!-- Include RequireJS --> <script src="node_modules/requirejs/require.js"></script> </head> <body> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"> <div data-bind="dxButton: buttonOptions"></div> </div> <script> require.config({ paths: { "jquery": "node_modules/jquery/dist/jquery", "knockout": "node_modules/knockout/build/output/knockout-latest", // The path where the DevExtreme modules are located. "devextreme": "node_modules/devextreme" } }); // Loads the required scripts. Note that for correct integration with KnockoutJS, // you should load the devExtreme integration module. require(["knockout", "devextreme/ui/dialog", "devextreme/integration/knockout", "devextreme/ui/button"], function(ko, dialog) { viewModel = { buttonOptions: { text: "Say 'Hello world'", onClick: function() { dialog.alert('Hello world!', '', false); } } }; ko.applyBindings(viewModel); }); </script> </body> </html>
If you have technical questions, please create a support ticket in the DevExpress Support Center.