I have experience with WPF
and MVVM
with Caliburn.Micro
and trying to implement a simple example in Angular2.
I had in WPF:
View
: completely separated from business logic, only contains code for the viewViewModel
: it contains the business logicCommands
: like services inAngular2
I want to implement this:
After clicking on the button, send the text from the
TextBox
to the server and clear theTextBox
. Disable the button if theTextBox
is empty.
I implemented this in WPF
like this:
This is my View:
<TextBox Name="Message" /> <!-- Binding created by Caliburn.Micro -->
<Button Name="Save" /> <!-- Binding created by Caliburn.Micro -->
This is my ViewModel:
public string Message { get; set { // ... NotifyPropertyChanged ... } }
public bool CanSave
{
get
{
return !String.IsNullOrEmpty(Message);
}
}
public void Save
{
var cmd = new SaveCommand(Message);
cmd.Run();
Message = null;
}
This is the command:
public class SaveCommand
{
public void Run()
{
// ...
}
}
As you see I didn't had to write Click
handlers, create binding etc. It was nicely handled by Caliburn
. No clutter, it's just very simple and easily extendable. Save
and CanSave
is nicely separated too. I do not have to worry about CanSave
in the Save
method.
I could reuse the Command
, reuse the ViewModel
and even the View
. I could create new ViewModels
by inheriting from existing ViewModels
. I could use the View
with different ViewModels
and vice versa.
How can I achieve similar functionality in Angular2
? Should I put my business logic into a Component
? The ViewModel
is somehow missing from Angular2...?