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

//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT

import { autoinject, customElement, bindable, bindingMode, inlineView } from 'aurelia-framework';
import { UIBaseInput } from "./ui-input";
import { UIEvent } from "../../utils/ui-event";

@autoinject()
@inlineView(`<template class="ui-input-wrapper"><div class="ui-input-control ui-phone" role="input"><span></span>
  <span class="ui-error"><ul class="ui-error-list"><li></li></ul></span>
  <input size="1" dir="ltr" type="tel">
  <span class="ui-clear">×</span></div>
  <div class="ui-input-info"></div>
</template>`)
@customElement('ui-phone')
export class UIPhone extends UIBaseInput {
  constructor(public element: Element) {
    super();
    this.clear = element.hasAttribute('clear');

//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT
import {autoinject} from 'aurelia-framework';

@autoinject()
export class CompStats {
  constructor() { }

  // aurelia hooks
  // canActivate(model) { return true; }
  // activate(model) { return true; }
  // bind(bindingContext) { }
  // attached() { }
  // detached() { }
  // unbind() { }
  // deactivate() { }
  // end aurelia hooks
}

// UI Ribbon
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2016 Sigma Frameworks
// @license     : MIT

import {autoinject, customElement, bindable} from "aurelia-framework";

@autoinject()
@customElement('ui-ribbon')
export class UIRibbon {
    private __ribbon: HTMLElement;
    private __theme: string = 'default';
    private __posH = 'r';
    private __posV = 't';

    constructor(public element: Element) {
        // check theme attributes
        if (element.hasAttribute('primary')) this.__theme = 'primary';
        if (element.hasAttribute('secondary')) this.__theme = 'secondary';
        if (element.hasAttribute('info')) this.__theme = 'info';
        if (element.hasAttribute('danger')) this.__theme = 'danger';
        if (element.hasAttribute('success')) this.__theme = 'success';
        if (element.hasAttribute('warning')) this.__theme = 'warning';
        // position

el.classList.add(`${this.prefix}`);
      }
    }
  }
}

@autoinject()
@customAttribute("ui-theme")
/**
 * Set theme
 */
export class UITheme extends BaseAttribute {
  protected prefix = "ui-theme";
}

@autoinject()
@customAttribute("ui-bg")
/**
 * Set background color
 */
export class UIBg extends BaseAttribute {
  protected prefix = "ui-bg";
}

@autoinject()
@customAttribute("ui-color")
/**
 * Set text color
 */
export class UIColor extends BaseAttribute {
  protected prefix = "ui-color";
}

this.value = 'primary';
  }
}

@autoinject()
@customAttribute('secondary')
export class UIThemeSecondary extends UIColorBase {
  constructor(public element: Element) {
    super(element);
  }
  bind() {
    this.value = 'secondary';
  }
}

@autoinject()
@customAttribute('muted')
export class UIThemeMuted extends UIColorBase {
  constructor(public element: Element) {
    super(element);
  }
  bind() {
    this.value = 'muted';
  }
}

@autoinject()
@customAttribute('dark')
export class UIThemeDark extends UIColorBase {
  constructor(public element: Element) {
    super(element);
  }

*/
export interface ILogoutUserParams {
}

/**
 * updateUser - parameters interface
 */
export interface IUpdateUserParams {
  username: string;
  user: User;
}

/**
 * UserApi - API class
 */
@autoinject()
export class UserApi extends Api {

  /**
   * Creates a new UserApi class.
   *
   * @param httpClient The Aurelia HTTP client to be injected.
   * @param authStorage A storage for authentication data.
   */
  constructor(httpClient: HttpClient, authStorage: AuthStorage) {
    super(httpClient, authStorage);
  }

  /**
   * Create user
   * This can only be done by the logged in user.
   * @param params.user Created user object

postAnonymousObject(obj: any, headersHandler?: () => {[header: string]: string}): Promise {
			return this.http.post('api/SpecialTypes/AnonymousObject', JSON.stringify(obj), { headers: headersHandler ? Object.assign(headersHandler(), { 'Content-Type': 'application/json;charset=UTF-8' }): { 'Content-Type': 'application/json;charset=UTF-8' } });
		}

		/**
		 * POST api/SpecialTypes/AnonymousObject2
		 */
		postAnonymousObject2(obj: any, headersHandler?: () => {[header: string]: string}): Promise {
			return this.http.post('api/SpecialTypes/AnonymousObject2', JSON.stringify(obj), { headers: headersHandler ? Object.assign(headersHandler(), { 'Content-Type': 'application/json;charset=UTF-8' }): { 'Content-Type': 'application/json;charset=UTF-8' } });
		}
	}

}

