Qliksense mashup using Angular material

prabhuappu — Fri, 25 Mar 2016 04:41:26 GMT

Hi,

How to use angular material in qliksesne mashup. I'm getting error while injecting ngMaterial in angular module.

below is the code that i'm using,

var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 );


var config = {
  host: window.location.hostname,
  prefix: prefix,
  port: window.location.port,
  isSecure: window.location.protocol === "https:"
};

require.config( {
  baseUrl: (config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "" ) + config.prefix + "resources",
    paths: {
        //'app': '../extensions/AngularMaterial/app',
        'angular': '../extensions/AngularMaterial/bower_components/angular/angular',
        'ngAnimate': '../extensions/AngularMaterial/bower_components/angular-animate/angular-animate.min',
        'ngAria': '../extensions/AngularMaterial/bower_components/angular-aria/angular-aria.min',
        'ngMessages': '../extensions/AngularMaterial/bower_components/angular-messages/angular-messages.min',
        'ngMaterial': '../extensions/AngularMaterial/bower_components/angular-material/angular-material.min'
    }
} );

require( ["js/qlik", 'angular', 'ngAnimate', 'ngAria', 'ngMessages', 'ngMaterial'], 
function ( qlik, angular, ngAnimate, ngAria, ngMessages, ngMaterial ) {


  $("#closeerr").on('click',function(){
  $("#errmsg").html("").parent().hide();
  });
  qlik.setOnError( function ( error ) {
  $("#errmsg").append("<div>"+error.message+"</div>").parent().show();
  } );


  //
     angular.module('BlankApp', ['ngMaterial']);



  //callbacks -- inserted here --
  //open apps -- inserted here --


  //get objects -- inserted here --
  //create cubes and lists -- inserted here --


} );

HTML File:

<body ng-app="BlankApp"  role="document" style="overflow: auto">
     <md-button>Data</md-button>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="AngularMaterial.js"></script>
</body>

Please refer the attached image for error message. I'm not sure whether i'm following a proper way to do this. Please help me.

Thanks in Advance.

Regards,

Prabhu Appu

Re: Qliksense mashup using Angular material

Francis_Kabinoff — Mon, 28 Mar 2016 13:12:37 GMT

It looks like you are loading angular, but angular is already loaded for you with capability api. id suggest checking out the resources below

Using AngularJS in your mashup ‒ Qlik Sense

GitHub - erikwett/helpdesk-angular: Qlik Sense mashup example using AngularJS

Re: Qliksense mashup using Angular material

prabhuappu — Tue, 29 Mar 2016 02:13:19 GMT

Thanks for the reply Francis,

I followed the steps provided in the link. I can see the version of the angular used in qliksense is 1.2.15. but AngularMaterial requires Angular 1.3.x or higher.

Please let me know if we can use latest version. if so could you please tell me ho to do that.

regards,

Prabhu Appu

Re: Qliksense mashup using Angular material

Francis_Kabinoff — Tue, 29 Mar 2016 12:32:25 GMT

Hi Prabhu,

You will need to use the version of Angular.js that the capability api provides, which is, as you pointed out, v1.2.15.

topic Qliksense mashup using Angular material in Integration, Extension & APIs

Qliksense mashup using Angular material

Re: Qliksense mashup using Angular material

Re: Qliksense mashup using Angular material

Re: Qliksense mashup using Angular material