grafana/public/app/angular/AngularApp.ts
Dominik Prokop afdd9b2455
Angular: only bootstrap the root application element (#40822)
* Angular: Do not bootstrap Angular against entire document

* Do not retrieve injector by using angular instance directly.
2021-10-29 11:31:41 +02:00

123 lines
3.7 KiB
TypeScript

import angular from 'angular';
import 'angular-route';
import 'angular-sanitize';
import 'angular-bindonce';
import 'vendor/bootstrap/bootstrap';
import 'vendor/angular-other/angular-strap';
import { config } from 'app/core/config';
import coreModule, { angularModules } from 'app/core/core_module';
import { DashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
import { registerAngularDirectives } from 'app/core/core';
import { initAngularRoutingBridge } from 'app/angular/bridgeReactAngularRouting';
import { monkeyPatchInjectorWithPreAssignedBindings } from 'app/core/injectorMonkeyPatch';
import { extend } from 'lodash';
import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
import { getTemplateSrv } from '@grafana/runtime';
import './panel/all';
import './partials';
export class AngularApp {
ngModuleDependencies: any[];
preBootModules: any[];
registerFunctions: any;
constructor() {
this.preBootModules = [];
this.ngModuleDependencies = [];
this.registerFunctions = {};
}
init() {
const app = angular.module('grafana', []);
app.config(
(
$controllerProvider: angular.IControllerProvider,
$compileProvider: angular.ICompileProvider,
$filterProvider: angular.IFilterProvider,
$httpProvider: angular.IHttpProvider,
$provide: angular.auto.IProvideService
) => {
if (config.buildInfo.env !== 'development') {
$compileProvider.debugInfoEnabled(false);
}
$httpProvider.useApplyAsync(true);
this.registerFunctions.controller = $controllerProvider.register;
this.registerFunctions.directive = $compileProvider.directive;
this.registerFunctions.factory = $provide.factory;
this.registerFunctions.service = $provide.service;
this.registerFunctions.filter = $filterProvider.register;
$provide.decorator('$http', [
'$delegate',
'$templateCache',
($delegate: any, $templateCache: any) => {
const get = $delegate.get;
$delegate.get = (url: string, config: any) => {
if (url.match(/\.html$/)) {
// some template's already exist in the cache
if (!$templateCache.get(url)) {
url += '?v=' + new Date().getTime();
}
}
return get(url, config);
};
return $delegate;
},
]);
}
);
this.ngModuleDependencies = [
'grafana.core',
'ngSanitize',
'$strap.directives',
'grafana',
'pasvaz.bindonce',
'react',
];
// makes it possible to add dynamic stuff
angularModules.forEach((m: angular.IModule) => {
this.useModule(m);
});
// register react angular wrappers
angular.module('grafana.services').service('dashboardLoaderSrv', DashboardLoaderSrv);
coreModule.factory('timeSrv', () => getTimeSrv());
coreModule.factory('templateSrv', () => getTemplateSrv());
registerAngularDirectives();
initAngularRoutingBridge();
}
useModule(module: angular.IModule) {
if (this.preBootModules) {
this.preBootModules.push(module);
} else {
extend(module, this.registerFunctions);
}
this.ngModuleDependencies.push(module.name);
return module;
}
bootstrap() {
const injector = angular.bootstrap(document.getElementById('ngRoot')!, this.ngModuleDependencies);
monkeyPatchInjectorWithPreAssignedBindings(injector);
injector.invoke(() => {
this.preBootModules.forEach((module) => {
extend(module, this.registerFunctions);
});
// I don't know
return () => {};
});
return injector;
}
}