How to use the aurelia-framework.inject function in aurelia-framework

/* -*- javascript -*- */
"use strict";

import {inject, LogManager} from 'aurelia-framework';


@inject( Element )
export class Views {
	heading = 'Views';


	constructor( element ) {
		this.element = element;
		this.logger = LogManager.getLogger( 'views' );
	}

	attached() {
		$( this.element ).shape();
	}

	toggleSource( event ) {
		this.logger.debug( "Toggling source view for ", this.element );
		$( this.element ).shape( 'flip over' );

import { IRules } from '../interfaces/rules';
import { inject } from 'aurelia-framework';
import { SchemaFormConfiguration } from '../services/schema-form-configuration';
import { ValidationRules, validationMessages, FluentRuleCustomizer } from 'aurelia-validation';

@inject(SchemaFormConfiguration)
export class CommonRules implements IRules {
  constructor(private configuration: SchemaFormConfiguration) { }

  type = 'common';

  register(): void {
    this.add();
  }

  setCustomMessages() {
    validationMessages.const = this.configuration.messages.const || validationMessages.equals;
  }

  add(): void {
    // enum
    ValidationRules

var DuMarqueeSelection = /** @class */ (function (_super) {
    __extends(DuMarqueeSelection, _super);
    function DuMarqueeSelection(element) {
        var _this = _super.call(this, element) || this;
        _this.hiddenIsHidden = true;
        _this.hiddenName = 'hidden';
        return _this;
    }
    DuMarqueeSelection.prototype.attached = function () {
        this.renderReact(MarqueeSelection, this.createState(reactprops));
    };
    DuMarqueeSelection = __decorate([
        inject(Element),
        customElement('du-marquee-selection')
    ], DuMarqueeSelection);
    return DuMarqueeSelection;
}(AuReactStateWrapper));
export { DuMarqueeSelection };

__metadata('design:type', String)
    ], OfficeContextualMenuItem.prototype, "href", void 0);
    __decorate([
        aurelia_framework_1.bindable, 
        __metadata('design:type', Boolean)
    ], OfficeContextualMenuItem.prototype, "hasMenu", void 0);
    __decorate([
        aurelia_framework_1.bindable, 
        __metadata('design:type', Boolean)
    ], OfficeContextualMenuItem.prototype, "divider", void 0);
    __decorate([
        aurelia_framework_1.bindable, 
        __metadata('design:type', Boolean)
    ], OfficeContextualMenuItem.prototype, "header", void 0);
    OfficeContextualMenuItem = __decorate([
        aurelia_framework_1.inject(Element),
        aurelia_framework_1.customElement('office-contextualmenu-item'), 
        __metadata('design:paramtypes', [Element])
    ], OfficeContextualMenuItem);
    return OfficeContextualMenuItem;
})();
exports.OfficeContextualMenuItem = OfficeContextualMenuItem;

import {HttpClient} from 'aurelia-fetch-client';
import {inject} from 'aurelia-framework';

@inject(HttpClient)
export class BookApi{
    
    constructor(http){
        this.http = http;
    }

    getBooks(){

        return this.http.fetch('books.json')
                 .then(response => response.json())
                 .then(books => {
                   return books;
                 });

  }

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';
import {Config} from 'services/config';
import {Session} from 'services/session';

@inject(HttpClient, Config, Session)
export class VendorsIndexRoute {
  heading = 'Vendors';
  vendors = [];
  endPoint = 'vendors';

  constructor(http, config, session){
    this.http = http;
    this.config = config;
    this.session = session;
  }

  async activate() {
    try {
      let query = `{"user": "${this.session.currentUser._id}"}`;
      let vendors = await this.http.get(`${this.config.server.url}${this.endPoint}?conditions=${query}`);
      this.vendors = vendors.content;

import { inject } from "aurelia-framework";
import { I18N } from "aurelia-i18n";
import CurrentItemProvider from "resources/CurrentItemProvider.js";

function decodeHtmlEntities(str) {
  return str.replace(/&#(\d+);/g, function(match, dec) {
    return String.fromCharCode(dec);
  });
}

@inject(I18N, CurrentItemProvider)
export class ToolTValueConverter {
  constructor(i18n, currentItemProvider) {
    this.service = i18n;
    this.currentItemProvider = currentItemProvider;
  }

  toView(value, options) {
    if (value !== undefined) {
      const item = this.currentItemProvider.getCurrentItem();
      return decodeHtmlEntities(
        this.service.tr(`${item.conf.tool}:${value}`, options)
      );
    }
  }
}

var DuActionButton = /** @class */ (function (_super) {
    __extends(DuActionButton, _super);
    function DuActionButton(element) {
        return _super.call(this, element) || this;
    }
    DuActionButton.prototype.render = function () {
        renderReact.bind(this)(ActionButton, reactprops);
    };
    DuActionButton = __decorate([
        noView(),
        inject(Element),
        customElement('du-action-button')
    ], DuActionButton);
    return DuActionButton;
}(ReactWrapper));
export { DuActionButton };

aurelia_framework_1.bindable()
    ], AureliaSlickgridCustomElement.prototype, "gridId", void 0);
    __decorate([
        aurelia_framework_1.bindable()
    ], AureliaSlickgridCustomElement.prototype, "gridOptions", void 0);
    __decorate([
        aurelia_framework_1.bindable()
    ], AureliaSlickgridCustomElement.prototype, "gridHeight", void 0);
    __decorate([
        aurelia_framework_1.bindable()
    ], AureliaSlickgridCustomElement.prototype, "gridWidth", void 0);
    __decorate([
        aurelia_framework_1.bindable()
    ], AureliaSlickgridCustomElement.prototype, "pickerOptions", void 0);
    AureliaSlickgridCustomElement = __decorate([
        aurelia_framework_1.inject(aurelia_framework_1.BindingEngine, index_2.ExportService, Element, aurelia_event_aggregator_1.EventAggregator, index_2.ExtensionService, extensionUtility_1.ExtensionUtility, index_2.FilterService, index_2.GridEventService, index_2.GridService, index_2.GridStateService, index_2.GroupingAndColspanService, index_2.ResizerService, shared_service_1.SharedService, index_2.SortService, aurelia_framework_1.Container)
    ], AureliaSlickgridCustomElement);
    return AureliaSlickgridCustomElement;
}());
exports.AureliaSlickgridCustomElement = AureliaSlickgridCustomElement;

import { bindable, inject } from "aurelia-framework";
import { LogManager } from "aurelia-framework";
import { getType } from "./helpers";
import mixinDeep from "mixin-deep";
import NotificationChecker from "resources/checkers/NotificationChecker.js";
import AvailabilityChecker from "resources/checkers/AvailabilityChecker.js";
import ToolEndpointChecker from "resources/checkers/ToolEndpointChecker.js";

const log = LogManager.getLogger("Q");

@inject(NotificationChecker, AvailabilityChecker, ToolEndpointChecker, Element)
export class SchemaEditorWrapper {
  @bindable
  schema;
  @bindable
  data;
  @bindable
  change;
  @bindable
  required;
  @bindable
  notifications;
  @bindable
  showNotifications;
  @bindable
  noObjectTitle;