export namespace DemoWebApi_Controllers_Client {
	@autoinject()
	export class Entities {
		constructor(private http: HttpClient) {
		}

		/**
		 * POST api/Entities/createPerson
		 */
		createPerson(p: DemoWebApi_DemoData_Client.Person, headersHandler?: () => {[header: string]: string}): Promise {
			return this.http.post('api/Entities/createPerson', JSON.stringify(p), { headers: headersHandler ? Object.assign(headersHandler(), { 'Content-Type': 'application/json;charset=UTF-8' }): { 'Content-Type': 'application/json;charset=UTF-8' } }).then(d => d.json());
		}

		/**
		 * POST api/Entities/createPerson2
		 */
		createPerson2(p: DemoWebApi_DemoData_Client.Person, headersHandler?: () => {[header: string]: string}): Promise {
			return this.http.post('api/Entities/createPerson2', JSON.stringify(p), { headers: headersHandler ? Object.assign(headersHandler(), { 'Content-Type': 'application/json;charset=UTF-8' }): { 'Content-Type': 'application/json;charset=UTF-8' } }).then(d => d.json());

import {RouteConfig, Router, ConfiguresRouter, RouterConfiguration} from "aurelia-router";
import {PLATFORM, bindable, autoinject} from "aurelia-framework";
import {RouteMapper} from "./resources/services/route-mapper.service";
import environment from "./environment";


@autoinject()
export class App implements ConfiguresRouter {

  public static Routes: RouteConfig[] = [
    {
      route: "/",
      name: "home",
      redirect: "pools/straks1/"
    },
    {
      route: ['pools/'],
      name: 'pools',
      moduleId: PLATFORM.moduleName('./pools/pools'),
      nav: true,
      title: 'Pools',
      settings: {}
    },

getLabel(value, record) {
    if (isFunction(this.label)) return this.label(({ value, record }));
    return this.label || this.processValue(value, record) || '';
  }

  fireClick($event, value, record) {
    $event.stopPropagation();
    $event.preventDefault();
    if (this.isDisabled(value, record)) return;
    UIEvent.fireEvent('click', this.element, ({ value, record }));
    return false;
  }
}

@autoinject()
@customElement('ui-dg-button')
@inlineView(`<template></template>`)
export class UIDGButton extends UIDataColumn {
  type = 'button';
  constructor(public element: Element) {
    super(element);
    this.align = 'ui-text-center';
  }

  @bindable() dataId;
  @bindable() width;
  @bindable() minWidth;

  @bindable() icon;
  @bindable() label;
  @bindable() dropdown;

@bindable() readonly = false;
  @bindable() helpText = '';
  @bindable() placeholder = '';
  @bindable() emptyText = 'No Results';

  @bindable() options;
  @bindable() iconClass = '';
  @bindable() valueProperty = 'value';
  @bindable() displayProperty = 'text';
  @bindable() iconProperty = 'icon';
  @bindable() forceSelect = true;

}


@autoinject()
@inlineView(`<template class="ui-input-wrapper ui-input-list ui-tags"><div class="ui-input-control" role="input">
  <span class="ui-error"><ul class="ui-error-list"><li></li></ul></span>
  <div class="ui-tag-item"><span></span><i class="ui-clear">×</i></div>
  <input size="1" autocomplete="off"></div>
  <div class="ui-input-info"></div>

  <div class="ui-list-container ui-floating">
    <div class="ui-text-muted ui-pad-h">\${emptyText}</div>
    <template><div class="ui-list-group">\${group.label}</div>
    <div class="ui-list-item \${item.disabled?'ui-disabled':''}">
      <span class="\${iconClass} \${item.icon}"></span>&nbsp;<span></span></div></template></div></template>