Create a gist now

Instantly share code, notes, and snippets.

@justinyoo /ninja.ts Secret
Created Mar 21, 2017

What would you like to do?
Using IoC Container in Vue.js and TypeScript App
// Ninja.vue
<template>
<div class="ninja">
<h2>Warrior: {{ warrior }}</h2>
<h2>Weapon: {{ weapon }}</h2>
</div>
</template>
<script lang="ts">
import Ninja from "./Ninja.ts";
export default Ninja;
</script>
// Ninja.ts
import Vue from "vue";
import Component from "vue-class-component";
import SERVICE_IDENTIFIER from "../models/Identifiers";
import container from "../configs/DependencyConfigs";
import { Ninja as _Ninja } from "../models/Warrior";
@Component({
name: "Ninja"
})
export default class Ninja extends Vue {
warrior: string;
weapon: string;
private _ninja: _Ninja;
created (): void {
// Service locator pattern
this._ninja = container.get<_Ninja>(SERVICE_IDENTIFIER.WARRIOR);
this.warrior = this._ninja.name;
this.weapon = this._ninja.weapon.name;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment