Include HTML contents inside your Canvas page

When you have lots of HTML components, your HTML page can easily contain hundreds of lines of codes. The more HTML components you add in your HTML page, the harder it will be to find information or to understand how it has been built.

Instead of creating all the HTML components in a single HTML file, you can split the components into different files and then use the Angular’s ng-include directive to include them back into the main HTML page. 

The advantages of this method are that it enables you to easily reuse HTML components in your other pages and also to better organize your HTML page so it will be easier to read and to understand how it has been built.

In the Visualisations sample, there is an example of ng-include:

In the main HTML page (html/samples/sample-advance-chart.html), the Chart Type 1 and Chart Type 2 HTML codes are in 2 separate HTML files. They are including in the main page using the  ng-include directive:

<div class="row">    <div class="col-md-6" ng-include="page.pageLeftlocation">  </div>        <div class="col-md-6" ng-include="page.pageRightlocation"> </div></div>

In this sample the name of the pages “pageLeftLocation” and “pageRightLocation” are defined in the associated JS file js/controllers/sample/sample-advance-chart.js:

You do not have to store the variable name in the JS file. You can alternatively set up the full path to the HTML file as a String value of the ng-include.

For example, let’s replace the Chart Type 1 block by the SUBNM component page:

<div class="row">    <div class="col-md-6" ng-include="'html/samples/components/subnm.html'"> </div>    <div class="col-md-6" ng-include="page.pageRightlocation"> </div></div>

Save the HTML changes and refresh the Visualisations page. You will see now the SUBNM page as part of the Visualisations sample:

Parameters which are defined in the main page can be used in the sub-pages. If you change the value in the main page for example the Region, you will see that the charts which are in different pages are updated as well.