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
Check that Webpack is installed globally. If not, execute the following command:
npm install webpack -g
Install the DevExtreme package in your application folder.
npm install devextreme
Define the Webpack configuration file.
JavaScriptvar path = require('path'); module.exports = { entry: './index.js', output: { filename: 'bundle.js' } };
Link the bundle script file to your application.
HTML<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
Add DevExtreme themes.
HTML<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 your application's entry script and specify modules in it.
JavaScriptvar dialog = require('devextreme/ui/button'); ...
Create the bundle.
webpack
See examples of using Webpack with jQuery, AngularJS, and Knockout on GitHub. The webpack.config.js, index.js, and index.html files contain the main code.
The following list shows additional modules each library/framework requires:
- jQuery: DevExtreme jQuery integration module;
- AngularJS: jQuery, DevExtreme AngularJS and jQuery integration modules;
- Knockout: DevExtreme Knockout integration module.
Use jspm
Install jspm in your application folder.
npm install jspm
Install the DevExtreme package via jspm.
jspm install npm:devextreme
Link the system.js and configuration files to your HTML page.
HTML<script src="jspm_packages/system.js"></script> <script src="config.js"></script>
Create your application's entry script and specify modules in it.
JavaScriptimport "devextreme/ui/button"; ...
Import your application's main entry point on the HTML page.
HTML<script> System.import('./index.js'); </script>
See examples of using jspm with jQuery, AngularJS, and Knockout on GitHub. The index.js and index.html files contain the main code.
The following list shows additional modules each library/framework requires:
- jQuery: DevExtreme jQuery integration module;
- AngularJS: jQuery, DevExtreme AngularJS and jQuery integration modules;
- Knockout: DevExtreme Knockout integration module.
Use RequireJS
Install RequireJS and DevExtreme in your application folder.
npm install requirejs devextreme
Use the RequireJS conversion tool to convert the DevExtreme modules from CommonJS to AMD:
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
Add DevExtreme themes to your application.
HTML<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" />
Link RequireJS and define its configuration object.
HTML<script src="node_modules/requirejs/require.js"></script> <script> require.config({ ... }); </script>
See examples of using RequireJS with jQuery, AngularJS, and Knockout on GitHub. The index.html file contains the main code.
The following list shows additional modules each library/framework requires:
- jQuery: DevExtreme jQuery integration module;
- AngularJS: jQuery, DevExtreme AngularJS and jQuery integration modules;
- Knockout: DevExtreme Knockout integration module.
If you have technical questions, please create a support ticket in the DevExpress Support Center.