AngularJS: bootstrap controller with service(s)

157 Views Asked by At

I'm trying to integrate golden-layout (an app for separating the app's window in multiple docking panels) in my angular app for some days.

Each panel/container uses a cached template. Within that template (using ng-template ) I can angular.bootstrap() a module. However, if that module uses a service I get an angular error saying Unkown provider (servicename)

I have my services in src/services/ . I've tried a couple of things like:

->Importing the index.js of the services as well as each each service separately

->Modifying my controller(name,function()) to controller(name,['ServiceName',function()])

I'm probably doing something noobish related to the angular.bootstrap which I still don't fully understand.

Sample code:

class timeseriesCtrl {
    constructor(LayoutService) {
        this.test = 200000;
    }
}

const Module = angular.module('app.components.times-visualizer',[])
                  .controller('timesVisualizer', timeseriesCtrl )
                  .directive('timesVisualizer',function(){
                      return{
                         restrict: 'E',
                          templateUrl: 'components/timeseries-visualizer/timeseries-visualizer.html',
                          controller: 'timesVisualizer',
                          controllerAs: 'time' 
                      }
                  });

export default Module;

Sample code where I'm bootstraping:

var AngularModuleComponent = function( container, state ) {
        var html = $( '#' + state.templateId ).html(),
            element = container.getElement();
        element.html(html);

    angular
        .module( state.module )

        angular.bootstrap( element[ 0 ], [ state.module ] );
    }
0

There are 0 best solutions below