From b0b4d5e26a5b88933e8d76ad63507d37d1899d8c Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Thu, 24 Jan 2019 16:24:58 +0200
Subject: [PATCH] Convert Angular services to CommonJS-style and use them in
 React components instead of injecting (#3331)

* Refine Auth service: remove dead code and fix race condition
* Export services in CommonJS style
* Refine Users, Events and OfflineListener services
* Refactor Notifications service - rewrite to CommonJS
* Replace Angular service injection with imports in React components
* Fix Footer tests
* Events service -> recordEvent function
* CR1
---
 client/app/components/AutocompleteToggle.jsx  |   2 +-
 client/app/components/DateInput.jsx           |   5 +-
 client/app/components/DateRangeInput.jsx      |   5 +-
 client/app/components/DateTimeInput.jsx       |   5 +-
 client/app/components/DateTimeRangeInput.jsx  |   5 +-
 client/app/components/Footer.jsx              |  17 +--
 client/app/components/Footer.test.js          |  15 +--
 client/app/components/ParameterValueInput.jsx |  55 ++--------
 .../components/QueryBasedParameterInput.jsx   |   4 +-
 client/app/components/QueryEditor.jsx         |  20 ++--
 .../dashboards/AddTextboxDialog.jsx           |   6 +-
 .../components/dashboards/AddWidgetDialog.jsx |  17 +--
 .../EditParameterMappingsDialog.jsx           |   8 +-
 .../components/dynamic-form/DynamicForm.jsx   |   2 +-
 .../tags-control/DashboardTagsControl.jsx     |   2 +-
 .../tags-control/QueryTagsControl.jsx         |   2 +-
 .../components/tags-control/TagsControl.jsx   |   3 +-
 client/app/index.js                           |   3 +-
 client/app/pages/queries/view.js              |   2 +-
 client/app/services/alert-dialog.js           |  15 +--
 client/app/services/alert-subscription.js     |  14 ++-
 client/app/services/alert.js                  |  15 +--
 client/app/services/auth.js                   |  98 ++++++++---------
 client/app/services/dashboard.js              |  11 +-
 client/app/services/data-source.js            |  11 +-
 client/app/services/destination.js            |  16 +--
 client/app/services/events.js                 |   6 +-
 client/app/services/getTags.js                |   2 +-
 client/app/services/group.js                  |  14 ++-
 client/app/services/http.js                   |  11 --
 client/app/services/keyboard-shortcuts.js     |  10 +-
 client/app/services/ng.js                     |  16 +++
 client/app/services/notifications.js          | 102 ++++++++----------
 client/app/services/offline-listener.js       |  36 +++----
 client/app/services/organization-status.js    |  10 +-
 client/app/services/query-snippet.js          |  10 +-
 client/app/services/query.js                  |  39 ++++---
 client/app/{lib => services}/recordEvent.js   |   6 +-
 client/app/services/toastr.js                 |  10 --
 client/app/services/user.js                   |  24 +++--
 client/app/services/widget.js                 |  20 ++--
 41 files changed, 319 insertions(+), 355 deletions(-)
 delete mode 100644 client/app/services/http.js
 create mode 100644 client/app/services/ng.js
 rename client/app/{lib => services}/recordEvent.js (79%)
 delete mode 100644 client/app/services/toastr.js

diff --git a/client/app/components/AutocompleteToggle.jsx b/client/app/components/AutocompleteToggle.jsx
index e74e0a9047..5a4c9bff20 100644
--- a/client/app/components/AutocompleteToggle.jsx
+++ b/client/app/components/AutocompleteToggle.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Tooltip from 'antd/lib/tooltip';
 import PropTypes from 'prop-types';
 import '@/redash-font/style.less';
-import recordEvent from '@/lib/recordEvent';
+import recordEvent from '@/services/recordEvent';
 
 export default function AutocompleteToggle({ state, disabled, onToggle }) {
   let tooltipMessage = 'Live Autocomplete Enabled';
diff --git a/client/app/components/DateInput.jsx b/client/app/components/DateInput.jsx
index 695a2a1997..ff7812ed8e 100644
--- a/client/app/components/DateInput.jsx
+++ b/client/app/components/DateInput.jsx
@@ -3,12 +3,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
+import { clientConfig } from '@/services/auth';
 
 export function DateInput({
   value,
   onSelect,
-  // eslint-disable-next-line react/prop-types
-  clientConfig,
   className,
 }) {
   const format = clientConfig.dateFormat || 'YYYY-MM-DD';
@@ -46,7 +45,7 @@ DateInput.defaultProps = {
 };
 
 export default function init(ngModule) {
-  ngModule.component('dateInput', react2angular(DateInput, null, ['clientConfig']));
+  ngModule.component('dateInput', react2angular(DateInput));
 }
 
 init.init = true;
diff --git a/client/app/components/DateRangeInput.jsx b/client/app/components/DateRangeInput.jsx
index 1b1454bbb5..d8ccef48f7 100644
--- a/client/app/components/DateRangeInput.jsx
+++ b/client/app/components/DateRangeInput.jsx
@@ -4,14 +4,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
+import { clientConfig } from '@/services/auth';
 
 const { RangePicker } = DatePicker;
 
 export function DateRangeInput({
   value,
   onSelect,
-  // eslint-disable-next-line react/prop-types
-  clientConfig,
   className,
 }) {
   const format = clientConfig.dateFormat || 'YYYY-MM-DD';
@@ -53,7 +52,7 @@ DateRangeInput.defaultProps = {
 };
 
 export default function init(ngModule) {
-  ngModule.component('dateRangeInput', react2angular(DateRangeInput, null, ['clientConfig']));
+  ngModule.component('dateRangeInput', react2angular(DateRangeInput));
 }
 
 init.init = true;
diff --git a/client/app/components/DateTimeInput.jsx b/client/app/components/DateTimeInput.jsx
index d95fd60884..92fb81f104 100644
--- a/client/app/components/DateTimeInput.jsx
+++ b/client/app/components/DateTimeInput.jsx
@@ -3,13 +3,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
+import { clientConfig } from '@/services/auth';
 
 export function DateTimeInput({
   value,
   withSeconds,
   onSelect,
-  // eslint-disable-next-line react/prop-types
-  clientConfig,
   className,
 }) {
   const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
@@ -51,7 +50,7 @@ DateTimeInput.defaultProps = {
 };
 
 export default function init(ngModule) {
-  ngModule.component('dateTimeInput', react2angular(DateTimeInput, null, ['clientConfig']));
+  ngModule.component('dateTimeInput', react2angular(DateTimeInput));
 }
 
 init.init = true;
diff --git a/client/app/components/DateTimeRangeInput.jsx b/client/app/components/DateTimeRangeInput.jsx
index d0fa5ecb39..51f6c62ddc 100644
--- a/client/app/components/DateTimeRangeInput.jsx
+++ b/client/app/components/DateTimeRangeInput.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
+import { clientConfig } from '@/services/auth';
 
 const { RangePicker } = DatePicker;
 
@@ -11,8 +12,6 @@ export function DateTimeRangeInput({
   value,
   withSeconds,
   onSelect,
-  // eslint-disable-next-line react/prop-types
-  clientConfig,
   className,
 }) {
   const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
@@ -58,7 +57,7 @@ DateTimeRangeInput.defaultProps = {
 };
 
 export default function init(ngModule) {
-  ngModule.component('dateTimeRangeInput', react2angular(DateTimeRangeInput, null, ['clientConfig']));
+  ngModule.component('dateTimeRangeInput', react2angular(DateTimeRangeInput));
 }
 
 init.init = true;
diff --git a/client/app/components/Footer.jsx b/client/app/components/Footer.jsx
index bd1f06efda..7e45562fe1 100644
--- a/client/app/components/Footer.jsx
+++ b/client/app/components/Footer.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import { react2angular } from 'react2angular';
+import { clientConfig, currentUser } from '@/services/auth';
 
 import frontendVersion from '../version.json';
 
-export function Footer({ clientConfig, currentUser }) {
+export function Footer() {
   const backendVersion = clientConfig.version;
   const newVersionAvailable = clientConfig.newVersionAvailable && currentUser.isAdmin;
   const separator = ' \u2022 ';
@@ -31,18 +30,8 @@ export function Footer({ clientConfig, currentUser }) {
   );
 }
 
-Footer.propTypes = {
-  clientConfig: PropTypes.shape({
-    version: PropTypes.string,
-    newVersionAvailable: PropTypes.bool,
-  }).isRequired,
-  currentUser: PropTypes.shape({
-    isAdmin: PropTypes.bool,
-  }).isRequired,
-};
-
 export default function init(ngModule) {
-  ngModule.component('footer', react2angular(Footer, [], ['clientConfig', 'currentUser']));
+  ngModule.component('footer', react2angular(Footer));
 }
 
 init.init = true;
diff --git a/client/app/components/Footer.test.js b/client/app/components/Footer.test.js
index 81a157ebfc..519a9e5732 100644
--- a/client/app/components/Footer.test.js
+++ b/client/app/components/Footer.test.js
@@ -1,16 +1,19 @@
+import { extend } from 'lodash';
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { clientConfig, currentUser } from '../services/auth';
 import { Footer } from './Footer';
 
 test('Footer renders', () => {
-  const clientConfig = {
+  // TODO: Properly mock this
+  extend(clientConfig, {
     version: '5.0.1',
     newVersionAvailable: true,
-  };
-  const currentUser = {
-    isAdmin: true,
-  };
-  const component = renderer.create(<Footer clientConfig={clientConfig} currentUser={currentUser} />);
+  });
+  extend(currentUser, {
+    permissions: ['admin'],
+  });
+  const component = renderer.create(<Footer />);
   const tree = component.toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/client/app/components/ParameterValueInput.jsx b/client/app/components/ParameterValueInput.jsx
index c16edcc7af..301e83fc91 100644
--- a/client/app/components/ParameterValueInput.jsx
+++ b/client/app/components/ParameterValueInput.jsx
@@ -31,99 +31,69 @@ export class ParameterValueInput extends React.Component {
   };
 
   renderDateTimeWithSecondsInput() {
-    const {
-      value,
-      onSelect,
-      clientConfig, // eslint-disable-line react/prop-types
-    } = this.props;
+    const { value, onSelect } = this.props;
     return (
       <DateTimeInput
         className={this.props.className}
         value={value}
         onSelect={onSelect}
         withSeconds
-        clientConfig={clientConfig}
       />
     );
   }
 
   renderDateTimeInput() {
-    const {
-      value,
-      onSelect,
-      clientConfig, // eslint-disable-line react/prop-types
-    } = this.props;
+    const { value, onSelect } = this.props;
     return (
       <DateTimeInput
         className={this.props.className}
         value={value}
         onSelect={onSelect}
-        clientConfig={clientConfig}
       />
     );
   }
 
   renderDateInput() {
-    const {
-      value,
-      onSelect,
-      clientConfig, // eslint-disable-line react/prop-types
-    } = this.props;
+    const { value, onSelect } = this.props;
     return (
       <DateInput
         className={this.props.className}
         value={value}
         onSelect={onSelect}
-        clientConfig={clientConfig}
       />
     );
   }
 
   renderDateTimeRangeWithSecondsInput() {
-    const {
-      value,
-      onSelect,
-      clientConfig, // eslint-disable-line react/prop-types
-    } = this.props;
+    const { value, onSelect } = this.props;
     return (
       <DateTimeRangeInput
         className={this.props.className}
         value={value}
         onSelect={onSelect}
         withSeconds
-        clientConfig={clientConfig}
       />
     );
   }
 
   renderDateTimeRangeInput() {
-    const {
-      value,
-      onSelect,
-      clientConfig, // eslint-disable-line react/prop-types
-    } = this.props;
+    const { value, onSelect } = this.props;
     return (
       <DateTimeRangeInput
         className={this.props.className}
         value={value}
         onSelect={onSelect}
-        clientConfig={clientConfig}
       />
     );
   }
 
   renderDateRangeInput() {
-    const {
-      value,
-      onSelect,
-      clientConfig, // eslint-disable-line react/prop-types
-    } = this.props;
+    const { value, onSelect } = this.props;
     return (
       <DateRangeInput
         className={this.props.className}
         value={value}
         onSelect={onSelect}
-        clientConfig={clientConfig}
       />
     );
   }
@@ -146,19 +116,13 @@ export class ParameterValueInput extends React.Component {
   }
 
   renderQueryBasedInput() {
-    const {
-      value,
-      onSelect,
-      queryId,
-      Query, // eslint-disable-line react/prop-types
-    } = this.props;
+    const { value, onSelect, queryId } = this.props;
     return (
       <QueryBasedParameterInput
         className={this.props.className}
         value={value}
         queryId={queryId}
         onSelect={onSelect}
-        Query={Query}
       />
     );
   }
@@ -212,10 +176,7 @@ export default function init(ngModule) {
       };
     },
   });
-  ngModule.component(
-    'parameterValueInputImpl',
-    react2angular(ParameterValueInput, null, ['clientConfig', 'Query']),
-  );
+  ngModule.component('parameterValueInputImpl', react2angular(ParameterValueInput));
 }
 
 init.init = true;
diff --git a/client/app/components/QueryBasedParameterInput.jsx b/client/app/components/QueryBasedParameterInput.jsx
index f9ef4ebace..8c82bda54e 100644
--- a/client/app/components/QueryBasedParameterInput.jsx
+++ b/client/app/components/QueryBasedParameterInput.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import Select from 'antd/lib/select';
+import { Query } from '@/services/query';
 
 const { Option } = Select;
 
@@ -79,7 +80,6 @@ export class QueryBasedParameterInput extends React.Component {
 
   _loadOptions(queryId) {
     if (queryId && (queryId !== this.state.queryId)) {
-      const Query = this.props.Query; // eslint-disable-line react/prop-types
       this.setState({ loading: true });
       Query.resultById({ id: queryId }, (result) => {
         if (this.props.queryId === queryId) {
@@ -117,7 +117,7 @@ export class QueryBasedParameterInput extends React.Component {
 }
 
 export default function init(ngModule) {
-  ngModule.component('queryBasedParameterInput', react2angular(QueryBasedParameterInput, null, ['Query']));
+  ngModule.component('queryBasedParameterInput', react2angular(QueryBasedParameterInput));
 }
 
 init.init = true;
diff --git a/client/app/components/QueryEditor.jsx b/client/app/components/QueryEditor.jsx
index f9e2499f8f..c86b704a1c 100644
--- a/client/app/components/QueryEditor.jsx
+++ b/client/app/components/QueryEditor.jsx
@@ -14,6 +14,10 @@ import 'brace/mode/sql';
 import 'brace/theme/textmate';
 import 'brace/ext/searchbox';
 
+import { Query } from '@/services/query';
+import { QuerySnippet } from '@/services/query-snippet';
+import { KeyboardShortcuts } from '@/services/keyboard-shortcuts';
+
 import localOptions from '@/lib/localOptions';
 import AutocompleteToggle from '@/components/AutocompleteToggle';
 import keywordBuilder from './keywordBuilder';
@@ -152,8 +156,7 @@ class QueryEditor extends React.Component {
       }
     });
 
-    // eslint-disable-next-line react/prop-types
-    this.props.QuerySnippet.query((snippets) => {
+    QuerySnippet.query((snippets) => {
       const snippetManager = snippetsModule.snippetManager;
       const m = {
         snippetText: '',
@@ -194,7 +197,7 @@ class QueryEditor extends React.Component {
     const selectedQueryText = (rawSelectedQueryText.length > 1) ? rawSelectedQueryText : null;
     this.setState({ selectedQueryText });
     this.props.updateSelectedQuery(selectedQueryText);
-  }
+  };
 
   updateQuery = (queryText) => {
     this.props.updateQuery(queryText);
@@ -202,9 +205,7 @@ class QueryEditor extends React.Component {
   };
 
   formatQuery = () => {
-    // eslint-disable-next-line react/prop-types
-    const format = this.props.Query.format;
-    format(this.props.dataSource.syntax || 'sql', this.props.queryText)
+    Query.format(this.props.dataSource.syntax || 'sql', this.props.queryText)
       .then(this.updateQuery)
       .catch(error => toastr.error(error));
   };
@@ -212,11 +213,10 @@ class QueryEditor extends React.Component {
   toggleAutocomplete = (state) => {
     this.setState({ autocompleteQuery: state });
     localOptions.set('liveAutocomplete', state);
-  }
+  };
 
   render() {
-    // eslint-disable-next-line react/prop-types
-    const modKey = this.props.KeyboardShortcuts.modKey;
+    const modKey = KeyboardShortcuts.modKey;
 
     const isExecuteDisabled = this.props.queryExecuting || !this.props.canExecuteQuery();
 
@@ -320,7 +320,7 @@ class QueryEditor extends React.Component {
 }
 
 export default function init(ngModule) {
-  ngModule.component('queryEditor', react2angular(QueryEditor, null, ['QuerySnippet', 'Query', 'KeyboardShortcuts']));
+  ngModule.component('queryEditor', react2angular(QueryEditor));
 }
 
 init.init = true;
diff --git a/client/app/components/dashboards/AddTextboxDialog.jsx b/client/app/components/dashboards/AddTextboxDialog.jsx
index 97fead0cc8..6d9510ae51 100644
--- a/client/app/components/dashboards/AddTextboxDialog.jsx
+++ b/client/app/components/dashboards/AddTextboxDialog.jsx
@@ -3,6 +3,8 @@ import { debounce } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
+import { toastr } from '@/services/ng';
+import { Widget } from '@/services/widget';
 
 class AddTextboxDialog extends React.Component {
   static propTypes = {
@@ -38,8 +40,6 @@ class AddTextboxDialog extends React.Component {
   }
 
   saveWidget() {
-    const Widget = this.props.Widget; // eslint-disable-line react/prop-types
-    const toastr = this.props.toastr; // eslint-disable-line react/prop-types
     const dashboard = this.props.dashboard;
 
     this.setState({ saveInProgress: true });
@@ -148,7 +148,7 @@ export default function init(ngModule) {
       dismiss: '&',
     },
   });
-  ngModule.component('addTextboxDialogImpl', react2angular(AddTextboxDialog, null, ['toastr', 'Widget']));
+  ngModule.component('addTextboxDialogImpl', react2angular(AddTextboxDialog));
 }
 
 init.init = true;
diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx
index 6d51a35e90..ea351575f4 100644
--- a/client/app/components/dashboards/AddWidgetDialog.jsx
+++ b/client/app/components/dashboards/AddWidgetDialog.jsx
@@ -10,6 +10,10 @@ import {
   editableMappingsToParameterMappings,
 } from '@/components/ParameterMappingInput';
 
+import { toastr } from '@/services/ng';
+import { Widget } from '@/services/widget';
+import { Query } from '@/services/query';
+
 const { Option, OptGroup } = Select;
 
 class AddWidgetDialog extends React.Component {
@@ -38,7 +42,6 @@ class AddWidgetDialog extends React.Component {
     };
 
     // Don't show draft (unpublished) queries
-    const Query = this.props.Query; // eslint-disable-line react/prop-types
     Query.recent().$promise.then((items) => {
       this.setState({
         recentQueries: items.filter(item => !item.is_draft),
@@ -62,7 +65,6 @@ class AddWidgetDialog extends React.Component {
     });
 
     if (queryId) {
-      const Query = this.props.Query; // eslint-disable-line react/prop-types
       Query.get({ id: queryId }, (query) => {
         if (query) {
           const existingParamNames = map(
@@ -95,7 +97,6 @@ class AddWidgetDialog extends React.Component {
       return;
     }
 
-    const Query = this.props.Query; // eslint-disable-line react/prop-types
     Query.query({ q: term }, (results) => {
       // If user will type too quick - it's possible that there will be
       // several requests running simultaneously. So we need to check
@@ -117,8 +118,6 @@ class AddWidgetDialog extends React.Component {
   }
 
   saveWidget() {
-    const Widget = this.props.Widget; // eslint-disable-line react/prop-types
-    const toastr = this.props.toastr; // eslint-disable-line react/prop-types
     const dashboard = this.props.dashboard;
 
     this.setState({ saveInProgress: true });
@@ -278,9 +277,6 @@ class AddWidgetDialog extends React.Component {
   }
 
   render() {
-    const clientConfig = this.props.clientConfig; // eslint-disable-line react/prop-types
-    const Query = this.props.Query; // eslint-disable-line react/prop-types
-
     const existingParams = map(
       this.props.dashboard.getParametersDefs(),
       ({ name, type }) => ({ name, type }),
@@ -313,8 +309,6 @@ class AddWidgetDialog extends React.Component {
                 mappings={this.state.parameterMappings}
                 existingParams={existingParams}
                 onChange={mappings => this.updateParamMappings(mappings)}
-                clientConfig={clientConfig}
-                Query={Query}
               />,
             ]
           }
@@ -358,8 +352,7 @@ export default function init(ngModule) {
       dismiss: '&',
     },
   });
-  ngModule.component('addWidgetDialogImpl', react2angular(AddWidgetDialog, null, [
-    'toastr', 'Widget', 'Query', 'clientConfig']));
+  ngModule.component('addWidgetDialogImpl', react2angular(AddWidgetDialog));
 }
 
 init.init = true;
diff --git a/client/app/components/dashboards/EditParameterMappingsDialog.jsx b/client/app/components/dashboards/EditParameterMappingsDialog.jsx
index 2230224933..776be76f6c 100644
--- a/client/app/components/dashboards/EditParameterMappingsDialog.jsx
+++ b/client/app/components/dashboards/EditParameterMappingsDialog.jsx
@@ -60,9 +60,6 @@ class EditParameterMappingsDialog extends React.Component {
   }
 
   render() {
-    const clientConfig = this.props.clientConfig; // eslint-disable-line react/prop-types
-    const Query = this.props.Query; // eslint-disable-line react/prop-types
-
     const existingParams = map(
       this.props.dashboard.getParametersDefs(),
       ({ name, type }) => ({ name, type }),
@@ -89,8 +86,6 @@ class EditParameterMappingsDialog extends React.Component {
               mappings={this.state.parameterMappings}
               existingParams={existingParams}
               onChange={mappings => this.updateParamMappings(mappings)}
-              clientConfig={clientConfig}
-              Query={Query}
             />
           }
         </div>
@@ -134,8 +129,7 @@ export default function init(ngModule) {
       dismiss: '&',
     },
   });
-  ngModule.component('editParameterMappingsDialogImpl', react2angular(EditParameterMappingsDialog, null, [
-    'Query', 'clientConfig']));
+  ngModule.component('editParameterMappingsDialogImpl', react2angular(EditParameterMappingsDialog));
 }
 
 init.init = true;
diff --git a/client/app/components/dynamic-form/DynamicForm.jsx b/client/app/components/dynamic-form/DynamicForm.jsx
index a35ede9107..329e2493a7 100644
--- a/client/app/components/dynamic-form/DynamicForm.jsx
+++ b/client/app/components/dynamic-form/DynamicForm.jsx
@@ -8,7 +8,7 @@ import Button from 'antd/lib/button';
 import Upload from 'antd/lib/upload';
 import Icon from 'antd/lib/icon';
 import { react2angular } from 'react2angular';
-import { toastr } from '@/services/toastr';
+import { toastr } from '@/services/ng';
 import { Field, Action, AntdForm } from '../proptypes';
 import helper from './dynamicFormHelper';
 
diff --git a/client/app/components/tags-control/DashboardTagsControl.jsx b/client/app/components/tags-control/DashboardTagsControl.jsx
index 1a535d4994..7337964308 100644
--- a/client/app/components/tags-control/DashboardTagsControl.jsx
+++ b/client/app/components/tags-control/DashboardTagsControl.jsx
@@ -6,7 +6,7 @@ export class DashboardTagsControl extends ModelTagsControl {
 }
 
 export default function init(ngModule) {
-  ngModule.component('dashboardTagsControl', react2angular(DashboardTagsControl, null, ['$uibModal']));
+  ngModule.component('dashboardTagsControl', react2angular(DashboardTagsControl));
 }
 
 init.init = true;
diff --git a/client/app/components/tags-control/QueryTagsControl.jsx b/client/app/components/tags-control/QueryTagsControl.jsx
index cd071e2308..9b56c26700 100644
--- a/client/app/components/tags-control/QueryTagsControl.jsx
+++ b/client/app/components/tags-control/QueryTagsControl.jsx
@@ -6,7 +6,7 @@ export class QueryTagsControl extends ModelTagsControl {
 }
 
 export default function init(ngModule) {
-  ngModule.component('queryTagsControl', react2angular(QueryTagsControl, null, ['$uibModal']));
+  ngModule.component('queryTagsControl', react2angular(QueryTagsControl));
 }
 
 init.init = true;
diff --git a/client/app/components/tags-control/TagsControl.jsx b/client/app/components/tags-control/TagsControl.jsx
index c486ac78af..0a28c0f98d 100644
--- a/client/app/components/tags-control/TagsControl.jsx
+++ b/client/app/components/tags-control/TagsControl.jsx
@@ -1,6 +1,7 @@
 import { map, trim } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { $uibModal } from '@/services/ng';
 
 export default class TagsControl extends React.Component {
   static propTypes = {
@@ -20,7 +21,7 @@ export default class TagsControl extends React.Component {
   };
 
   editTags() {
-    const { getAvailableTags, onEdit, $uibModal } = this.props; // eslint-disable-line react/prop-types
+    const { getAvailableTags, onEdit } = this.props; // eslint-disable-line react/prop-types
     const tags = map(this.props.tags, trim);
 
     getAvailableTags().then((availableTags) => {
diff --git a/client/app/index.js b/client/app/index.js
index 11699ee39c..5b24c90750 100644
--- a/client/app/index.js
+++ b/client/app/index.js
@@ -13,8 +13,7 @@ ngModule.config(($locationProvider, $compileProvider, uiSelectConfig, toastrConf
 });
 
 // Update ui-select's template to use Font-Awesome instead of glyphicon.
-// eslint-disable-next-line no-unused-vars
-ngModule.run(($templateCache, OfflineListener) => {
+ngModule.run(($templateCache) => {
   const templateName = 'bootstrap/match.tpl.html';
   let template = $templateCache.get(templateName);
   template = template.replace('glyphicon glyphicon-remove', 'fa fa-remove');
diff --git a/client/app/pages/queries/view.js b/client/app/pages/queries/view.js
index 76fc36b991..d8c4f1aacb 100644
--- a/client/app/pages/queries/view.js
+++ b/client/app/pages/queries/view.js
@@ -1,6 +1,7 @@
 import { pick, some, find, minBy, map, intersection, isArray, isObject } from 'lodash';
 import { SCHEMA_NOT_SUPPORTED, SCHEMA_LOAD_ERROR } from '@/services/data-source';
 import getTags from '@/services/getTags';
+import Notifications from '@/services/notifications';
 import template from './query.html';
 
 const DEFAULT_TAB = 'table';
@@ -16,7 +17,6 @@ function QueryViewCtrl(
   KeyboardShortcuts,
   Title,
   AlertDialog,
-  Notifications,
   clientConfig,
   toastr,
   $uibModal,
diff --git a/client/app/services/alert-dialog.js b/client/app/services/alert-dialog.js
index c64b48c30c..84b1c410a2 100644
--- a/client/app/services/alert-dialog.js
+++ b/client/app/services/alert-dialog.js
@@ -1,3 +1,5 @@
+export let AlertDialog = null; // eslint-disable-line import/no-mutable-exports
+
 const AlertDialogComponent = {
   template: `
 <div class="modal-header">
@@ -23,8 +25,8 @@ const AlertDialogComponent = {
   },
 };
 
-function AlertDialog($uibModal) {
-  const service = {
+function AlertDialogService($uibModal) {
+  return {
     open(title, message, confirm) {
       return $uibModal.open({
         component: 'alertDialog',
@@ -36,14 +38,15 @@ function AlertDialog($uibModal) {
       }).result;
     },
   };
-
-  return service;
 }
 
 export default function init(ngModule) {
   ngModule.component('alertDialog', AlertDialogComponent);
-  ngModule.factory('AlertDialog', AlertDialog);
+  ngModule.factory('AlertDialog', AlertDialogService);
+
+  ngModule.run(($injector) => {
+    AlertDialog = $injector.get('AlertDialog');
+  });
 }
 
 init.init = true;
-
diff --git a/client/app/services/alert-subscription.js b/client/app/services/alert-subscription.js
index a50effa6c5..81daae1745 100644
--- a/client/app/services/alert-subscription.js
+++ b/client/app/services/alert-subscription.js
@@ -1,11 +1,15 @@
-function AlertSubscription($resource) {
-  const resource = $resource('api/alerts/:alertId/subscriptions/:subscriberId', { alertId: '@alert_id', subscriberId: '@id' });
-  return resource;
+export let AlertSubscription = null; // eslint-disable-line import/no-mutable-exports
+
+function AlertSubscriptionService($resource) {
+  return $resource('api/alerts/:alertId/subscriptions/:subscriberId', { alertId: '@alert_id', subscriberId: '@id' });
 }
 
 export default function init(ngModule) {
-  ngModule.factory('AlertSubscription', AlertSubscription);
+  ngModule.factory('AlertSubscription', AlertSubscriptionService);
+
+  ngModule.run(($injector) => {
+    AlertSubscription = $injector.get('AlertSubscription');
+  });
 }
 
 init.init = true;
-
diff --git a/client/app/services/alert.js b/client/app/services/alert.js
index 0f7ff38234..cdd34865fa 100644
--- a/client/app/services/alert.js
+++ b/client/app/services/alert.js
@@ -1,4 +1,6 @@
-function Alert($resource, $http) {
+export let Alert = null; // eslint-disable-line import/no-mutable-exports
+
+function AlertService($resource, $http) {
   const actions = {
     save: {
       method: 'POST',
@@ -15,14 +17,15 @@ function Alert($resource, $http) {
       }].concat($http.defaults.transformRequest),
     },
   };
-  const resource = $resource('api/alerts/:id', { id: '@id' }, actions);
-
-  return resource;
+  return $resource('api/alerts/:id', { id: '@id' }, actions);
 }
 
 export default function init(ngModule) {
-  ngModule.factory('Alert', Alert);
+  ngModule.factory('Alert', AlertService);
+
+  ngModule.run(($injector) => {
+    Alert = $injector.get('Alert');
+  });
 }
 
 init.init = true;
-
diff --git a/client/app/services/auth.js b/client/app/services/auth.js
index 86f7ddaabc..0ed8e97cf5 100644
--- a/client/app/services/auth.js
+++ b/client/app/services/auth.js
@@ -1,32 +1,40 @@
 import debug from 'debug';
+import { includes, extend } from 'lodash';
 
-const logger = debug('redash:auth');
-const SESSION_ITEM = 'session';
-const session = { loaded: false };
+// eslint-disable-next-line import/no-mutable-exports
+export let Auth = null;
 
-function storeSession(sessionData) {
-  logger('Updating session to be:', sessionData);
-  Object.assign(session, sessionData, { loaded: true });
-}
+export const currentUser = {
+  canEdit(object) {
+    const userId = object.user_id || (object.user && object.user.id);
+    return this.hasPermission('admin') || (userId && userId === this.id);
+  },
+
+  hasPermission(permission) {
+    return includes(this.permissions, permission);
+  },
 
-function getLocalSessionData() {
-  if (session.loaded) {
-    return session;
-  }
+  get isAdmin() {
+    return this.hasPermission('admin');
+  },
+};
 
-  const sessionData = window.sessionStorage.getItem(SESSION_ITEM);
-  if (sessionData) {
-    storeSession(JSON.parse(sessionData));
-  }
+export const clientConfig = {};
 
-  return session;
+const logger = debug('redash:auth');
+const session = { loaded: false };
+
+function updateSession(sessionData) {
+  logger('Updating session to be:', sessionData);
+  extend(session, sessionData, { loaded: true });
+  extend(currentUser, session.user);
+  extend(clientConfig, session.client_config);
 }
 
 function AuthService($window, $location, $q, $http) {
-  const Auth = {
+  return {
     isAuthenticated() {
-      const sessionData = getLocalSessionData();
-      return sessionData.loaded && sessionData.user.id;
+      return session.loaded && session.user.id;
     },
     login() {
       const next = encodeURI($location.url());
@@ -35,27 +43,25 @@ function AuthService($window, $location, $q, $http) {
     },
     logout() {
       logger('Logout.');
-      window.sessionStorage.removeItem(SESSION_ITEM);
       $window.location.href = 'logout';
     },
     loadSession() {
       logger('Loading session');
-      const sessionData = getLocalSessionData();
-      if (sessionData.loaded && sessionData.user.id) {
+      if (session.loaded && session.user.id) {
         logger('Resolving with local value.');
-        return $q.resolve(sessionData);
+        return $q.resolve(session);
       }
 
       this.setApiKey(null);
       return $http.get('api/session').then((response) => {
-        storeSession(response.data);
+        updateSession(response.data);
         return session;
       });
     },
     loadConfig() {
       logger('Loading config');
       return $http.get('/api/config').then((response) => {
-        storeSession({ client_config: response.data.client_config, user: { permissions: [] } });
+        updateSession({ client_config: response.data.client_config, user: { permissions: [] } });
         return response.data;
       });
     },
@@ -68,14 +74,14 @@ function AuthService($window, $location, $q, $http) {
     },
     requireSession() {
       logger('Requested authentication');
-      if (Auth.isAuthenticated()) {
-        return $q.when(getLocalSessionData());
+      if (this.isAuthenticated()) {
+        return $q.when(session);
       }
-      return Auth.loadSession()
+      return this.loadSession()
         .then(() => {
-          if (Auth.isAuthenticated()) {
+          if (this.isAuthenticated()) {
             logger('Loaded session');
-            return getLocalSessionData();
+            return session;
           }
           logger('Need to login, redirecting');
           this.login();
@@ -86,33 +92,12 @@ function AuthService($window, $location, $q, $http) {
         });
     },
   };
-
-  return Auth;
-}
-
-function CurrentUserService() {
-  const sessionData = getLocalSessionData();
-  Object.assign(this, sessionData.user);
-
-  this.canEdit = (object) => {
-    const userId = object.user_id || (object.user && object.user.id);
-    return this.hasPermission('admin') || (userId && userId === this.id);
-  };
-
-  this.hasPermission = permission => this.permissions.indexOf(permission) !== -1;
-
-  this.isAdmin = this.hasPermission('admin');
-}
-
-function ClientConfigService() {
-  Object.assign(this, getLocalSessionData().client_config);
 }
 
 function apiKeyHttpInterceptor($injector) {
   return {
     request(config) {
-      const Auth = $injector.get('Auth');
-      const apiKey = Auth.getApiKey();
+      const apiKey = $injector.get('Auth').getApiKey();
       if (apiKey) {
         config.headers.Authorization = `Key ${apiKey}`;
       }
@@ -124,14 +109,17 @@ function apiKeyHttpInterceptor($injector) {
 
 export default function init(ngModule) {
   ngModule.factory('Auth', AuthService);
-  ngModule.service('currentUser', CurrentUserService);
-  ngModule.service('clientConfig', ClientConfigService);
+  ngModule.value('currentUser', currentUser);
+  ngModule.value('clientConfig', clientConfig);
   ngModule.factory('apiKeyHttpInterceptor', apiKeyHttpInterceptor);
 
   ngModule.config(($httpProvider) => {
     $httpProvider.interceptors.push('apiKeyHttpInterceptor');
   });
+
+  ngModule.run(($injector) => {
+    Auth = $injector.get('Auth');
+  });
 }
 
 init.init = true;
-
diff --git a/client/app/services/dashboard.js b/client/app/services/dashboard.js
index bb63aea261..3898189297 100644
--- a/client/app/services/dashboard.js
+++ b/client/app/services/dashboard.js
@@ -1,5 +1,7 @@
 import _ from 'lodash';
 
+export let Dashboard = null; // eslint-disable-line import/no-mutable-exports
+
 function prepareWidgetsForDashboard(widgets) {
   // Default height for auto-height widgets.
   // Compute biggest widget size and choose between it and some magic number.
@@ -44,7 +46,7 @@ function prepareWidgetsForDashboard(widgets) {
   return widgets;
 }
 
-function Dashboard($resource, $http, $location, currentUser, Widget, dashboardGridOptions) {
+function DashboardService($resource, $http, $location, currentUser, Widget, dashboardGridOptions) {
   function prepareDashboardWidgets(widgets) {
     return prepareWidgetsForDashboard(_.map(widgets, widget => new Widget(widget)));
   }
@@ -183,8 +185,11 @@ function Dashboard($resource, $http, $location, currentUser, Widget, dashboardGr
 }
 
 export default function init(ngModule) {
-  ngModule.factory('Dashboard', Dashboard);
+  ngModule.factory('Dashboard', DashboardService);
+
+  ngModule.run(($injector) => {
+    Dashboard = $injector.get('Dashboard');
+  });
 }
 
 init.init = true;
-
diff --git a/client/app/services/data-source.js b/client/app/services/data-source.js
index 55b9697f7b..f1d69d5cbc 100644
--- a/client/app/services/data-source.js
+++ b/client/app/services/data-source.js
@@ -1,7 +1,9 @@
 export const SCHEMA_NOT_SUPPORTED = 1;
 export const SCHEMA_LOAD_ERROR = 2;
 
-function DataSource($q, $resource, $http) {
+export let DataSource = null; // eslint-disable-line import/no-mutable-exports
+
+function DataSourceService($q, $resource, $http) {
   function fetchSchema(dataSourceId, refresh = false) {
     const params = {};
 
@@ -43,8 +45,11 @@ function DataSource($q, $resource, $http) {
 }
 
 export default function init(ngModule) {
-  ngModule.factory('DataSource', DataSource);
+  ngModule.factory('DataSource', DataSourceService);
+
+  ngModule.run(($injector) => {
+    DataSource = $injector.get('DataSource');
+  });
 }
 
 init.init = true;
-
diff --git a/client/app/services/destination.js b/client/app/services/destination.js
index 8225e05fda..9c3c6d2f61 100644
--- a/client/app/services/destination.js
+++ b/client/app/services/destination.js
@@ -1,17 +1,19 @@
-function Destination($resource) {
+export let Destination = null; // eslint-disable-line import/no-mutable-exports
+
+function DestinationService($resource) {
   const actions = {
     get: { method: 'GET', cache: false, isArray: false },
     query: { method: 'GET', cache: false, isArray: true },
   };
-
-  const DestinationResource = $resource('api/destinations/:id', { id: '@id' }, actions);
-
-  return DestinationResource;
+  return $resource('api/destinations/:id', { id: '@id' }, actions);
 }
 
 export default function init(ngModule) {
-  ngModule.factory('Destination', Destination);
+  ngModule.factory('Destination', DestinationService);
+
+  ngModule.run(($injector) => {
+    Destination = $injector.get('Destination');
+  });
 }
 
 init.init = true;
-
diff --git a/client/app/services/events.js b/client/app/services/events.js
index 18f26e6cb7..699a644f5e 100644
--- a/client/app/services/events.js
+++ b/client/app/services/events.js
@@ -1,9 +1,7 @@
-import recordEvent from '@/lib/recordEvent';
+import recordEvent from '@/services/recordEvent';
 
 function Events() {
-  this.record = (action, objectType, objectId, additionalProperties) => {
-    recordEvent(action, objectType, objectId, additionalProperties);
-  };
+  this.record = recordEvent;
 }
 
 export default function init(ngModule) {
diff --git a/client/app/services/getTags.js b/client/app/services/getTags.js
index d96edcb810..d5ad18e8eb 100644
--- a/client/app/services/getTags.js
+++ b/client/app/services/getTags.js
@@ -1,4 +1,4 @@
-import { $http } from '@/services/http';
+import { $http } from '@/services/ng';
 
 function processTags(data) {
   return data.tags || [];
diff --git a/client/app/services/group.js b/client/app/services/group.js
index 5aab223b05..6751f9dc0a 100644
--- a/client/app/services/group.js
+++ b/client/app/services/group.js
@@ -1,4 +1,6 @@
-function Group($resource) {
+export let Group = null; // eslint-disable-line import/no-mutable-exports
+
+function GroupService($resource) {
   const actions = {
     get: { method: 'GET', cache: false, isArray: false },
     query: { method: 'GET', cache: false, isArray: true },
@@ -9,13 +11,15 @@ function Group($resource) {
       method: 'GET', cache: false, isArray: true, url: 'api/groups/:id/data_sources',
     },
   };
-  const resource = $resource('api/groups/:id', { id: '@id' }, actions);
-  return resource;
+  return $resource('api/groups/:id', { id: '@id' }, actions);
 }
 
 export default function init(ngModule) {
-  ngModule.factory('Group', Group);
+  ngModule.factory('Group', GroupService);
+
+  ngModule.run(($injector) => {
+    Group = $injector.get('Group');
+  });
 }
 
 init.init = true;
-
diff --git a/client/app/services/http.js b/client/app/services/http.js
deleted file mode 100644
index a04569294f..0000000000
--- a/client/app/services/http.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// eslint-disable-next-line import/no-mutable-exports
-export let $http = null;
-
-export default function init(ngModule) {
-  ngModule.run(($injector) => {
-    $http = $injector.get('$http');
-  });
-}
-
-init.init = true;
-
diff --git a/client/app/services/keyboard-shortcuts.js b/client/app/services/keyboard-shortcuts.js
index 7c25d33b2b..1e3b6cc2cb 100644
--- a/client/app/services/keyboard-shortcuts.js
+++ b/client/app/services/keyboard-shortcuts.js
@@ -2,6 +2,8 @@ import { each, trim, without } from 'lodash';
 import Mousetrap from 'mousetrap';
 import 'mousetrap/plugins/global-bind/mousetrap-global-bind';
 
+export let KeyboardShortcuts = null; // eslint-disable-line import/no-mutable-exports
+
 const handlers = {};
 
 function onShortcut(event, shortcut) {
@@ -10,7 +12,7 @@ function onShortcut(event, shortcut) {
   each(handlers[shortcut], fn => fn());
 }
 
-function KeyboardShortcuts() {
+function KeyboardShortcutsService() {
   this.modKey = /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? 'Cmd' : 'Ctrl';
 
   this.bind = function bind(keymap) {
@@ -44,7 +46,11 @@ function KeyboardShortcuts() {
 }
 
 export default function init(ngModule) {
-  ngModule.service('KeyboardShortcuts', KeyboardShortcuts);
+  ngModule.service('KeyboardShortcuts', KeyboardShortcutsService);
+
+  ngModule.run(($injector) => {
+    KeyboardShortcuts = $injector.get('KeyboardShortcuts');
+  });
 }
 
 init.init = true;
diff --git a/client/app/services/ng.js b/client/app/services/ng.js
new file mode 100644
index 0000000000..ce59976f82
--- /dev/null
+++ b/client/app/services/ng.js
@@ -0,0 +1,16 @@
+export let $http = null; // eslint-disable-line import/no-mutable-exports
+export let $sanitize = null; // eslint-disable-line import/no-mutable-exports
+export let $uibModal = null; // eslint-disable-line import/no-mutable-exports
+export let toastr = null; // eslint-disable-line import/no-mutable-exports
+
+export default function init(ngModule) {
+  ngModule.run(($injector) => {
+    $http = $injector.get('$http');
+    $sanitize = $injector.get('$sanitize');
+    $uibModal = $injector.get('$uibModal');
+    toastr = $injector.get('toastr');
+  });
+}
+
+init.init = true;
+
diff --git a/client/app/services/notifications.js b/client/app/services/notifications.js
index 0441df3362..da61c65d9a 100644
--- a/client/app/services/notifications.js
+++ b/client/app/services/notifications.js
@@ -1,86 +1,72 @@
+import { find } from 'lodash';
 import debug from 'debug';
+import recordEvent from '@/services/recordEvent';
 
 const logger = debug('redash:notifications');
 
-function Notifications(currentUser, Events) {
-  const notificationService = { pageVisible: true };
-
-  notificationService.monitorVisibility = function monitorVisibility() {
-    let hidden;
-    let visibilityChange;
+const Notification = window.Notification || null;
+if (!Notification) {
+  logger('HTML5 notifications are not supported.');
+}
 
-    if (typeof document.hidden !== 'undefined') {
-      hidden = 'hidden';
-      visibilityChange = 'visibilitychange';
-    } else if (typeof document.msHidden !== 'undefined') {
-      hidden = 'msHidden';
-      visibilityChange = 'msvisibilitychange';
+const hidden = find(
+  ['hidden', 'webkitHidden', 'mozHidden', 'msHidden'],
+  prop => prop in document,
+);
+const visibilityChange = find(
+  ['visibilitychange', 'webkitvisibilitychange', 'mozvisibilitychange', 'msvisibilitychange'],
+  prop => prop in document,
+);
+
+class NotificationsService {
+  constructor() {
+    this.pageVisible = false;
+    this.monitorVisibility();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getPermissions() {
+    if (Notification && (Notification.permission === 'default')) {
+      Notification.requestPermission((status) => {
+        if (Notification.permission !== status) {
+          Notification.permission = status;
+        }
+      });
     }
+  }
 
+  monitorVisibility() {
+    this.pageVisible = !document[hidden];
     let documentHidden = document[hidden];
 
     document.addEventListener(visibilityChange, () => {
       if (documentHidden !== document[hidden]) {
-        if (document[hidden]) {
-          notificationService.pageVisible = false;
-        } else {
-          notificationService.pageVisible = true;
-        }
-
+        this.pageVisible = !document[hidden];
         documentHidden = document[hidden];
       }
     });
-  };
-
-  notificationService.monitorVisibility();
-
-  notificationService.isSupported = () => {
-    if ('Notification' in window) {
-      return true;
-    }
+  }
 
-    logger('HTML5 notifications are not supported.');
-    return false;
-  };
-
-  notificationService.getPermissions = function getPermissions() {
-    if (!this.isSupported()) {
-      return;
-    }
-
-    if (Notification.permission === 'default') {
-      Notification.requestPermission((status) => {
-        if (Notification.permission !== status) {
-          Notification.permission = status;
-        }
-      });
-    }
-  };
-
-  notificationService.showNotification = function showNotification(title, content) {
-    if (!this.isSupported() || this.pageVisible || Notification.permission !== 'granted') {
+  showNotification(title, content) {
+    if (!Notification || this.pageVisible || (Notification.permission !== 'granted')) {
       return;
     }
 
     // using the 'tag' to avoid showing duplicate notifications
-    const notification = new Notification(title, { tag: title + content, body: content, icon: '/images/redash_icon_small.png' });
+    const notification = new Notification(title, {
+      tag: title + content,
+      body: content,
+      icon: '/images/redash_icon_small.png',
+    });
     setTimeout(() => {
       notification.close();
     }, 3000);
     notification.onclick = function onClick() {
       window.focus();
       this.close();
-      Events.record('click', 'notification');
+      recordEvent('click', 'notification');
     };
-  };
-
-  return notificationService;
+  }
 }
 
-
-export default function init(ngModule) {
-  ngModule.factory('Notifications', Notifications);
-}
-
-init.init = true;
-
+export default new NotificationsService();
diff --git a/client/app/services/offline-listener.js b/client/app/services/offline-listener.js
index cf4fae5b77..a7ddad91b5 100644
--- a/client/app/services/offline-listener.js
+++ b/client/app/services/offline-listener.js
@@ -1,25 +1,25 @@
-function OfflineListener(toastr) {
-  function addOnlineListener(toast) {
-    function onlineStateHandler() {
-      toastr.remove(toast.toastId);
-      window.removeEventListener('online', onlineStateHandler);
-    }
-    window.addEventListener('online', onlineStateHandler);
-  }
+import { toastr } from '@/services/ng';
 
-  window.addEventListener('offline', () => {
-    const toast = toastr.warning('<div>Please check your Internet connection.</div>', '', {
-      allowHtml: true,
-      autoDismiss: false,
-      timeOut: false,
-      tapToDismiss: true,
-    });
-    addOnlineListener(toast);
-  });
+function addOnlineListener(toast) {
+  function onlineStateHandler() {
+    toastr.remove(toast.toastId);
+    window.removeEventListener('online', onlineStateHandler);
+  }
+  window.addEventListener('online', onlineStateHandler);
 }
 
 export default function init(ngModule) {
-  ngModule.service('OfflineListener', OfflineListener);
+  ngModule.run(() => {
+    window.addEventListener('offline', () => {
+      const toast = toastr.warning('<div>Please check your Internet connection.</div>', '', {
+        allowHtml: true,
+        autoDismiss: false,
+        timeOut: false,
+        tapToDismiss: true,
+      });
+      addOnlineListener(toast);
+    });
+  });
 }
 
 init.init = true;
diff --git a/client/app/services/organization-status.js b/client/app/services/organization-status.js
index b091e0910f..81d827e92e 100644
--- a/client/app/services/organization-status.js
+++ b/client/app/services/organization-status.js
@@ -1,4 +1,6 @@
-function OrganizationStatus($http) {
+export let OrganizationStatus = null; // eslint-disable-line import/no-mutable-exports
+
+function OrganizationStatusService($http) {
   this.objectCounters = {};
 
   this.refresh = () =>
@@ -9,7 +11,11 @@ function OrganizationStatus($http) {
 }
 
 export default function init(ngModule) {
-  ngModule.service('OrganizationStatus', OrganizationStatus);
+  ngModule.service('OrganizationStatus', OrganizationStatusService);
+
+  ngModule.run(($injector) => {
+    OrganizationStatus = $injector.get('OrganizationStatus');
+  });
 }
 
 init.init = true;
diff --git a/client/app/services/query-snippet.js b/client/app/services/query-snippet.js
index 7fe97d0845..0d4bb7f1f2 100644
--- a/client/app/services/query-snippet.js
+++ b/client/app/services/query-snippet.js
@@ -1,4 +1,6 @@
-function QuerySnippet($resource) {
+export let QuerySnippet = null; // eslint-disable-line import/no-mutable-exports
+
+function QuerySnippetService($resource) {
   const resource = $resource('api/query_snippets/:id', { id: '@id' });
   resource.prototype.getSnippet = function getSnippet() {
     let name = this.trigger;
@@ -17,7 +19,11 @@ function QuerySnippet($resource) {
 }
 
 export default function init(ngModule) {
-  ngModule.factory('QuerySnippet', QuerySnippet);
+  ngModule.factory('QuerySnippet', QuerySnippetService);
+
+  ngModule.run(($injector) => {
+    QuerySnippet = $injector.get('QuerySnippet');
+  });
 }
 
 init.init = true;
diff --git a/client/app/services/query.js b/client/app/services/query.js
index 23151cc910..57ece987dd 100644
--- a/client/app/services/query.js
+++ b/client/app/services/query.js
@@ -8,6 +8,8 @@ import {
 
 Mustache.escape = identity; // do not html-escape values
 
+export let Query = null; // eslint-disable-line import/no-mutable-exports
+
 const logger = debug('redash:services:query');
 
 const DATETIME_FORMATS = {
@@ -323,7 +325,7 @@ function QueryResource(
   QueryResultError,
   QueryResult,
 ) {
-  const Query = $resource(
+  const QueryService = $resource(
     'api/queries/:id',
     { id: '@id' },
     {
@@ -371,8 +373,8 @@ function QueryResource(
     },
   );
 
-  Query.newQuery = function newQuery() {
-    return new Query({
+  QueryService.newQuery = function newQuery() {
+    return new QueryService({
       query: '',
       name: 'New Query',
       schedule: null,
@@ -381,7 +383,7 @@ function QueryResource(
     });
   };
 
-  Query.format = function formatQuery(syntax, query) {
+  QueryService.format = function formatQuery(syntax, query) {
     if (syntax === 'json') {
       try {
         const formatted = JSON.stringify(JSON.parse(query), ' ', 4);
@@ -396,19 +398,19 @@ function QueryResource(
     }
   };
 
-  Query.prototype.getSourceLink = function getSourceLink() {
+  QueryService.prototype.getSourceLink = function getSourceLink() {
     return `/queries/${this.id}/source`;
   };
 
-  Query.prototype.isNew = function isNew() {
+  QueryService.prototype.isNew = function isNew() {
     return this.id === undefined;
   };
 
-  Query.prototype.hasDailySchedule = function hasDailySchedule() {
+  QueryService.prototype.hasDailySchedule = function hasDailySchedule() {
     return this.schedule && this.schedule.match(/\d\d:\d\d/) !== null;
   };
 
-  Query.prototype.scheduleInLocalTime = function scheduleInLocalTime() {
+  QueryService.prototype.scheduleInLocalTime = function scheduleInLocalTime() {
     const parts = this.schedule.split(':');
     return moment
       .utc()
@@ -418,15 +420,15 @@ function QueryResource(
       .format('HH:mm');
   };
 
-  Query.prototype.hasResult = function hasResult() {
+  QueryService.prototype.hasResult = function hasResult() {
     return !!(this.latest_query_data || this.latest_query_data_id);
   };
 
-  Query.prototype.paramsRequired = function paramsRequired() {
+  QueryService.prototype.paramsRequired = function paramsRequired() {
     return this.getParameters().isRequired();
   };
 
-  Query.prototype.getQueryResult = function getQueryResult(maxAge, selectedQueryText) {
+  QueryService.prototype.getQueryResult = function getQueryResult(maxAge, selectedQueryText) {
     if (!this.query) {
       return new QueryResultError("Can't execute empty query.");
     }
@@ -476,7 +478,7 @@ function QueryResource(
     return this.queryResult;
   };
 
-  Query.prototype.getUrl = function getUrl(source, hash) {
+  QueryService.prototype.getUrl = function getUrl(source, hash) {
     let url = `queries/${this.id}`;
 
     if (source) {
@@ -502,11 +504,11 @@ function QueryResource(
     return url;
   };
 
-  Query.prototype.getQueryResultPromise = function getQueryResultPromise() {
+  QueryService.prototype.getQueryResultPromise = function getQueryResultPromise() {
     return this.getQueryResult().toPromise();
   };
 
-  Query.prototype.getParameters = function getParameters() {
+  QueryService.prototype.getParameters = function getParameters() {
     if (!this.$parameters) {
       this.$parameters = new Parameters(this, $location.search());
     }
@@ -514,17 +516,20 @@ function QueryResource(
     return this.$parameters;
   };
 
-  Query.prototype.getParametersDefs = function getParametersDefs() {
+  QueryService.prototype.getParametersDefs = function getParametersDefs() {
     return this.getParameters().get();
   };
 
-  return Query;
+  return QueryService;
 }
 
 export default function init(ngModule) {
   ngModule.factory('QueryResultError', QueryResultErrorFactory);
   ngModule.factory('Query', QueryResource);
+
+  ngModule.run(($injector) => {
+    Query = $injector.get('Query');
+  });
 }
 
 init.init = true;
-
diff --git a/client/app/lib/recordEvent.js b/client/app/services/recordEvent.js
similarity index 79%
rename from client/app/lib/recordEvent.js
rename to client/app/services/recordEvent.js
index f4c2e2ff51..f501cde116 100644
--- a/client/app/lib/recordEvent.js
+++ b/client/app/services/recordEvent.js
@@ -1,5 +1,5 @@
-import { debounce } from 'lodash';
-import { $http } from '@/services/http';
+import { debounce, extend } from 'lodash';
+import { $http } from '@/services/ng';
 
 let events = [];
 
@@ -18,7 +18,7 @@ export default function recordEvent(action, objectType, objectId, additionalProp
     timestamp: Date.now() / 1000.0,
     screen_resolution: `${window.screen.width}x${window.screen.height}`,
   };
-  Object.assign(event, additionalProperties);
+  extend(event, additionalProperties);
   events.push(event);
 
   post();
diff --git a/client/app/services/toastr.js b/client/app/services/toastr.js
deleted file mode 100644
index c46f3728e5..0000000000
--- a/client/app/services/toastr.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// eslint-disable-next-line import/no-mutable-exports
-export let toastr = null;
-
-export default function init(ngModule) {
-  ngModule.run(($injector) => {
-    toastr = $injector.get('toastr');
-  });
-}
-
-init.init = true;
diff --git a/client/app/services/user.js b/client/app/services/user.js
index f020480131..9921b7adb8 100644
--- a/client/app/services/user.js
+++ b/client/app/services/user.js
@@ -1,11 +1,13 @@
 import { isString } from 'lodash';
-import { $http } from '@/services/http';
+import { $http, $sanitize, toastr } from '@/services/ng';
+
+export let User = null; // eslint-disable-line import/no-mutable-exports
 
 function disableResource(user) {
   return `api/users/${user.id}/disable`;
 }
 
-function enableUser(user, toastr, $sanitize) {
+function enableUser(user) {
   const userName = $sanitize(user.name);
 
   return $http
@@ -25,7 +27,7 @@ function enableUser(user, toastr, $sanitize) {
     });
 }
 
-function disableUser(user, toastr, $sanitize) {
+function disableUser(user) {
   const userName = $sanitize(user.name);
   return $http
     .post(disableResource(user))
@@ -45,7 +47,7 @@ function disableUser(user, toastr, $sanitize) {
     });
 }
 
-function deleteUser(user, toastr, $sanitize) {
+function deleteUser(user) {
   const userName = $sanitize(user.name);
   return $http
     .delete(`api/users/${user.id}`)
@@ -63,7 +65,7 @@ function deleteUser(user, toastr, $sanitize) {
     });
 }
 
-function User($resource, $sanitize, toastr) {
+function UserService($resource) {
   const actions = {
     get: { method: 'GET' },
     save: { method: 'POST' },
@@ -75,15 +77,19 @@ function User($resource, $sanitize, toastr) {
 
   const UserResource = $resource('api/users/:id', { id: '@id' }, actions);
 
-  UserResource.enableUser = user => enableUser(user, toastr, $sanitize);
-  UserResource.disableUser = user => disableUser(user, toastr, $sanitize);
-  UserResource.deleteUser = user => deleteUser(user, toastr, $sanitize);
+  UserResource.enableUser = enableUser;
+  UserResource.disableUser = disableUser;
+  UserResource.deleteUser = deleteUser;
 
   return UserResource;
 }
 
 export default function init(ngModule) {
-  ngModule.factory('User', User);
+  ngModule.factory('User', UserService);
+
+  ngModule.run(($injector) => {
+    User = $injector.get('User');
+  });
 }
 
 init.init = true;
diff --git a/client/app/services/widget.js b/client/app/services/widget.js
index 9966689882..822af3dbeb 100644
--- a/client/app/services/widget.js
+++ b/client/app/services/widget.js
@@ -1,6 +1,8 @@
 import moment from 'moment';
 import { each, pick, extend, isObject, truncate, keys, difference, filter, map } from 'lodash';
 
+export let Widget = null; // eslint-disable-line import/no-mutable-exports
+
 function calculatePositionOptions(Visualization, dashboardGridOptions, widget) {
   widget.width = 1; // Backward compatibility, user on back-end
 
@@ -68,7 +70,7 @@ export const ParameterMappingType = {
 };
 
 function WidgetFactory($http, $location, Query, Visualization, dashboardGridOptions) {
-  class Widget {
+  class WidgetService {
     static MappingType = ParameterMappingType;
 
     constructor(data) {
@@ -171,7 +173,7 @@ function WidgetFactory($http, $location, Query, Visualization, dashboardGridOpti
     isStaticParam(param) {
       const mappings = this.getParameterMappings();
       const mappingType = mappings[param.name].type;
-      return mappingType === Widget.MappingType.StaticValue;
+      return mappingType === WidgetService.MappingType.StaticValue;
     }
 
     getParametersDefs() {
@@ -182,8 +184,8 @@ function WidgetFactory($http, $location, Query, Visualization, dashboardGridOpti
       const queryParams = $location.search();
 
       const localTypes = [
-        Widget.MappingType.WidgetLevel,
-        Widget.MappingType.StaticValue,
+        WidgetService.MappingType.WidgetLevel,
+        WidgetService.MappingType.StaticValue,
       ];
       return map(
         filter(params, param => localTypes.indexOf(mappings[param.name].type) >= 0),
@@ -193,7 +195,7 @@ function WidgetFactory($http, $location, Query, Visualization, dashboardGridOpti
           result.title = mapping.title || param.title;
           result.locals = [param];
           result.urlPrefix = `w${this.id}_`;
-          if (mapping.type === Widget.MappingType.StaticValue) {
+          if (mapping.type === WidgetService.MappingType.StaticValue) {
             result.setValue(mapping.value);
           } else {
             result.fromUrlParams(queryParams);
@@ -218,7 +220,7 @@ function WidgetFactory($http, $location, Query, Visualization, dashboardGridOpti
           // should be mapped to a dashboard-level parameter with the same name
           this.options.parameterMappings[param.name] = {
             name: param.name,
-            type: param.global ? Widget.MappingType.DashboardLevel : Widget.MappingType.WidgetLevel,
+            type: param.global ? WidgetService.MappingType.DashboardLevel : WidgetService.MappingType.WidgetLevel,
             mapTo: param.name, // map to param with the same name
             value: null, // for StaticValue
             title: '', // Use parameter's title
@@ -239,11 +241,15 @@ function WidgetFactory($http, $location, Query, Visualization, dashboardGridOpti
     }
   }
 
-  return Widget;
+  return WidgetService;
 }
 
 export default function init(ngModule) {
   ngModule.factory('Widget', WidgetFactory);
+
+  ngModule.run(($injector) => {
+    Widget = $injector.get('Widget');
+  });
 }
 
 init.init = true;