Mvc ionic injecting dependency


I am trying to implement MVC pattern into my app but the problem I faced is that I am not able to inject dependecy of my service providers into my model.
Below is my code:
import { Injectable } from ‘@angular/core’;
import ‘rxjs/add/operator/map’;
import {Observable} from ‘rxjs/Observable’;
import { Http, Headers, RequestOptions } from ‘@angular/http’;

Generated class for the TSUService provider.

for more info on providers and Angular 2 DI.
export class TSUService {
headers: Headers;
options: RequestOptions;
constructor(public http: Http,private config: ConfigService, private userservice:UserService) {
console.log(‘Hello TSUService Provider’);
this.headers = new Headers({ ‘Content-Type’:‘application/x-www-form-urlencoded’});
this.options = new RequestOptions({ headers: this.headers });


var user = this.userservice.getUserData();
let dataStr = JSON.stringify({‘DEVICE_REQUEST_STRING’: user.requestString,‘LANGUAGE_ID’:user.languageId });
return this.callService(’/course/get_semisters’,‘data=’+dataStr,null);

//Basic calls
callService(endpoint: string, body: any, opts: RequestOptions) {
let service_url = this.config.getValue(‘api.url’);
let options = opts ? opts : this.options;
let p = + endpoint, body, options)
.map((responseData) => {
return responseData.json();

return p;



import {BaseModel} from ‘…/models/base-model’;
import {ClassModel} from ‘…/models/class-model’;

import { TSUService } from ‘…/providers/tsu-service’;
export class SemesterModel extends BaseModel{
private id: string;
private name: string;
private classes: Array;
private thumbnail: string;
private description: string;
private currentClass: ClassModel;
private currentClassIdx: number;
private tsuservice :TSUService;

init(json: any, currentClassIdx: number = -1){ = =;
	this.description = json.desc;
	this.thumbnail = json.image;
	this.currentClass = null;
	this.classes = new Array<ClassModel>();

// this throws the error
this.tsuservice.getClasses( ).subscribe(res => {
if(res.RESPONSE_CODE === 1){
console.log(‘err’, res.RESPONSE_CODE, res.RESPONSE_TEXT);

} ``

How I can inject dependency into the model?


If you don’t get any better answers, my suggestion is “change the design so you don’t have to”. Keep in mind that I despise JavaScript, so my opinion is biased, but I think its lack of core language support for OOP means that:

  • inheritance is best avoided in favor of composition
  • data should be dumb, with all complicated logic in service providers

So I would eliminate BaseModel, make SemesterModel an interface, and move fetchClasses() into TSUService so there is nothing to inject.


There’s a school of thought that “MVC is interactive, not reactive, and reactive MVC does not scale.” I’m not sure what I think about it myself, still trying to figure it out. But Ionic is reactive programming. I use Redux, not MVC, but that might be overkill (or just stupid) for a lot of situations. Anyway, I think you should research and determine which software architecture you really want.

If you want a more specific comment, I’d suggest you format your code correctly and post the exact error message you’re getting.


Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.