Am working on a web application using angular2. MVVVM pattern : Model View ViewModel, in angular2 we have : the model classes , the services that may extract data from the server side and the template which the View and the component. I wonder how can we apply properly MVVM architecture in angular2 project ?
1 Answer
In a typical MVVM pattern you have Model objects (this is all pseudo code):
class MyModel {
public int id;
public string foo;
public int bar;
public date createdOn;
}
Then you have a view:
<div>{{myModelBar}}</div>
<div>{{myModelFoo}}</div>
<div>{{anotherModelBar}}</div>
Do you see how the view and the model don't correlate? The view requires some properties from the model, but not all of them. The view also requires properties that don't exist in the model. This is where the need for a view model comes in:
class MyViewModel {
public string myModelFoo;
public int myModelBar;
public int anotherModelBar;
}
Now our view has a model it can actually use. So how do we get from the Model to the ViewModel to the View? We need a Controller:
class Controller() {
var modelA = new MyModel();
modelA.foo = "Foo";
modelA.bar = 1;
var modelB = new MyModel();
modelB.bar = 2;
var viewModel = new MyViewModel();
viewModel.myModelFoo = modelA.foo;
viewModel.myModelBar = modelA.bar;
viewModel.anotherModelBar = modelB.bar;
// The view function here would retrieve the view and combine it with the ViewModel
var view = View('path_to_our_view_file', viewModel);
return view;
}
This is the MVVMC pattern. I would interject and say that the MVVM pattern by itself is pretty useless because your model, view and view model don't have any behavior regarding the view or how to compose the view. What I have seen in frameworks that claim to be MVVM is that that the ViewModel is typically a mashup of a Controller and the ViewModel, or they consider the pattern to be controllerless because there is no routing. However, I would say that the routing is implied in these cases where a ViewModel is acting on a particular view.
It should be plainly obvious that Angular does not strictly adhere to this pattern. However, most of the concepts are similar. You still have a controller and view, they are just mashed together in the form of a component. The interesting thing about Angular 2 as far as controllers go is that you can have actual routing to a controller and you have implied routing via the template tag assigned to the component. But the result is the same, you have some way that the Component is called or routed to, which retrieves a view. As in many frameworks, the model layer is up to you to create.
So where is the ViewModel layer? I would propose that since all public variables in a Component are accessible to the View the ViewModel layer is the the properties of the Component class. In a typical server client application where the client has to make a request to the server and the server returns a view, you need to rebuild state on every call. This requires you to go down the MVVMC chain on every call: Controller -> Model -> ViewModel -> View. In a client side application in Angular, the controller holds state for the view, and so that is where the ViewModel resides.
So the question becomes, how do we separate concerns of the View from that of the Model. You simply have to be smart about not using the Model directly in your views. One way would be to create a separate view model as a class.
class MyComponentViewModel {
name: string;
list: Array<string>;
}
@Component({
selector: 'my-component',
template: `<div>{{model.name}}</div>
<ul>
<li *ngFor="let item of (model.list | async)">{{item}}</li>
</ul>`
})
class MyComponent {
model: MyComponentViewModel;
private propertyA: string
constructor(private dataService: DataService) {
this.model = new MyComponentViewModel();
this.model.list = [];
let page = dataService.getCurrentPage();
let children = dataService.getPageChildren(page.id).subscribe(pages => {
this.model.list = [];
for(let page of pages) {
this.model.list.push(page.title);
}
})
this.model.name = page.title;
}
}
None of that code is tested, buy hopefully you get the point. You can just create your own view models and instead of dirtying up the properties of your Component class you can put the view properties in their own class. Pros of this approach would be cleaner Components and separation of concerns with views as you now have a contract to work with (as long as you stick to the pattern). Cons would be that it is a little more verbose, it may be difficult to convert some types to more generic ones that would be better suited for view models, it may mess with angular change detection since you are placing all properties on one object (I'm not sure of this one). As for me, I probably wouldn't use this pattern since it seems overly verbose.