Not able to Register the widget when the module has its own dependency

[sharathbangera6]

Hi,

I am trying to implement fusion chart into this framework, i used the below link for the implementation

http://www.fusioncharts.com/dev/using-with-javascript-libraries/angularjs/introduction.html

i have to add a dependency to my widget module, but once i add this dependency and register this widget, i don't see widget listing in the dashboard, but if i remove the dependency, it shows up in the list but when i try to add them, it gives error, cos of no required dependency.

angular.module("myApp", ["ng-fusioncharts"])

[sdorra]

Do you have insert the ng-fusioncharts library in your index.html? Can you post an error message?

[sharathbangera6]

I have included these below files in index.html

<script type="text/javascript" src="widgets/storage/components/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="widgets/storage/components/fusioncharts/fusioncharts.charts.js"></script>
 <script type="text/javascript" src="widgets/storage/components/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
  <script type="text/javascript" src="widgets/storage/components/fusioncharts/angular-fusioncharts.js"></script>

Below is my Controller.

angular.module('adf.widget.storage', ["ng-fusioncharts"])
  .controller('storageStatusCtrl', function($scope, config, storage) {

    console.log('coming inside');

    $scope.myDataSource = {
      chart: {
          caption: "Age profile of website visitors",
          subcaption: "Last Year",
          startingangle: "120",
          showlabels: "0",
          showlegend: "1",
          enablemultislicing: "0",
          slicingdistance: "15",
          showpercentvalues: "1",
          showpercentintooltip: "0",
          plottooltext: "Age group : $label Total visit : $datavalue",
          theme: "fint"
      },
      data: [
          {
              label: "Teenage",
              value: "1250400"
          },
          {
              label: "Adult",
              value: "1463300"
          },
          {
              label: "Mid-age",
              value: "1050700"
          },
          {
              label: "Senior",
              value: "491000"
          }
      ]
    }
  });

Below is my view.html

<div ng-controller="storageStatusCtrl">
  <div fusioncharts
       width="600"
       height="400"
       type="column2d"
       dataSource="{{myDataSource}}" >
  </div>
</div>

I don't get error with above code but its not getting registered to the dashboard.

If i remove the dependency _["ng-fusioncharts"] _ from my Controller, then Widget shows up in the Dashboard but then i click on it, i get error cos of no dependency.

"Error: [$injector:unpr] Unknown provider: configProvider <- config <- storageStatusCtrl
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=configProvider%20%3C-%20config%20%3C-%20storageStatusCtrl
minErr/<@http://localhost:9001/sample/components/angular/angular.js:68:12
createInjector/providerCache.$injector<@http://localhost:9001/sample/components/angular/angular.js:4397:19
getService@http://localhost:9001/sample/components/angular/angular.js:4550:39
createInjector/protoInstanceInjector<@http://localhost:9001/sample/components/angular/angular.js:4402:28
getService@http://localhost:9001/sample/components/angular/angular.js:4550:39
injectionArgs@http://localhost:9001/sample/components/angular/angular.js:4574:1
invoke@http://localhost:9001/sample/components/angular/angular.js:4596:18
$ControllerProvider/this.$get</</instantiate<@http://localhost:9001/sample/components/angular/angular.js:9855:24
nodeLinkFn@http://localhost:9001/sample/components/angular/angular.js:8927:34
compositeLinkFn@http://localhost:9001/sample/components/angular/angular.js:8226:13
publicLinkFn@http://localhost:9001/sample/components/angular/angular.js:8106:30
compileWidget/<@http://localhost:9001/src/scripts/widget-content.js:121:9
processQueue@http://localhost:9001/sample/components/angular/angular.js:15552:28
scheduleProcessQueue/<@http://localhost:9001/sample/components/angular/angular.js:15568:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:9001/sample/components/angular/angular.js:16820:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:9001/sample/components/angular/angular.js:16636:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:9001/sample/components/angular/angular.js:16928:13
done@http://localhost:9001/sample/components/angular/angular.js:11266:36
completeRequest@http://localhost:9001/sample/components/angular/angular.js:11464:7
requestLoaded@http://localhost:9001/sample/components/angular/angular.js:11405:1
" angular.js:13236:18