I am working on a Qlik Sense Mashup project and I am having a lot of trouble managing AngularJS controllers in separate files. In my mashup, there is almost 30 controllers in a single JS file and it causes so much complexity. My file structure looks like this:
views
|Home.html
|FirstPage.html
|SecondPage.html
MyMashup.css
MyMashup.html
MyMashup.js
MyMashup.qext
wbfolder.wbl
and here is an example of what my code looks like:
// Configurations for connecting to the Qlik Engine
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"
});
require(["js/qlik"], function (qlik) {
var appModule = angular.module('myAngularApp', ['ngRoute']);
// route configurations
appModule.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
templateUrl: 'views/Home.html',
controller: 'homeController'
})
.when('/firstPage', {
templateUrl: 'views/FirstPage.html',
controller: 'firstPageController'
})
.when('/secondPage', {
templateUrl: 'views/SecondPage.html',
controller: 'secondPageController'
})
/* and almost 27 controllers goes here */
.otherwise({
redirectTo: "/"
});
});
// home page controller
appModule.controller('homeController', function ($scope, $route) {
// some stuff
});
// first page controller
appModule.controller('firstPageController', function ($scope, $route) {
// some stuff
});
// second page controller
appModule.controller('secondPageController', function ($scope, $route) {
// some stuff
});
//#region qlik sense error message
qlik.setOnError(function (error) {
$('#modalAlertText').html(error.message + "<br>");
});
//#endregion
// bootstrap the angular app
angular.bootstrap(document, ["myAngularApp", "qlik-angular"]);
});
What I want to do is, separate these controllers into different files and import these controllers into my main JS file (which is MyMashup.js). I found a solution in this issue but it didn't work. When I try this, I couldn't be able to import this controller in MyMashup.js file. I am getting an error like 'Uncaught SyntaxError: Cannot use import statement outside a module'
Any ideas about this ? Thanks for your help.
