Referencing Wijmo 5 in Your Applications

To use Wijmo 5 in your applications, include it by adding a few references to your HTML pages.

The minimal set of files required by any Wijmo 5 application is:

• wijmo.js: Contains the Wijmo 5 infrastructure including the Globalize, Event, Control, and CollectionView classes.
• wijmo.css: Contains the CSS rules used for styling all Wijmo 5 controls.

In addition to these, include one or more additional files, depending on which components you use:

• wijmo.grid.js: Contains the FlexGrid control.
• wijmo.chart.js: Contains the FlexChart and FlexPie controls.
• wijmo.input.js: Contains several input controls, including ComboBox, AutoComplete, InputDate, InputTime, InputNumber, InputMask, ListBox, Menu, and Calendar controls.
• wijmo.gauge.js: Contains several gauge controls, including LinearGauge, RadialGauge, and BulletGraph.
• angular.js: Google's AngularJS framework, required for AngularJS applications.
• wijmo.angular.js: Contains AngularJS directives that allow you to use Wijmo 5 controls directly in your markup.
• wijmo.culture.[CultureName].js: Contains culture-specific files used to develop applications in languages other than American English.
• wijmo.theme.[ThemeName].css: Contains CSS rules used to customize the appearance of the Wijmo 5 controls.

As for the actual location of the files, you have two options. You may download Wijmo and copy the required files to the appropriate folders within your application, or you may reference Wijmo files hosted in the cloud, on our Content Delivery Network (CDN). The sections below show examples.

Deploying Wijmo locally

Download the Wijmo files and copy them to a folder within your application. If you place the Wijmo script files in a folder called "scripts/vendors," and the css files in a folder called "styles," you can add the following lines to your HTML pages:

<!-- Wijmo references (required) -->
<script src="scripts/vendor/controls/wijmo.min.js"></script>
<link href="styles/wijmo.min.css" rel="stylesheet"/>

<!-- Wijmo controls (optional, include the controls you need) -->
<script src="scripts/vendor/controls/wijmo.grid.min.js"></script>
<script src="scripts/vendor/controls/wijmo.chart.min.js"></script>
<script src="scripts/vendor/controls/wijmo.input.min.js"></script>
<script src="scripts/vendor/controls/wijmo.gauge.min.js"></script>

<!-- Wijmo custom theme (optional, include the theme you like) -->
<link href="styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>

<!-- Wijmo custom culture (optional, include the culture you want) -->
<script src="scripts/vendor/controls/cultures/wijmo.culture.ja.min.js"></script>

<!-- AngularJS and Wijmo directives (optional, use in AngularJS applications) -->
<script src="scripts/vendor/angular.min.js"></script>
<script src="scripts/vendor/interop/angular/wijmo.angular.min.js"></script>

Deploying Wijmo from CDN

In this case, there is nothing to download. Simply add the following lines to your HTML pages:

<!-- Wijmo references (required) -->
<script src="http://cdn.wijmo.com/5.20171.282/controls/wijmo.min.js"></script>
<link href="http://cdn.wijmo.com/5.20171.282/styles/wijmo.min.css" rel="stylesheet"/>

<!-- Wijmo controls (optional, include the controls you need) -->
<script src="http://cdn.wijmo.com/5.20171.282/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20171.282/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.20171.282/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20171.282/controls/wijmo.gauge.min.js"></script>

<!-- Wijmo custom theme (optional, include the theme you like) -->
<link href="http://cdn.wijmo.com/5.20171.282/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>

<!-- Wijmo custom culture (optional, include the culture you want) -->
<script src="http://cdn.wijmo.com/5.20171.282/controls/cultures/wijmo.culture.ja.min.js"></script>

<!-- AngularJS and Wijmo directives (optional, use in AngularJS applications) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20171.282/interop/angular/wijmo.angular.min.js"></script>

The CDN version includes a Wijmo 5 watermark element at the bottom right of the screen. If you don't want to display the watermark, then you must deploy Wijmo locally as described above.

Note: The order of the references is important. The wijmo.js module must be the first, followed by the control modules, control extensions, and the wijmo.angular module should be included last.