Bug 1441617 - Use ES6 imports for angular module dependencies

An AngularJS module declares a dependency on another module like so:
```
const fooModule = angular.module('foo', ['name_of_dep_module']);
```

This is suboptimal, since:
a) the dependency is only validated at runtime not during the build
b) the module name often doesn't match the NPM package name, making
   it hard to know whether imports are unused.

As such, many AngularJS packages now export a string containing the
module name, which allows for an ES6-like approach (it still uses
globals underneath, but better than nothing):
```
import nameOfDepModule from 'dep-module';

const fooModule = angular.module('foo', [nameOfDepModule]);
```

Just to complicate things, some modules don't export the module name,
but the actual module object itself. This can't be passed to
`angular.module()` directly, so for these modules we have to use the
`name` property on the module instead:
https://docs.angularjs.org/api/ng/type/angular.Module#name

eg:
```
import depModuleObject from 'awkward-dep-module';

const fooModule = angular.module('foo', [depModuleObject.name]);
```

In fact, the treeherder modules do just that - however its not worth
fixing, since otherwise we'd have to change every file that registers
directives/filters/values/... to fetch the module first, using
`angular.module('name-of-existing-module')`.

tests/ui/unit/init.js

@@ -9,16 +9,7 @@ window.angular = require('angular');
 window.React = require('react');
 require('jasmine-jquery');
 require('angular-mocks');
-require('angular-resource');
-require('angular-route');
-require('angular-sanitize');
-require('angular-local-storage');
-require('angular-toarrayfilter');
 require('mousetrap');
-require('ngreact');
-require('angular1-ui-bootstrap4');
-require('angular-marked');
-require('../../../ui/vendor/resizer.js');
 
 const Adapter = require('enzyme-adapter-react-16');
 const Enzyme = require('enzyme');

ui/entry-index.js

@@ -17,18 +17,9 @@ require('./css/treeherder-loading-overlay.css');
 
 // Vendor JS
 require('angular');
-require('angular-route');
-require('angular-resource');
-require('angular-sanitize');
-require('angular-toarrayfilter');
-require('angular-local-storage');
 require('bootstrap/dist/js/bootstrap');
-require('angular1-ui-bootstrap4');
 require('mousetrap');
-require('angular-marked');
-require('ngreact');
 require('jquery.scrollto');
-require('./vendor/resizer.js');
 
 // Bootstrap the Angular modules against which everything will be registered
 require('./js/treeherder_app.js');

ui/entry-logviewer.js

@@ -9,12 +9,7 @@ require('./css/logviewer.css');
 
 // Vendor JS
 require('angular');
-require('angular-route');
-require('angular-resource');
-require('angular-sanitize');
-require('angular-local-storage');
 require('bootstrap/dist/js/bootstrap');
-require('./vendor/resizer.js');
 
 // Bootstrap the Angular modules against which everything will be registered
 require('./js/logviewer.js');

ui/entry-perf.js

@@ -12,14 +12,8 @@ require('metrics-graphics/dist/metricsgraphics.css');
 
 // Vendor JS
 require('angular');
-require('angular-resource');
-require('angular-ui-router');
-require('angular-sanitize');
-require('angular-local-storage');
 require('mousetrap');
 require('bootstrap/dist/js/bootstrap');
-require('angular1-ui-bootstrap4');
-require('angular-clipboard');
 // The official 'flot' NPM package is out of date, so we're using 'jquery.flot'
 // instead, which is identical to https://github.com/flot/flot
 require('jquery.flot');

ui/js/logviewer.js

@@ -1,4 +1,6 @@
-const logViewerApp = angular.module('logviewer', ['treeherder']);
+import treeherderModule from './treeherder';
+
+const logViewerApp = angular.module('logviewer', [treeherderModule.name]);
 
 logViewerApp.config(['$compileProvider', '$locationProvider', '$resourceProvider',
     function ($compileProvider, $locationProvider, $resourceProvider) {

ui/js/perf.js

@@ -1,6 +1,12 @@
+import angularClipboardModule from 'angular-clipboard';
+import uiBootstrap from 'angular1-ui-bootstrap4';
+import uiRouter from 'angular-ui-router';
+
+import treeherderModule from './treeherder';
+
 export default angular.module('perf', [
-  'ui.router',
+  uiRouter,
-  'ui.bootstrap',
+  uiBootstrap,
-  'treeherder',
+  treeherderModule.name,
-  'angular-clipboard',
+  angularClipboardModule.name,
 ]);

ui/js/treeherder.js

@@ -1,5 +1,9 @@
+import ngResource from 'angular-resource';
+import ngSanitize from 'angular-sanitize';
+import LocalStorageModule from 'angular-local-storage';
+
 export default angular.module('treeherder', [
-  'ngResource',
+  ngResource,
-  'ngSanitize',
+  ngSanitize,
-  'LocalStorageModule',
+  LocalStorageModule,
 ]);

ui/js/treeherder_app.js

@@ -1,11 +1,20 @@
+import angularToArrayfilter from 'angular-toarrayfilter';
+import hcMarked from 'angular-marked';
+import ngReactModule from 'ngreact';
+import ngRoute from 'angular-route';
+import uiBootstrap from 'angular1-ui-bootstrap4';
+import mcResizer from '../vendor/resizer';
+
+import treeherderModule from './treeherder';
+
 const treeherderApp = angular.module('treeherder.app', [
-  'treeherder',
+  treeherderModule.name,
-  'ui.bootstrap',
+  uiBootstrap,
-  'ngRoute',
+  ngRoute,
-  'mc.resizer',
+  mcResizer,
-  'angular-toArrayFilter',
+  angularToArrayfilter,
-  'react',
+  ngReactModule.name,
-  'hc.marked',
+  hcMarked,
 ]);
 
 treeherderApp.config(['$compileProvider', '$locationProvider', '$routeProvider', '$httpProvider',

ui/vendor/resizer.js

@@ -42,3 +42,5 @@ angular.module('mc.resizer', []).directive('resizer', ['$document', function($do
         }
     };
 }]);
+
+export default 'mc.resizer';