how to import angularjs submodules in typescript

Question

i'm trying to build structure of angularjs (angular 1.) project using typescript. I'm using webpack to compile typescript & ES6 to javascript.

In my project i configured webpack to compile only the "app.ts" file and all other files included in it with "import" syntax:

    import { config } from './config';///<--HERE
    module angularSeed {
    'use strict';

      // Declare app level module which depends on views, and components
      angular.module('myApp', [
        'ngRoute',
        'myApp.view1',
        'myApp.view2',
        'myApp.version'
      ]).config(config)//<-- using imported config.ts

    }

I want my project to be split into angular submodules and included into main module like following:

angular.module('mainApp',['myApp.version','myApp.view1','myApp.view2'])

the question is: How to export the submodules?

The only way i found so far is to define the module-definition files as class:

class view1 {
  constructor(){
    angular.module('myApp.view1', ['ngRoute'])

    .config(['$routeProvider', ($routeProvider: angular.route.IRouteProvider) => {
      $routeProvider.when('/view1', {
        templateUrl: 'view1/view1.html',
        controller: 'View1Ctrl'
      });
    }])

    .controller('View1Ctrl', [() => {

    }]); 
  }

}
export default view1;

and in the main file - to use "new" for fire the constructor:

import { config } from './config';
import view2 from './view2/view2';
import view1 from './view1/view1';
import version from './components/version/version';
module angularSeed {
'use strict';
  new view2();///<-- HERE
  new view1();
  new version();
  // Declare app level module which depends on views, and components
  angular.module('myApp', [
    'ngRoute',
    'myApp.view1',
    'myApp.view2',
    'myApp.version'
  ]).config(config)


}

I have feeling there is more accurate way. Am i right?

Thanks

happyZZR1400 happyZZR1400 · Accepted Answer · 2016-11-27T10:25:18

I found the answer looking here

You can leave declaration logic as it is

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', ($routeProvider: angular.route.IRouteProvider) =>    {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', [() => {

}]);

and to import it with simple:

import './view1/view1';

syntax

how to import angularjs submodules in typescript

1 Answers