X

Geertjan's Blog

  • November 3, 2015

Oracle JET Meets AngularJS

Geertjan Wielenga
Product Manager

Here's the "ojDialGauge" component from Oracle JET in an AngularJS application:

What's the point of doing the above? Well, by integrating Oracle JET into an AngularJS application, you're able to see that Oracle's JavaScript DVT (Data Visualization Toolkit) components can be used anywhere you like.

How I achieved the above:

  1. I forked the angular-requirejs-seed template, because the AngularJS seed is not enough since Oracle JET uses RequireJS, and enhanced it by adding JQuery and JQuery UI to it, in preparation for integrating Oracle JET components into it.

  2. I looked at the Oracle JET Quick Start template and set my angular-requirejs-seed fork up in such a way that it had as much of the infrastructure of the Oracle JET Quick Start template as possible.

  3. I rewrote the "require-config.js" file to combine the two templates.

  4. Then I wrote the AngularJS controller as follows:
    .controller('View1Ctrl', function($scope) {
    $scope.gaugeValue = 50;
    $('#gauge').ojDialGauge({
    value: $scope.gaugeValue,
    title: "Value: 50 Max: 100",
    readOnly: false,
    animationOnDisplay: 'auto',
    indicator: 'needleAlta',
    optionChange: function(e, data) {
    if(data.option === "value") {
    $scope.gaugeValue = data['value'];
    console.log('New value:' + $scope.gaugeValue);
    }
    },
    background: 'circleAlta',
    metricLabel: {rendered: 'on',
    style: 'font-size: 18px; font-weight: bold; font-family: Georgia, Times New Roman, serif;'}
    });
    })
  5. Which enables the HTML view template in AngularJS to be as follows:
    <div id="gauge"/>
    Value: {{gaugeValue}}

It's a start and not perfect yet, a proof of concept, and it works.

Join the discussion

Comments ( 2 )
  • Vivek Friday, May 6, 2016

    Hi Geertjan Wielenga!

    How are you?

    Thank you for posting such an informative article. Can you provide sample code used in this article?

    Please share through github.

    Regards,

    Vivek


  • Mudabbir Tuesday, June 20, 2017
    Hi Geertjan Wielenga!

    Thank you for posting such an informative article.

    I have a Angular s application running and i want to use oracle jet charts in it. Can you please share a sample code to achieve the same.

    Thanks & Regards
    Mudabbir
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.