Home > Developer > Web Develop
ObjectiveThis article reads as follows:
- Objective
- Model View Controller-mvc
- Model View VIEWMODEL-MVVM
- ViewModel
- The vitality that Angularjs brings
- Conclusion
The first contact with MVC is ASP. I have been writing aspx since I contacted the MVC love, deeply shocked by its smart and concise thinking, and the original I JS write is slag, even jquery is not good. It never occurred to me that the front-end could even import MVC into something so abstract.
In recent years, the demand for the front-end has become heavier, most of the back-end processing has shifted to the front end, and JavaScript has been very well-known, a disgrace to the snow past. The past JavaScript is just the display of the auxiliary pages to make some flashy special effects, and now has evolved into the data presentation, processing of the main force-as the front-end task is heavy, the front-end mv* momentum.
Mv* 's center of Thought is consistent: UI and logical separation, extracting data models.
MVC Core: Model (models), View (UI), Controller (controllers)
Their working model should be: Controller=>model=>view
MVVM Core: Model (models), view (UI), ViewModel (view model)
Their working model should be: Model<=>viewmodel<=>view
What's confusing is: what is the controller in MVVM?
Both NG and Avalon provide a method called controller, in fact their meaning is consistent with MVC: processing/processing model.
The first use of ANGULARJS (hereinafter referred to as NG) made me feel very confused, after all, it overturned the traditional Dom operation, the past page of a list page data is to get the data, either encapsulated into model, or write a method and then show to the page, such as the following code:
(function Span class= "Hljs-params" > () {var data = [{name: ' linkfly ', blog: ' http://www.cnblogs.com/silin6/'}],//get data HTML = [ ' #container '); //stitching for HTML Data.foreach ( ' <li> ', Item.name, '-', item.blog); }); Html.push (//presented to the page $container. HTML (html.join (
The code for using NG is as follows:
<ul data-ng-repeat="item in datas"> <li>{{item.name}} - {{item.blog}} </li></ul>
var app = angular.module(‘demo‘, []).controller(‘demoController‘, function ($scope) { //ViewModel双向绑定 $scope.datas = [{ name: ‘linkFly‘, blog: ‘http://www.cnblogs.com/silin6/‘ }];});
The core idea of MVVM: No more attention to how the data is presented to the page, and the framework updates the model and view.
Ng also provides a custom ViewModel:Directive (Directive)with the following code:
<! DOCTYPE html><Htmlxmlns="Http://www.w3.org/1999/xhtml"data-ng-app="Demo" ><Head><Metahttp-equiv="Content-type"Content="Text/html; Charset=utf-8 "/><Title>ng Demo</Title><ScriptSrc="Http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js" ></Script></Head><BodyData-ng-controller="Democontroller" ><HelloData-ng-model="Text" ><Ahref="javascript:;" >i ' m {{text}}</A></Hello><Script> var app = Angular.module (' Demo ', []). Controller (' Democontroller ',function($scope) {$scope. Text =‘***‘; }). directive (' Hello ',function() {Write Hello Instructionsreturn {restrict: ' E ', //specifies that this directive is a scope of element type: {text: ' =ngmodel '},//specified object link: function ($scope, $elem) {//Register event $ Elem.on ( ' click ', function () {//modify data, two-way binding $scope. Text = $scope. Text = = * * * *? ' linkfly ': ' * * *; $scope. $apply ();}); } }; }); </script></ body></HTML> Directive can let your code plug-in/component, when you want to complete a calendar plug-in, you can use directive to achieve, Directive is the ViewModel in Ng, and then see the ViewModel: Update the model into the view. Because ViewModel faces the operation model and view, all the logic of event binding and Operation Dom should be in the directive of viewmodel/ng.
Look again at our previous MVVM diagram:
The bidirectional binding principle implemented by ViewModel: receives model from an external environment and renders to view. Update the model from the View reception behavior (the web is a browser event, such as a mouse click).
When it comes to understanding ViewModel's duties, I believe the directive understanding of NG will be great.
The processing/processing of data should remain in the controller. The nature of MVVM is only infused with a layer of viewmodel.
In fact, mainly from ViewModel.
directive, who first touched Ng, was deeply confused and largely incomprehensible to MVVM. Because NG's directive behavior is too modular, it took a long time to understand that our own JavaScript is also a component, in fact, it also mapped the better Web ideas: Web Components.
The directive in NG can give a small partner who is accustomed to coding in the code to taste the component sweetness, if you need to undergo a painful transformation of the mind.
The future will come sooner or later, and WEB components are a trend.
ViewModel's thinking overturns the traditional JavaScript manipulation of the DOM, and the idea of adapting to MVC can make JavaScript's logic clearer. In order to meet Viewmodel,ecmascript next release (ECMAScript 7, current ECMAScript 5) prepared Object.observe ()--listen/Observe JavaScript object: When the object being monitored changes, Notifies listeners that the data is a two-way binding tool.
ConclusionIn fact, if you can understand viewmodel, then many things in the MVVM framework will be able to get a very clear answer, most of the time we always in the form of programming thinking on the code, when the introduction of a framework, it means that you have to accept its thoughts, but the subversion of a person's thinking is a very difficult thing, After all, we can't sneak into an idea like the one in the dream room, and the world will be overthrown.
The fact that jquery is so remarkable is that when you start using it, you find that it doesn't invade your mind, you can still write your own code in your own mind, and you have to say that the idea of jquery allows it to do its best today-focusing on the DOM.
Someone might want to say, "jquery is a library, don't talk to the frame and mention it." "
I know. Just sigh.
Linkfly Original: http://www.cnblogs.com/silin6/p/4279965.html Source: www.cnblogs.com/silin6/statement: Hey! You cuff the above a big paragraph, I think you should not mind by the way, I hope you can in every reference to retain this paragraph of the statement, respect for the author's hard work, this article and blog Park to share.
- avalon-Mini Easy-to-use MVVM framework
- Illustrations of MVC,MVP and MVVM
See MVVM from Angularjs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
