How to add Javascript support to your Canvas page

Feeling a little more adventurous? Things can potentially be simpler if handled via Javascript. But how do you add that to your Canvas page? Here is how:

(If your are familiar with AngularJS and you understand how to configure and to add an AngularJS controller already, you can proceed directly to step 3.)

1) Create a .js file

Pick an existing .js file inside js/controllers folder (preferably with as little code inside as possible i.g. home.js)

2) Name the .JS file

Duplicate this file and rename to match your existing Canvas page for easier reference (i.g. If your Canvas page is named finance.html, name your js file to be finance.js)

3) add controller in your html page

Now, open your Canvas page and add an attribute, ng-controller=”<controller name>”, to the root element (i.g. ShowCanvas)

<div ng-controller="ShowCanvas">

4) Change Controller object name

Open the .js file that you have just created, and change the name of the controller object defined with the name you have configures on your ng-controller attribute in step 3 (i.g. ShowCanvas)

app.controller('ShowCanvas', ['$scope', '$rootScope', '$interval', '$timeout', '$state', '$stateParams', '$http', function($scope, $rootScope, $interval, $timeout, $state, $stateParams, $http) {}]);

And you are done! You can now write JavaScript codes to interact and control your Canvas page!

5) Write javascript

To test it all out, you can try writing a simple variable assignment such as:

app.controller('Sample3Ctr', ['$scope', '$rootScope', '$interval', '$timeout', '$state', '$stateParams', '$http', function($scope, $rootScope, $interval, $timeout, $state, $stateParams, $http) {$scope.message = 'My Canvas' ;}]);

And to display it in your Canvas page, simply write {{message}} anywhere in there. When you refresh your page, you should be able to see below instead of {{message}}: