Mvc ionic injecting dependency


#1

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.

See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
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 });

}

getSemesters()
{
var user = this.userservice.getUserData();
let dataStr = JSON.stringify({‘DEVICE_REQUEST_STRING’: user.requestString,‘LANGUAGE_ID’:user.languageId });
console.log(dataStr);
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 = this.http.post(service_url + endpoint, body, options)
.map((responseData) => {
return responseData.json();
});

return p;

}

}
}

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

//services
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;
constructor()
{
super();
}

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

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

} ``

How I can inject dependency into the model?


#2

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.


#3

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.


#4

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.