зеркало из https://github.com/mozilla/treeherder.git
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')`.
This commit is contained in:
Родитель
3e2e22e132
Коммит
a8e09c5786
|
@ -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');
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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',
|
||||
'ui.bootstrap',
|
||||
'treeherder',
|
||||
'angular-clipboard',
|
||||
uiRouter,
|
||||
uiBootstrap,
|
||||
treeherderModule.name,
|
||||
angularClipboardModule.name,
|
||||
]);
|
||||
|
|
|
@ -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',
|
||||
'ngSanitize',
|
||||
'LocalStorageModule',
|
||||
ngResource,
|
||||
ngSanitize,
|
||||
LocalStorageModule,
|
||||
]);
|
||||
|
|
|
@ -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',
|
||||
'ui.bootstrap',
|
||||
'ngRoute',
|
||||
'mc.resizer',
|
||||
'angular-toArrayFilter',
|
||||
'react',
|
||||
'hc.marked',
|
||||
treeherderModule.name,
|
||||
uiBootstrap,
|
||||
ngRoute,
|
||||
mcResizer,
|
||||
angularToArrayfilter,
|
||||
ngReactModule.name,
|
||||
hcMarked,
|
||||
]);
|
||||
|
||||
treeherderApp.config(['$compileProvider', '$locationProvider', '$routeProvider', '$httpProvider',
|
||||
|
|
|
@ -42,3 +42,5 @@ angular.module('mc.resizer', []).directive('resizer', ['$document', function($do
|
|||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
export default 'mc.resizer';
|
||||
|
|
Загрузка…
Ссылка в новой задаче