I am new in angular js. I want to know difference between MVVM and MVC framework and which one is best for AngularJS.
I know about MVC and MVVM pattern but I can not find which one is best and why?
Thanks,
Hitesh
In MVVM, the UI (the View), faces the user and takes user input directly. Within the View, Commands within the ViewModel (which is the DataContext of the View) are triggered by this activity. Control flows to the ViewModel which interprets what the View has sent it and prepares its Models. After control flows back to the View it updates itself according to changes in the Models. If a new View is required, the ViewModel communicates this with the NavigationService (or whatever method of navigation your application uses), which is the purview of the Window or Frame--UI components. You can see that the ViewModel isn't first and last to act; the View plays a much greater role than in MVC.
The architecture of WPF/Silverlight is the reason why things are done this way. The command, binding and navigation infrastructures can't be controlled/replaced by the Controller; they are tightly integrated with the UI. So the Controller must sit below the View and take a more passive role.
AngularJS is MV*(MV what ever) either it can be MVC or MVVC.
Model : Data you want to update.
View : HMLT/Template.
Controller : function which maintains application data and behavior.
Example for MVC is binding data to view using Interpolation {{}}.
You can update view(html) using controller.
Example for MVVC is two way data binding using ngModel.
If you bind a ngModel to input tag.
Value changed in input filed is updated in controller.
Value changed in controller is updated in input field.
Related
Getting started with Angular, I am trying to implement a toolbar.
The application is structured in a menu bar, a view and the toolbar that form the web-page.
This toolbar has a general purpose (provides help functionality and error display), but for specific views adds some buttons that control the functionality (save, cancel, edit, delete, etc).
In the current design the view and the toolbar are siblings. The view controller depends on the data the view contains, and it can have different functionality. (For example: A view might allow data import, so there will be an import function in the toolbar, while other view might not.)
My problem is I cannot picture the structure of the communication between the view and the toolbar. Because the controllers are tightly coupled a service does not seem to address the communication.
Any help?
You can:
Share data between different controllers/services using rootScope
(use wisely)
You can Publish and Subscribe for app events using
$on, $broadcast and $emit
One good strategy which I have used and helped is to keep all App events definition in one service called something like AppEvents so you can easily keep track of them and control what event causes what from a single place.
Here is one nice article to read that expands more on this topic
I've been looking into AngularJS and its MVC solution. Typically a MVC framework uses the HTML structure itself to bind to a backend data model. In AngularJS's case this is done with Directives, which work dandy for straight HTML.
For my scenario I have a data model that will be transmuted into a visual representation on an immediate mode Canvas. Then the visual items rendered will also need to be interacted with in order to edit the values in the backend data model.
What is the best way to achieve two way binding like this between items and the item values in a data model within a MVC framework?
Angulars strength is that it deals with the DOM for you without you having to worry about it. If you were to use SVG instead, you could let Angular deal with updating the view since SVG is DOM but if you need to use a canvas instead, Angular can't handle the drawing for you.
You can still benefit from using Angular by using watches and redrawing your canvas when data changes, but you need to deal with the drawing yourself.
I'm creating my first application in WindowsForms and wondered how I would do to validate the User input logic layer and return to the textbox control such that he filled out incorrectly by ErrorProvider. That is, each would have to return the validation error for each specific control indicating whether the user typed an invalid value.
This is a good practice?
Today, this validation is done on the presentation layer and would like to use my more logical layer so that she is not only acting as an intermediary between the presentation and data access.
If you would like to maintain separation of concerns you should look into implementing the model-view-controller design pattern. This will allow you to keep you UI code cleaner
Overview of MVC
Model
Contains state and implementation
Notifies listeners (views) of changes
View
Displays model state (and responds to model state notifications)
Send all user input to the controller
Controller
Processes all input from the view
Changes model state and calls model methods
Load a different view as needed
Further Reading
http://www.martinfowler.com/eaaDev/uiArchs.html
http://en.wikipedia.org/wiki/Model-view-controller
I plan on writing a WPF app following the MVVM pattern for the first time but something is not quite clear to me. Let's say that the view has a "Save" button and when that is hit I need to save the current state of my data (the model). This will be done by sending a SOAP message to a SOAP service.
Where in my MVVM setup do these SOAP request/response handlers live? Does the view model make the SOAP call itself whenever the save button is hit? Should the view model notify the model to save itself instead? Maybe it's some other way, completely separate from the MVVM?
My thinking was that (at least in this specific case) the view model would handle it since it needs to disable the save button in the view until the current save request has completed.
I typically put a logical client-side application/business layer between the viewmodel and the SOAP/WCF/Webservice layer. This layer is where all the non-view business logic and processing logic lives. Remember, the viewmodel is the model of the view, not the model of the domain. Therefore, you want to hand off control to the next layer down ASAP.
In this scenario, I would have the view trigger a save command on the the viewmodel, which would in turn call into the application layer, which would in turn make any calls to remote services.
The ViewModel, should not do such an operation. It only should trigger it. Therefore the model has to do it (or another intermediate layer that is responsible for the load-and save-operations, but not the ViewModel itself).
The ViewModel can observe the save-operation and may provide state-information about the progress for the View.
I would create a service handler that can be accessed by the ViewModel. Pass this into the constructor of the viewmodel, and call the methods exposed by the service handler.
I am using MVVM patern for developing my WPF application. It working fine for unrelated pages, means how to go in another view from one view.
Eg:
I have one list page in which some records are coming from one ViewModel and another from another ViewModel, means I have two ViewModel form my single View. And now I want to display another View by some event.
I am using IsSelected property for notification of changes. This mechanism works only upto when any action performed on same ViewModel, what should I do for such senario.
MVVM as a pattern is about separating concerns, improving testability of your code, etc.. so your ViewModel should only be concerned with applying business rules and providing data for your View.
You will need to use this in conjunction with some kind of MVC pattern, where the Controller's concern is handling the application navigation/state, etc.
(edit)
For example, imagine your app has a login screen, so you create a LoginView, which contains a username and password; probably an OK button and a Cancel button.
You create a LoginViewModel class to bind this view and handle the logic of the login within this class.
But once the app is logged in, it is not the responsibility of the login ViewModel to know where to go next; or which View to render next.. maybe you want to navigate to the last screen this user was on the previous time they were logged in? Maybe it goes to a default screen, as per the User's profile? This decision is nothing to do with the login function...
So if you create a Controller class, you can: Instantiate an instance of the LoginViewModel class, then depending on the login result, apply business rules as required to remove the LoginViewModel from scope, and create a new ViewModel, (e.g. HomePageViewModel) etc...
Finally, you'll need to let the app know which Views to use for each VM using DataTemplates
There are heaps of other ways to skin this particular cat, of course... this is just one idea...
As long as the core concept remains: Use MVVM to bridge the gap between View and Model in a clean, testable way... don't try and make it the 'one pattern fits all' :)
HTH :)
I agree with IanR to use a Controller for the workflow/navigation.
The ViewModel sample of the WPF Application Framework (WAF) shows how this might be done.